TabLayout+ViewPager垂直方向聯(lián)動(dòng)

原文鏈接：http://www.itdecent.cn/p/9266e58cc4f5

TabLayout+ViewPager垂直方向聯(lián)動(dòng)

注意：這里說的聯(lián)動(dòng)，是指點(diǎn)擊左側(cè)的TabLayout指示器右側(cè)ViewPager滾動(dòng)定位到對(duì)應(yīng)模塊，而滾動(dòng)ViewPager區(qū)域片段，TabLayout要定位到對(duì)應(yīng)指示Tab。
大部分應(yīng)用都只實(shí)現(xiàn)了點(diǎn)擊左側(cè)TabLayout來定位右側(cè)區(qū)域片段，而沒有實(shí)現(xiàn)右側(cè)ViewPager區(qū)域滾動(dòng)來聯(lián)動(dòng)左側(cè)TabLayout指示器。

1.垂直點(diǎn)擊TabLayout：TabLayout一般都是橫向的指示器，所以我們使用VerticalTabLayout來做垂直的TabLayout
implementation 'q.rorbin:VerticalTabLayout:1.2.5'
2.垂直滾動(dòng)ViewPager：ViewPager一般都是橫向滑動(dòng)，自定義一個(gè)VerticalViewPager來交換其X軸和Y軸的運(yùn)動(dòng)事件，來做垂直滾動(dòng)的ViewPager
/**
 * 垂直滑動(dòng)的ViewPager
 */
public class VerticalViewPager extends ViewPager {
    public VerticalViewPager(Context context) {
        this(context, null);
    }
    public VerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        //設(shè)置viewpage的切換動(dòng)畫,這里設(shè)置才能真正實(shí)現(xiàn)垂直滑動(dòng)的viewpager
        setPageTransformer(true, new DefaultTransformer());
    }
    /**
     * 攔截touch事件
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        boolean intercept = super.onInterceptTouchEvent(swapEvent(ev));
        swapEvent(ev);
        return intercept;
    }
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return super.onTouchEvent(swapEvent(ev));
    }
    private MotionEvent swapEvent(MotionEvent event) {
        //獲取寬高
        float width = getWidth();
        float height = getHeight();
        //將Y軸的移動(dòng)距離轉(zhuǎn)變成X軸的移動(dòng)距離
        float swappedX = (event.getY() / height) * width;
        //將X軸的移動(dòng)距離轉(zhuǎn)變成Y軸的移動(dòng)距離
        float swappedY = (event.getX() / width) * height;
        //重設(shè)event的位置
        event.setLocation(swappedX, swappedY);
        return event;
    }
}
3.布局:在需要使用的布局文件中橫向1:3劃分區(qū)域：
<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:orientation="horizontal">
        <q.rorbin.verticaltablayout.VerticalTabLayout
           android:padding="4dp"
            android:id="@+id/tab_layout"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            app:indicator_color="@color/colorAccent"
            app:indicator_corners="50dp"
            app:indicator_gravity="fill"
            app:tab_margin="8dp"
            app:tab_height="32dp"
            app:tab_mode="scrollable" />
        <View style="@style/VerticalLine"/>
<!-- 這里改為自己自定義的VerticalViewPager對(duì)應(yīng)包路徑，大家都知道吧-->
        <com.smallcake.custom.VerticalViewPager
            android:background="@color/white"
            android:id="@+id/view_pager"
            android:layout_width="0dp"
            android:layout_weight="3"
            android:layout_height="match_parent" />
    </LinearLayout>
4.使用：首先初始化ViewPager片段數(shù)據(jù)，然后讓TabLayout和ViewPager關(guān)聯(lián)，最后才設(shè)置TabLayout的Tab數(shù)據(jù)項(xiàng)
    /**
     * a.關(guān)聯(lián)TabLayout和ViewPager
     * b.創(chuàng)建TabLayout的數(shù)據(jù)適配器
     * c.設(shè)置TabLayout的數(shù)據(jù)適配器
     */
    private void bindTabAndPager(List<Classfiy> classfiys){
        tabLayout.setupWithViewPager(initViewPager(classfiys));
        ClassfiyMenuTabAdapter classfiyMenuTabAdapter = 
        new ClassfiyMenuTabAdapter(classfiys);
        tabLayout.setTabAdapter(classfiyMenuTabAdapter);
    }

其中initViewPager(classfiys)為設(shè)置ViewPager片段數(shù)據(jù)：

    /**
     * 初始化ViewPager片段數(shù)據(jù)
     * Classfiy為分類數(shù)據(jù)對(duì)象，每個(gè)人不一樣，自己定義
     */
