仿ios的appstore中的图片过度拉伸效果 android仿ios下拉放大图片的最佳方案,自定义扩展RecycleView,保留其原始功能,
一.效果图:
二.快速实现:
1.主函数代码:
import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.view.Gravity; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.RelativeLayout; import android.widget.TextView; import com.we.widget.WeRecycleView; public class MainActivity extends Activity { private WeRecycleView mRecycleView; private int mCount = 100; private int mDensity; private TextView mTitleView; private final int COL_3F51B5 = Color.parseColor("#3F51B5"); private final int RED = Color.red(COL_3F51B5); private final int GREEN = Color.green(COL_3F51B5); private final int BLUE = Color.blue(COL_3F51B5); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mDensity = (int) getResources().getDisplayMetrics().density; mTitleView = findViewById(R.id.title); ImageView ivIcon = findViewById(R.id.iv_icon); ivIcon.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { } }); mTitleView.setBackgroundColor(Color.argb(0, RED, GREEN, BLUE)); mRecycleView = findViewById(R.id.recycle); mRecycleView.setLayoutManager(new LinearLayoutManager(this)); mRecycleView.setScrollMode(WeRecycleView.SCROLL_SCALE_HEAD); mRecycleView.setMaxScale(4f); //如果有titleBar,这就设titlebar的高度,没有就不需要设置 mRecycleView.setCloseOffset(50 * mDensity); mRecycleView.setOnHeadExpandListener(new WeRecycleView.OnHeadExpandListener() { @Override public void onExpand(float percent) { mTitleView.setBackgroundColor(Color.argb((int) (255 * (1 - percent)), RED, GREEN, BLUE)); } @Override public void onEnterSafeArea(boolean isEnter) { } }); initAdapter(); } private void initAdapter() { mRecycleView.setAdapter(new RecyclerView.Adapter() { @Override public int getItemViewType(int position) { return position; } @NonNull @Override public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { if (viewType == 0) { final ImageView imageView = new ImageView(MainActivity.this); imageView.setScaleType(ImageView.ScaleType.FIT_XY); imageView.setLayoutParams(new RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT , (int) (getResources().getDisplayMetrics().widthPixels * 533f / 800))); return new RecyclerView.ViewHolder(imageView) { @Override public String toString() { return super.toString(); } }; } else { TextView textView = new TextView(MainActivity.this); textView.setTextColor(Color.BLACK); textView.setTextSize(30); textView.setGravity(Gravity.CENTER); textView.setLayoutParams(new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, mDensity * 150)); return new RecyclerView.ViewHolder(textView) { @Override public String toString() { return super.toString(); } }; } } @Override public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) { if (position == 0) { ((ImageView) holder.itemView).setImageResource(R.drawable.pic); } else { holder.itemView.setBackgroundColor(position % 2 == 0 ? Color.WHITE : Color.parseColor("#F0F0F0")); } } @Override public int getItemCount() { return mCount; } }); } }2.布局:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <com.we.widget.WeRecycleView android:id="@+id/recycle" android:layout_width="match_parent" android:layout_height="match_parent" /> <TextView android:id="@+id/title" android:text="仿IOS下拉放大图片" android:textColor="#ffffff" android:layout_width="match_parent" android:layout_height="50dp" android:paddingLeft="20dp" android:gravity="center_vertical" android:textSize="18dp" /> <ImageView android:id="@+id/iv_icon" android:layout_marginLeft="10dp" android:layout_marginBottom="10dp" android:layout_alignParentBottom="true" android:src="@drawable/stop_timer_btn" android:layout_width="50dp" android:layout_height="50dp" android:gravity="center_vertical" android:textSize="18dp" /> </RelativeLayout>3.Shape绘制带阴影效果的圆形按钮:
stop_timer_btn.xml:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- normal --> <item android:state_enabled="true" android:state_focused="false" android:state_pressed="false"> <layer-list> <item android:drawable="@drawable/shape_sgf" /> <item android:bottom="15dp" android:left="15dp" android:right="15dp" android:top="15dp"> <shape android:shape="oval"> <stroke android:width="1dp" android:color="#FFFCFCFC" /> <gradient android:angle="270" android:endColor="#FF91c0e8" android:startColor="#FFa7d3fa" /> </shape> </item> </layer-list> </item> <!-- pressed --> <item android:state_enabled="true" android:state_pressed="true"> <layer-list> <item android:drawable="@drawable/shape_sgf" /> <item android:bottom="15dp" android:left="15dp" android:right="15dp" android:top="15dp"> <shape android:shape="oval"> <stroke android:width="2dp" android:color="#FFf8f640" /> <gradient android:angle="270" android:endColor="#FF91c0e8" android:startColor="#FFa7d3fa" /> </shape> </item> </layer-list> </item> <!-- selected --> <item android:state_enabled="true" android:state_focused="true" android:state_pressed="false"> <layer-list> <item android:drawable="@drawable/shape_sgf" /> <item android:bottom="15dp" android:left="15dp" android:right="15dp" android:top="15dp"> <shape android:shape="oval"> <stroke android:width="2dp" android:color="#FFf8f640" /> <gradient android:angle="270" android:endColor="#FF91c0e8" android:startColor="#FFa7d3fa" /> </shape> </item> </layer-list> </item> <!-- ...... --> </selector>shape_sgf.xml:
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- outer circle --> <item> <shape android:shape="oval" > <solid android:color="#FFACB8C3" /> </shape> </item> <!-- inner shadow of outer circle --> <item android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp"> <shape android:shape="oval"> <solid android:color="#FFbdcad6" /> </shape> </item> <item android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp"> <shape android:shape="oval"> <solid android:color="#FFc3cfd9" /> </shape> </item> <item android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp"> <shape android:shape="oval"> <solid android:color="#FFcbd6df" /> </shape> </item> <item android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp"> <shape android:shape="oval"> <solid android:color="#FFd4dee5" /> </shape> </item> <!-- gap --> <item android:bottom="6dp" android:left="6dp" android:right="6dp" android:top="6dp"> <shape android:shape="oval" > <solid android:color="#FFdae2e8" /> </shape> </item> <!-- outer shadow of center circle --> <item android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp"> <shape android:shape="oval"> <solid android:color="#FFced5dc" /> </shape> </item> <item android:bottom="12dp" android:left="12dp" android:right="12dp" android:top="12dp"> <shape android:shape="oval"> <solid android:color="#FFbcc4c9" /> </shape> </item> <item android:bottom="13dp" android:left="13dp" android:right="13dp" android:top="13dp"> <shape android:shape="oval"> <solid android:color="#FFb4bbc0" /> </shape> </item> <item android:bottom="14dp" android:left="14dp" android:right="14dp" android:top="14dp"> <shape android:shape="oval"> <solid android:color="#FFacb3b8" /> </shape> </item> <!-- center circle --> <item android:bottom="15dp" android:left="15dp" android:right="15dp" android:top="15dp"> <shape android:shape="oval"> <stroke android:width="1dp" android:color="#FFFCFCFC"/> <gradient android:angle="270" android:endColor="#FFCFD7DD" android:startColor="#FFF0F5F9" /> </shape> </item> </layer-list>4.相关源码:
https://github.com/chengweidev/widget
