今天因为一个项目需求一个滑动放大功能学习了这个功能。
这个是我的实现截图
学习文章地址:https://blog.csdn.net/vipdatoucth/article/details/64128290
我先做个概述:通过确定每个item与边界的距离来确定每个item的放大尺寸。
通过给RecycleView设置滚动监听,在 onScrolled 中完成功能。
具体的算法是:
1.规定缩放比例的最大值和最小值 MAX_SCALE(eg: 1.2f) 和 MIN_SCALE(eg:0.85f)
2.当滑动的时候,计算recycleview的所有可用的子view的左边界(left = View.getLeft())和右边界(left = View.getRight())的距离比例 percent = left <0|| right <0?0: Math.min(left, right) *1f/ Math.max(left, right);
3.计算每个子view的缩放比例:floatscaleFactor =MIN_SCALE+ Math.abs(percent) * (MAX_SCALE-MIN_SCALE);
child.setScaleY(scaleFactor);
public class MainActivity extends AppCompatActivity { private List<icon> list = new ArrayList<>(); private int mScreenWidth; private static final float MIN_SCALE = .95f; private static final float MAX_SCALE = 1.15f; private LinearLayoutManager mLinearLayoutManager; private int mMinWidth; private int mMaxWidth; RecyclerView recyclerView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //设置布局充满全屏 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); initIcon(); mScreenWidth = getResources().getDisplayMetrics().widthPixels; mMinWidth = (int) (mScreenWidth * 0.28f); mMaxWidth = mScreenWidth - 2 * mMinWidth; recyclerView = (RecyclerView) findViewById(R.id.icon_name_item); mLinearLayoutManager = new LinearLayoutManager(this); mLinearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL); new LinearSnapHelper().attachToRecyclerView(recyclerView); recyclerView.setLayoutManager(mLinearLayoutManager); iconAdapter adapter = new iconAdapter(list); recyclerView.setAdapter(adapter); recyclerView.addOnScrollListener(mOnScrollListener);//设置监听器 } private RecyclerView.OnScrollListener mOnScrollListener = new RecyclerView.OnScrollListener() {//监听器方法 @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { final int childCount = recyclerView.getChildCount();//获取可见item数量 // Log.e("tag", childCount + ""); for (int i = 0; i < childCount; i++) { LinearLayout child = (LinearLayout) recyclerView.getChildAt(i); RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams) child.getLayoutParams(); lp.rightMargin = 3; lp.height=500; int left = child.getLeft(); int right = mScreenWidth - child.getRight(); final float percent = left < 0 || right < 0 ? 0 : Math.min(left, right) * 1f / Math.max(left, right); // Log.e("tag", "percent = " + percent); float scaleFactor = MIN_SCALE + Math.abs(percent) * (MAX_SCALE - MIN_SCALE);//放大算法 // int width = (int) (mMinWidth + Math.abs(percent) * (mMaxWidth - mMinWidth)); lp.width = 500; child.setLayoutParams(lp); child.setScaleY(scaleFactor);//将高度放大 child.setScaleX(scaleFactor);//将宽度放大 if (percent > 1f / 5) { ((TextView) child.getChildAt(1)).setTextColor(Color.BLUE); } else { ((TextView) child.getChildAt(1)).setTextColor(Color.BLACK); } } } }; private void initIcon() {//初始化 for (int i=0;i<10;i++){ icon qq = new icon("qq", R.drawable.qq); list.add(qq); icon wechat = new icon("wechat", R.drawable.wechat); list.add(wechat); }} }
主活动布局文件
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:orientation="vertical" tools:context="com.example.thinkpad.adas.MainActivity"> <TextClock android:id="@+id/textClock" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:format24Hour="HH:mm" android:textSize="100sp" android:textStyle="bold" android:background="@color/colorDark" /> <View android:layout_width="match_parent" android:layout_height="5dp" android:background="#000" /> <android.support.v7.widget.RecyclerView android:id="@+id/icon_name_item" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:background="@color/colorDark" android:clipChildren="false" /> </LinearLayout>
recyclerview子项布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" > <ImageButton android:background="@drawable/mainbt_selector" android:layout_marginTop="30dp" android:id="@+id/icon_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" /> <TextView android:id="@+id/icon_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:textSize="24sp" android:gravity="center" android:layout_marginLeft="10dp"/> </LinearLayout>