Android仿画廊效果,显示两边缩小带透明度

共 2428字,需浏览 5分钟

 ·

2021-10-20 02:45

今天写一个仿画廊效果的demo, 中间正常显示,要能看见两个的item, 缩小加透明度。

那么我就想到了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.ViewPager android: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.RecyclerView android: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是无所不能的...


下面开看看代码:

 @Override    protected 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() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override public void onPageSelected(int position) { // 滑动之后处理逻辑 }
@Override public 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;
@Override public 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();            // 绑定到 mRecyclerView            snapHelper.attachToRecyclerView(mRecyclerView);        }        mAdapter.addData(mData);        // 需要在添加数据时 再调用一次 不然会在滑动时才会显示效果        mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {            @Override            public 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" />


距离左右有一点间距, 自己掌握RecyclerView适配器就没什么可说的了,都一样的,基本就是这些了

源码地址:
https://github.com/xiaobinAndroid421726260/Android_ViewPagerRVGallery.git


到这里就结束啦。
浏览 168
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报