private ViewPager initViewPager(List<Classfiy> classfiys) {
viewPager.setAdapter(new FragmentStatePagerAdapter(getChildFragmentManager()) {
       @Override
       public Fragment getItem(int i) {
            return ClassfiyFragment.newInstance(classfiys.get(i));
       }
       @Override
       public int getCount() {
           return classfiys.size();
       }
       @Override
       public CharSequence getPageTitle(int position) {
           return classfiys.get(position).getMainName();
        }
   });
return viewPager;
}

ClassfiyMenuTabAdapter適配器為：

/**
 * VerticalTabLayout適配器
 */
public class ClassfiyMenuTabAdapter extends SimpleTabAdapter {
    List<Classfiy> menus;
    public ClassfiyMenuTabAdapter(List<Classfiy> menus) {
        this.menus = menus;
    }
    @Override
    public int getCount() {
        return menus.size();
    }
    @Override
    public TabView.TabBadge getBadge(int position) {
        return null;
    }
    @Override
    public TabView.TabIcon getIcon(int position) {
        return  null;
    }
    @Override
    public TabView.TabTitle getTitle(int position) {
        Classfiy classfiy = menus.get(position);
        //自定義Tab選擇器的字體大小顏色
        return new QTabView.TabTitle.Builder()
                .setTextColor(0xFFffffff,0xFF2A2323)
                .setTextSize(14)
                .setContent(classfiy.getMainName())
                .build();
    }
    @Override
    public int getBackground(int position) {
        return -1;
    }
}
5.優(yōu)化

使用了一段時(shí)間后，用戶反饋上下滑動(dòng)的時(shí)候會(huì)有阻礙，不流暢。我自己也測(cè)試了一下，發(fā)現(xiàn)確實(shí)因?yàn)閂iewPager+Fragment會(huì)有阻尼效果，因?yàn)樗且粋€(gè)一個(gè)的Fragment來移動(dòng)的，就像下面這樣：

阻尼效果

網(wǎng)上我查了一下，有個(gè)方法給ViewPager設(shè)置android:overScrollMode="never"，可以達(dá)到無邊界，是不是因?yàn)檫@個(gè)原因?qū)е禄瑒?dòng)不流程呢？配置后果然無效，我就知道沒那么容易，效果依舊：

然后我仔細(xì)測(cè)試，發(fā)現(xiàn)了如果手指垂直滑動(dòng)【沒有左右的滑動(dòng)】就很容易滑動(dòng)。我想難道是因?yàn)樗l(fā)現(xiàn)你是左右滑動(dòng)就認(rèn)為不是在垂直翻頁(yè)，而是在本頁(yè)面進(jìn)行左右滑動(dòng)操作而導(dǎo)致的垂直滑動(dòng)不流暢。

  • 那么如何來解決呢，我想到了禁用右側(cè)ViewPager的左右滑動(dòng)事件，但是我們VerticalViewPager是通過轉(zhuǎn)換x,y軸的滑動(dòng)距離的實(shí)現(xiàn)垂直滑動(dòng)的。當(dāng)我禁用x軸的滑動(dòng)事件時(shí)，整個(gè)ViewPager完全卡死劃不動(dòng)了?！緋ass】
  • 既然這樣，就不能禁用滑動(dòng)事件，最后我想到了那么【將X軸的移動(dòng)距離轉(zhuǎn)變成Y軸的移動(dòng)距離】置為0不就可以了。
/**
 * 垂直滑動(dòng)的ViewPager
 */
