仿畫廊效果，顯示兩邊縮小帶透明度的item

今天寫一個仿畫廊效果的demo, 中間正常顯示，要能看見兩個的item， 縮小加透明度
那么我就想到了viewPager, 因為之前寫過類似的項目，也沒有記錄， 今天就記錄下
先看圖


微信圖片_20200729145102.jpg

本來錄個屏的，沒想到上傳不了MP4的，湊合用吧
先看布局

<?xml version="1.0" encoding="utf-8"?>
<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的區(qū)域， 這樣距離兩邊的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布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_linearLayout"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@drawable/shape_blue_radius_10"
    android:orientation="vertical">

    <TextView
        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" />

</LinearLayout>

這就是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添加滾動監(jiān)聽的時候 設置數據也要在調用一次， 不然會在滑動時才會顯示效果
設置完這些 還有一個 RecyclerView沒有設置間距 可以在布局設置 也可以用方法設置 我方便就在布局設置的

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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">

    <TextView
        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" />

</LinearLayout>

距離左右有一點間距， 自己掌握
RecyclerView適配器就沒什么可說的了，都一樣的
基本就是這些了

所以可見實現一種功能并不是只有一種方法， 其實我寫了三種， 可能實現這個功能還有很多方法， 這里就先上兩個， 如果有更好的方法請@我
地址：https://github.com/xiaobinAndroid421726260/Android_CustomAllCollection.git

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內容