仿畫(huà)廊效果埃难,顯示兩邊縮小帶透明度的item

今天寫(xiě)一個(gè)仿畫(huà)廊效果的demo, 中間正常顯示,要能看見(jiàn)兩個(gè)的item蟋恬, 縮小加透明度
那么我就想到了viewPager, 因?yàn)橹皩?xiě)過(guò)類似的項(xiàng)目翁潘,也沒(méi)有記錄, 今天就記錄下
先看圖


微信圖片_20200729145102.jpg

本來(lái)錄個(gè)屏的歼争,沒(méi)想到上傳不了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"
主要是這個(gè)渗勘,這個(gè)屬性默認(rèn)是true, 改成false是讓控件繪制padding的區(qū)域, 這樣距離兩邊的item就可以看見(jiàn)了

寫(xiě)完viewPager之后 我就在想recyclerView 能不能實(shí)現(xiàn)呢俩莽, 于是就準(zhǔn)備試一試旺坠, 果然recyclerView是無(wú)所不能的...

下面來(lái)看看代碼

 @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) + "個(gè)");
        }
        initPagerAdapter();
        initAdapter();
    }

    private void initPagerAdapter() {
        if (mPagerAdapter == null) {
            mPagerAdapter = new ViewPagerAdapter();
            // 設(shè)置頁(yè)面之間的邊距
            mViewPager.setPageMargin(dp2px(12));
            // 設(shè)置縮放 透明度
            mViewPager.setPageTransformer(false, new CustPagerTransformer());
        }
        //添加數(shù)據(jù)之后在設(shè)置適配器這樣setPageTransformer會(huì)生效,否則兩邊的item沒(méi)有透明的效果
        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) {
                // 滑動(dòng)之后處理邏輯
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

代碼上有注釋扮超,相信基本都能看明白了
有一點(diǎn)需要注意一下就是viewPager設(shè)置適配器 適配器添加數(shù)據(jù)取刃,在添加數(shù)據(jù)的時(shí)候需要在設(shè)置一次適配器, 否則縮放透明效果不存在出刷,或者順序會(huì)混亂
下面是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="這是第幾個(gè)"
        android:textColor="#ffffff"
        android:textSize="17dp" />

</LinearLayout>

這就是viewPager的實(shí)現(xiàn)璧疗, 下面看看RecyclerView

 private void initAdapter() {
        if (mAdapter == null) {
            mAdapter = new RecyclerViewAdapter();
            mRecyclerView.setAdapter(mAdapter);
            layoutManager = new LinearLayoutManager(this);
            // 設(shè)置方向
            layoutManager.setOrientation(RecyclerView.HORIZONTAL);
            mRecyclerView.setLayoutManager(layoutManager);
            // 讓item居中顯示
            LinearSnapHelper snapHelper = new LinearSnapHelper();
            // 綁定到 mRecyclerView
            snapHelper.attachToRecyclerView(mRecyclerView);
        }
        mAdapter.addData(mData);
        // 需要在添加數(shù)據(jù)時(shí) 再調(diào)用一次 不然會(huì)在滑動(dòng)時(shí)才會(huì)顯示效果
        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子項(xiàng),以中間項(xiàng)左側(cè)偏移量為基準(zhǔn)進(jìn)行縮放
                    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添加滾動(dòng)監(jiān)聽(tīng)的時(shí)候 設(shè)置數(shù)據(jù)也要在調(diào)用一次馁龟, 不然會(huì)在滑動(dòng)時(shí)才會(huì)顯示效果
設(shè)置完這些 還有一個(gè) RecyclerView沒(méi)有設(shè)置間距 可以在布局設(shè)置 也可以用方法設(shè)置 我方便就在布局設(shè)置的

<?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="這是第幾個(gè)"
        android:textColor="#ffffff"
        android:textSize="17dp" />

</LinearLayout>

距離左右有一點(diǎn)間距崩侠, 自己掌握
RecyclerView適配器就沒(méi)什么可說(shuō)的了,都一樣的
基本就是這些了

所以可見(jiàn)實(shí)現(xiàn)一種功能并不是只有一種方法坷檩, 其實(shí)我寫(xiě)了三種啦膜, 可能實(shí)現(xiàn)這個(gè)功能還有很多方法, 這里就先上兩個(gè)淌喻, 如果有更好的方法請(qǐng)@我
地址:https://github.com/xiaobinAndroid421726260/Android_CustomAllCollection.git

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末僧家,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子裸删,更是在濱河造成了極大的恐慌八拱,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,284評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件涯塔,死亡現(xiàn)場(chǎng)離奇詭異肌稻,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)匕荸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門爹谭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人榛搔,你說(shuō)我怎么就攤上這事诺凡。” “怎么了践惑?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,614評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵腹泌,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我尔觉,道長(zhǎng)凉袱,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,671評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮专甩,結(jié)果婚禮上钟鸵,老公的妹妹穿的比我還像新娘。我一直安慰自己涤躲,他們只是感情好棺耍,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,699評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著篓叶,像睡著了一般烈掠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上缸托,一...
    開(kāi)封第一講書(shū)人閱讀 51,562評(píng)論 1 305
  • 那天左敌,我揣著相機(jī)與錄音,去河邊找鬼俐镐。 笑死矫限,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的佩抹。 我是一名探鬼主播叼风,決...
    沈念sama閱讀 40,309評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼棍苹!你這毒婦竟也來(lái)了无宿?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,223評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤枢里,失蹤者是張志新(化名)和其女友劉穎孽鸡,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體栏豺,經(jīng)...
    沈念sama閱讀 45,668評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡彬碱,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,859評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了奥洼。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片巷疼。...
    茶點(diǎn)故事閱讀 39,981評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖灵奖,靈堂內(nèi)的尸體忽然破棺而出嚼沿,到底是詐尸還是另有隱情,我是刑警寧澤桑寨,帶...
    沈念sama閱讀 35,705評(píng)論 5 347
  • 正文 年R本政府宣布伏尼,位于F島的核電站,受9級(jí)特大地震影響尉尾,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜燥透,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,310評(píng)論 3 330
  • 文/蒙蒙 一沙咏、第九天 我趴在偏房一處隱蔽的房頂上張望辨图。 院中可真熱鬧,春花似錦肢藐、人聲如沸故河。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,904評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)鱼的。三九已至,卻和暖如春痘煤,著一層夾襖步出監(jiān)牢的瞬間凑阶,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,023評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工衷快, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留宙橱,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,146評(píng)論 3 370
  • 正文 我出身青樓蘸拔,卻偏偏與公主長(zhǎng)得像师郑,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子调窍,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,933評(píng)論 2 355