public class VerticalViewPager extends ViewPager {
    public VerticalViewPager(Context context) {
        this(context, null);
    }
    public VerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        //設(shè)置viewpage的切換動(dòng)畫,這里設(shè)置才能真正實(shí)現(xiàn)垂直滑動(dòng)的viewpager
        setPageTransformer(true, new DefaultTransformer());
    }
    /**
     * 攔截touch事件
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return super.onInterceptTouchEvent(swapEvent(ev));
    }
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return super.onTouchEvent(swapEvent(ev));
    }
    private MotionEvent swapEvent(MotionEvent event) {
        //獲取寬高
        float width = getWidth();
        float height = getHeight();
        //將Y軸的移動(dòng)距離轉(zhuǎn)變成X軸的移動(dòng)距離
        float swappedX = (event.getY() / height) * width;
        //將X軸的移動(dòng)距離轉(zhuǎn)變成Y軸的移動(dòng)距離
        //float swappedY = (event.getX() / width) * height;
        //重設(shè)event的位置
        event.setLocation(swappedX, 0);
        return event;
    }
}

這里我們?nèi)∠{(diào)了swappedY這個(gè)參數(shù)，設(shè)置event.setLocation(swappedX, 0);直接寫死為0，然后效果很光滑：

嘩嘩嘩

警告：

  • 這樣改了以后發(fā)現(xiàn)新問題，右側(cè)的商品居然無法點(diǎn)擊了。然后我改回來試了試，可以點(diǎn)擊。說明這里不能直接寫死0，對(duì)于這種緊急上線后出現(xiàn)的bug，建議使用Tinker馬上就可以回滾修復(fù)回來。
    再次發(fā)現(xiàn)，居然很容易出現(xiàn)明明點(diǎn)擊了一個(gè)商品，搜索的卻是另外一個(gè)商品，估計(jì)是因?yàn)楦淖兞薞iewPager的x軸和y軸定位導(dǎo)致的，所以此篇占時(shí)封禁，還沒找到好的辦法。

  • 然后我想是不是需要從新寫一個(gè)垂直的 VerticalViewPager,使用此垂直ViewPager，只發(fā)現(xiàn)好像好了一丟丟，但是效果還是不夠流暢，而且這個(gè)自定義的代碼量就是很大的。

  • 當(dāng)然還有 JakeWharton大神的https://github.com/JakeWharton/Android-DirectionalViewPager
    效果還是不敬人意，而且這個(gè)項(xiàng)目太老且沒有維護(hù)了。

  • 看到有篇博客說官方推出了可以垂直滾動(dòng)的ViewPager2,于是我開始嘗試去使用ViewPager2,但是ViewPager2是androidx包下面的新控件。于是我不得不開始把整個(gè)項(xiàng)目支持androidx,因?yàn)槟阒灰肓艘粋€(gè)androidx包的控件，其他不是androidx的就會(huì)爆紅。

  • 升級(jí)很簡(jiǎn)單：可以看AndroidX升級(jí)日記,但是升級(jí)后發(fā)現(xiàn)項(xiàng)目運(yùn)行直接不起了，幸好我備了份，不慌?？纯磮?bào)錯(cuò)，說是什么缺少方法。原來是我使用了第三方庫(kù)Fragmentation中缺少FragmentManagerImpl的相關(guān)android以前的方法，把Fragmentation升級(jí)為支持androidx的版本就好。

  • 再次運(yùn)行，可以啟動(dòng)應(yīng)用了，但是進(jìn)入首頁(yè)就報(bào)錯(cuò)。不慌，我有備份?？纯村e(cuò)誤，說我缺少android.support.design.widget.AppBarLayout$ScrollingViewBehavior,我不是用的自動(dòng)升級(jí)androidx么，怎么這個(gè)文件沒給我改到。好吧，我手動(dòng)改一改，把android.support.design.widget.AppBarLayout$ScrollingViewBehavior改為androidx.support.design.widget.AppBarLayout$ScrollingViewBehavior,問題依舊?？磥硎俏蚁氲奶?jiǎn)單了，于是網(wǎng)上找到這篇文章：關(guān)于androidx中app:layout_behavior="@string/appbar_scrolling_view_behavior"無法找到的問題。,原來是要替換為com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior,Google你為什么不按套路出牌。╥﹏╥...

  • 替換后，應(yīng)用啟動(dòng)正常，首頁(yè)開啟正常。我總算可以使用ViewPager2這個(gè)垂直ViewPager2了。

首先改xml文件把VerticalViewPager改為ViewPager2

<androidx.viewpager2.widget.ViewPager2
            android:orientation="vertical"
            android:id="@+id/view_pager"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:background="@color/white"
            android:overScrollMode="never"/>

然后代碼中tabLayout.setupWithViewPager(initViewPager(classfiys));報(bào)錯(cuò)了，因?yàn)槲覀兪褂玫牡谌?strong>VerticalTabLayout只支持對(duì)ViewPager的聯(lián)動(dòng)。
好吧，我們手動(dòng)寫代碼讓其關(guān)聯(lián)起來：

    public void setupWithViewPager(@Nullable ViewPager2 viewPager, @Nullable VerticalTabLayout tabLayout) {
        tabLayout.addOnTabSelectedListener(new VerticalTabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabView tab, int position) {
                if (viewPager != null && viewPager.getAdapter().getItemCount() >= position) {
                    viewPager.setCurrentItem(position);
                }
            }
            @Override
            public void onTabReselected(TabView tab, int position) {
            }
        });
        viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                tabLayout.setTabSelected(position,true);
            }
            @Override
            public void onPageScrollStateChanged(int state) {
                super.onPageScrollStateChanged(state);
            }
        });
    }

然后測(cè)試一下效果，果然還是官方寫的好的，如絲滑般流暢，且點(diǎn)擊里面的選項(xiàng)，沒有出現(xiàn)點(diǎn)擊這個(gè)商品出現(xiàn)那個(gè)商品的位移錯(cuò)誤。不枉我輾轉(zhuǎn)反測(cè)的兩天改動(dòng)。效果如下：

嘩嘩嘩且點(diǎn)擊正常

當(dāng)你感到絕望的時(shí)候，不妨放下心扉，從頭再來。

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

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容