Android仿画廊效果，显示两边缩小带透明度
龙旋
共 2428字，需浏览 5分钟
·
2021-10-20 02:45
那么我就想到了viewPager, 因为之前写过类似的项目，也没有记录， 今天就记录下。
先看图：
先看布局
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><androidx.viewpager.widget.ViewPagerandroid:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="100dp"android:clipToPadding="false"android:paddingLeft="35dp"android:paddingRight="35dp"android:layout_marginTop="50dp"app:layout_constraintTop_toTopOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintLeft_toLeftOf="parent"/><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/recyclerView"android:layout_width="match_parent"android:layout_height="240dp"android:paddingLeft="35dp"android:paddingRight="35dp"android:clipToPadding="false"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintLeft_toLeftOf="parent"/>androidx.constraintlayout.widget.ConstraintLayout>
android:clipToPadding="false"主要是这个，这个属性默认是true, 改成false是让控件绘制padding的区域， 这样距离两边的item就可以看见了。
写完viewPager之后 我就在想recyclerView 能不能实现呢， 于是就准备试一试， 果然recyclerView是无所不能的...
下面开看看代码：
@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mViewPager = findViewById(R.id.viewPager);mRecyclerView = findViewById(R.id.recyclerView);initView();}private void initView() {for (int i = 0; i < 6; i++) {mData.add("这是第" + (i + 1) + "个");}initPagerAdapter();initAdapter();}private void initPagerAdapter() {if (mPagerAdapter == null) {mPagerAdapter = new ViewPagerAdapter();// 设置页面之间的边距mViewPager.setPageMargin(dp2px(12));// 设置缩放 透明度mViewPager.setPageTransformer(false, new CustPagerTransformer());}//添加数据之后在设置适配器这样setPageTransformer会生效，否则两边的item没有透明的效果mViewPager.setAdapter(mPagerAdapter);mPagerAdapter.addData(mData);mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {// 滑动之后处理逻辑}@Overridepublic void onPageScrollStateChanged(int state) {}});}
代码上有注释，相信基本都能看明白了。
有一点需要注意一下就是viewPager设置适配器 适配器添加数据，在添加数据的时候需要在设置一次适配器， 否则缩放透明效果不存在，或者顺序会混乱。
下面是viewPager缩放的类：
public class CustPagerTransformer implements ViewPager.PageTransformer {private static final float MIN_SCALE = 0.8f;private static final float MIN_ALPHA = 0.5f;private static final float MAX_SCALE = 1.0f;private static final float MAX_ALPHA = 1.0f;@Overridepublic void transformPage(@NonNull View view, float position) {if (position < -1) {view.setScaleY(MIN_SCALE);view.setAlpha(MIN_ALPHA);} else if (position == 0) {view.setScaleY(MAX_SCALE);view.setAlpha(MAX_ALPHA);} else if (position <= 1) {float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));float alphaFactor = MIN_ALPHA + (1 - MIN_ALPHA) * (1 - Math.abs(position));view.setScaleY(scaleFactor);view.setAlpha(alphaFactor);} else {view.setScaleY(MIN_SCALE);view.setAlpha(MIN_ALPHA);}}}
还有item布局：
android:id="@+id/item_linearLayout"android:layout_width="match_parent"android:layout_height="100dp"android:background="@drawable/shape_blue_radius_10"android:orientation="vertical">android:id="@+id/tv_text"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="这是第几个"android:textColor="#ffffff"android:textSize="17dp" />
这就是viewPager的实现， 下面看看RecyclerView
private void initAdapter() {if (mAdapter == null) {mAdapter = new RecyclerViewAdapter();mRecyclerView.setAdapter(mAdapter);layoutManager = new LinearLayoutManager(this);// 设置方向layoutManager.setOrientation(RecyclerView.HORIZONTAL);mRecyclerView.setLayoutManager(layoutManager);// 让item居中显示LinearSnapHelper snapHelper = new LinearSnapHelper();// 绑定到 mRecyclerViewsnapHelper.attachToRecyclerView(mRecyclerView);}mAdapter.addData(mData);// 需要在添加数据时 再调用一次 不然会在滑动时才会显示效果mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {@Overridepublic void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {super.onScrolled(recyclerView, dx, dy);final float MIN_SCALE = 0.85f;final float MIN_ALPHA = 0.5f;final float MAX_SCALE = 1.0f;final float MAX_ALPHA = 1.0f;int childCount = recyclerView.getChildCount();for (int i = 0; i < childCount; i++) {View child = recyclerView.getChildAt(i);int left = child.getLeft();int paddingStart = recyclerView.getPaddingStart();// 遍历recyclerView子项，以中间项左侧偏移量为基准进行缩放float bl = Math.min(1, Math.abs(left - paddingStart) * 1f / child.getWidth());float scale = MAX_SCALE - bl * (MAX_SCALE - MIN_SCALE);float alpha = MAX_ALPHA - bl * (MAX_ALPHA - MIN_ALPHA);child.setScaleY(scale);child.setAlpha(alpha);}}});}
RecyclerView添加滚动监听的时候 设置数据也要在调用一次， 不然会在滑动时才会显示效果。
设置完这些 还有一个 RecyclerView没有设置间距 可以在布局设置 也可以用方法设置 我方便就在布局设置的
android:id="@+id/item_linearLayout"android:layout_width="match_parent"android:layout_height="240dp"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:background="@drawable/shape_blue_radius_10"android:orientation="vertical">android:id="@+id/tv_text"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="这是第几个"android:textColor="#ffffff"android:textSize="17dp" />
评论