2. 程式人生 > >Android進階——Material Design新控制元件之TabLayout製作可滾動的Tabs頁面（二）

Android進階——Material Design新控制元件之TabLayout製作可滾動的Tabs頁面（二）

阿新 • • 發佈：2019-02-18

引言

上一篇總結講解了下TabLayout的基本特點、屬性和簡單的應用步驟，相信大家已經對於TabLayout已經不再陌生，這篇就結合Fragment+ViewPager的架構開發一個主流App的主要框架，進一步學習下TabLayout的操作和監聽，同時分享一些注意事項和非常見錯誤的處理方案。

一、使用TabLayout的專案配置

要使用android.support.design.widget.TabLayout ，需要在自己的工程專案中引入Android的兩個庫android.support.design.widget.TabLayout在Android擴充套件（extras）支援（support）包design中，但是design又依賴另外一個support v7包中的appcompat庫，因此需要事先匯入。

新增依賴包

Android Studio的新增依賴庫很簡單，我只需要在我們Module的build.gradle指令碼檔案中新增如下的（PS:這是使用Android Studio1.4開發的，如果你還使用著Eclipse那麼第一步你應該換成Android Studio）

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:support-v4:23.1.1'
    compile 'com.android.support:appcompat-v7:23.1.1'
 

    compile 'com.android.support:design:23.1.1'
}

二、結合ViewPager+Fragment打造絢麗的Tabs切換頁面

1、首先，還是定義MainActivity的主佈局和Fragment對應的佈局（略）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height
 
="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/id_tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        app:tabGravity="center"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#ffffff"
        />
</LinearLayout>

2、然後初始化ViewPagerAdapter和ViewPager

private ViewPagerAdapter mAdapter;
private List<Fragment> mFragments=new ArrayList<Fragment>();
//初始化ViewPagerAdapter
MainFragment mainTab = new MainFragment();
DiscoveryFragment discTab = new DiscoveryFragment();
Tab3Fragment tab3Fragment=new Tab3Fragment();
Tab4Fragment tab4Fragment=new Tab4Fragment();
Tab5Fragment tab5Fragment=new Tab5Fragment();
Tab6Fragment tab6Fragment=new Tab6Fragment();

mFragments.add(mainTab);
mFragments.add(discTab);
mFragments.add(tab3Fragment);
mFragments.add(tab4Fragment);
mFragments.add(tab5Fragment);
mFragments.add(tab6Fragment);
//初始化ViewPager
mAdapter=new ViewPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mAdapter);

private class ViewPagerAdapter extends FragmentStatePagerAdapter{

        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }
        @Override
        public Fragment getItem(int position) {
            return mFragments.get(position);
        }
        @Override
        public int getCount() {
            return mFragments.size();
        }
        @Override
        public CharSequence getPageTitle(int position) {
            return mTabTitles[position];
        }
    }

3、接著，初始化TabLayout，包括設定一些屬性和新增Tab

private static String[] mTabTitles={"Tab1","Tab2","Tab3","Tab4","Tab5","Tab6"};

mTabLayout.setTabMode(TabLayout.MODE_FIXED);
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
mTabLayout.setBackgroundColor(Color.parseColor("#2b2b2b"));
mTabLayout.setTabTextColors(Color.parseColor("#236f28"), Color.parseColor("#bc6e1c"));mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[0]));
mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[1]));
mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[2]));
mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[3]));
mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[4]));
mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[5]));

4、再把ViewPager和TabLayout管理起來

mTabLayout.setupWithViewPager(mViewPager);//mViewPager必須非null

5、再把ViewPager的介面卡設定到TabLayout上

mTabLayout.setTabsFromPagerAdapter(mAdapter);

6、設定Tab事件監聽

//設定Tab監聽
        mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.d("TAG","Selected Tab Index為："+tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                Log.d("TAG","Unselected Tab Index為："+tab.getPosition());
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                Log.d("TAG","Reselected Tab Index為："+tab.getPosition());
            }
        });

7、完整MainActivity的實現

package com.crazymo.tablayoutviewpager;

import android.graphics.Color;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;

import java.util.ArrayList;
import java.util.List;


public class MainActivity extends AppCompatActivity {
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private ViewPagerAdapter mAdapter;
    private List<Fragment> mFragments = new ArrayList<Fragment>();
    private static String[] mTabTitles = {"Tab1", "Tab2", "Tab3", "Tab4", "Tab5", "Tab6"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    //初始化
    private void init() {
        getView();
        initTab();
    }

    //找到View
    private void getView() {
        mTabLayout = (TabLayout) findViewById(R.id.id_tabLayout);
        mViewPager = (ViewPager) findViewById(R.id.id_viewPager);
    }

    //初始化Tab
    private void initTab() {
        MainFragment mainTab = new MainFragment();
        DiscoveryFragment discTab = new DiscoveryFragment();
        Tab3Fragment tab3Fragment = new Tab3Fragment();
        Tab4Fragment tab4Fragment = new Tab4Fragment();
        Tab5Fragment tab5Fragment = new Tab5Fragment();
        Tab6Fragment tab6Fragment = new Tab6Fragment();

        mFragments.add(mainTab);
        mFragments.add(discTab);
        mFragments.add(tab3Fragment);
        mFragments.add(tab4Fragment);
        mFragments.add(tab5Fragment);
        mFragments.add(tab6Fragment);
        //設定TabLayout的一系列屬性
        mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        mTabLayout.setBackgroundColor(Color.parseColor("#2b2b2b"));
        mTabLayout.setTabTextColors(Color.parseColor("#236f28"), Color.parseColor("#bc6e1c"));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[0]));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[1]));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[2]));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[3]));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[4]));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTabTitles[5]));

        mAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mAdapter);
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.setTabsFromPagerAdapter(mAdapter);

        //設定Tab監聽
        mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.e("TAG", "Selected Tab Index為：" + tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                Log.e("TAG", "Unselected Tab Index為：" + tab.getPosition());
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                Log.e("TAG", "Reselected Tab Index為：" + tab.getPosition());
            }
        });


    }

    private class ViewPagerAdapter extends FragmentStatePagerAdapter {

        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            Log.e("TAG", "獲取的Fragement的索引值為：" + position);
            return mFragments.get(position);
        }

        @Override
        public int getCount() {
            return mFragments.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            Log.e("TAG", "返回Tab的標題");
            return mTabTitles[position];
        }
    }
}

執行結果

初始化進入到主介面時

這裡寫圖片描述
說明ViewPagerAdapter被執行了兩次
這裡寫圖片描述

滑動TAB1到TAB2時

僅僅觸發的是Tab事件，TAB2到TAB3也是如此。
這裡寫圖片描述

往回滑動TAB3到TAB2時

僅僅觸發的是Tab事件，TAB3返回TAB2也是如此。
這裡寫圖片描述

按主頁鍵之後再返回也並未觸發任何Tab或者ViewPagerAdapter事件，並且還是返回到原來選中的頁面。

這裡寫圖片描述

三、TabLayout的不常見錯誤及處理方案

1、提示res下某些屬性找不到

在匯入庫過程中，如果某些res目錄下的value值過高比如value-23（Android SDK 23）但不巧發生錯誤如提示說找不到某某值，可以整個刪除掉，或者開啟SDK下載最新的相關庫

2、java.lang.NoClassDefFoundError:android.support.v7.internal.widget.TintManager

發生這個或者類似的，包裡的某個類找不到，一般都是因為衝突了，解決辦法之一就是，統一使用支援包的版本比如：

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:support-v4:23.1.1'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.1'
}

如果還不行就把該工程引入的library moudule的 suppor v4 v7t的版本也改成一致的

3、空指標異常

參照上一篇初始TabLayout的那兩個方法的非空宣告去排查。

public void setupWithViewPager(@NonNull ViewPager viewPager)    //設定與ViewPager關聯起來，注：不允許傳遞空的ViewPager，否則會異常

public void setTabsFromPagerAdapter(@NonNull PagerAdapter adapter)//設定TabLayout的介面卡，注：不允許傳遞空的PagerAdapter，否則會異常

小結

Android Material Design 滑動指示選項卡TabLayout，就是當用戶在該TabLayout的選項卡子item中選擇觸控時候，文字和下方的指示器橫條滑動指示。最後附上完整demo免費下載。

相關推薦

Android進階——Material Design新控制元件之TabLayout製作可滾動的Tabs頁面（二）

引言 上一篇總結講解了下TabLayout的基本特點、屬性和簡單的應用步驟，相信大家已經對於TabLayout已經不再陌生，這篇就結合Fragment+ViewPager的架構開發一個主流App的主要框架，進一步學習下TabLayout的操作和監聽，同時分享一

【Android 進階】仿抖音系列之翻頁上下滑切換視訊（四）

大家好，我們又見面了。這是這個系列的第四篇，在這篇文章之前，建議可以先看下之前系列的文章，為了節省篇幅，之前詳細說過的地方，這裡就不再詳細描述了，下面是目錄： 【Android 進階】仿抖音系列之翻頁上下滑切換視訊（一） 【Android 進階】仿抖音系列之列表播放視訊

【Android 進階】仿抖音系列之翻頁上下滑切換視訊（一）

最近公司在做個短視訊的專案，其中借鑑了很多抖音的設計，其中就有抖音的上下滑切換視訊。 【Android 進階】仿抖音系列之翻頁上下滑切換視訊（一） 【Android 進階】仿抖音系列之列表播放視訊（二） 【Android 進階】仿抖音系列之列表播放視訊（三）

Android Material Design 新控制元件-劉志遠-專題視訊課程

Android Material Design 新控制元件—18593人已學習 課程介紹        本課程介紹Android 5.0 之後材料設計語言中出現的一些新控制元件類庫 其中包括RecyclerView CardView TabLayout DrawerLayou

Android Design新控制元件之TextInputLayout（文字輸入佈局）

谷歌在推出Android5.0的同時推出了全新的設計Material Design，谷歌為了給我們提供更加規範的MD設計風格的控制元件，在2015年IO大會上推出了8 個新的元件，同時向後相容，新推出的這幾個官方元件多是在 GitHub 上很火熱的一些專案：

Android [Camera 原始碼] 元資料和控制元件(Metadata and Controls) Google官方文件（四）

Google原始碼網地址連結：https://source.android.com/devices/camera 該Google Camera的文件為系列文章，文章列表： overview Camera3 HAL Subsystem Metadata and Con

GTK進階學習：改變控制元件字型大小

改變控制元件字型大小： #include <gtk/gtk.h> /* 功能: 設定控制元件字型大小 * widget: 需要改變字型的控制元件 * size:

Android M新控制元件之FloatingActionButton，TextInputLayout，Snackbar，TabLayout的使用

在前不久的谷歌2015 I/O大會上，釋出了Android新版本M，貌似從這個版本開始Android不在以數字命名版本了。 在這次的I/O大會上谷歌對Android並沒有很大的改變，主要是修改完善之前Android L版本。不過在谷歌推出 Mate

【duilib進階】自定義控制元件響應指定命令

duilib在UIManager.h裡的EVENTTYPE_UI列舉裡定義了很多控制元件命令，如字元輸入、雙擊、滑鼠離開等等，然而這些事件不是在所有控制元件上都會得到處理，所以當我們有需要響應這些事件而對應的原生控制元件又沒有處理時，那就要自己派生一個控制元件去處理這個的事

【Android 進階】仿抖音系列之列表播放視訊（三）

在上一篇【Android 進階】仿抖音系列之列表播放視訊（二）中，我們實現列表播放視訊，這一篇我們來對其做些優化。 【Android 進階】仿抖音系列之翻頁上下滑切換視訊（一） 【Android 進階】仿抖音系列之列表播放視訊（二） 【Android 進階】仿抖音

【Android 進階】仿抖音系列之列表播放視訊（二）

上一篇中，我們實現了仿抖音上下翻頁切換視訊的效果，詳見【Android 進階】仿抖音系列之翻頁上下滑切換視訊（一），這一篇，我們來實現抖音列表播放視訊。 【Android 進階】仿抖音系列之翻頁上下滑切換視訊（一） 【Android 進階】仿抖音系列之列表播放視訊（二）

【Android 進階】仿抖音系列之視訊預覽和錄製（五）

大家好，又見面了。在前幾篇中，我們通過2種方式實現了仿抖音的翻頁切換視訊，仿抖音列表播放視訊功能，這一篇，我們來說說視訊的錄製。 【Android 進階】仿抖音系列之翻頁上下滑切換視訊（一） 【Android 進階】仿抖音系列之列表播放視訊（二） 【Android

Android 5.x新增控制元件之--TabLayout實現左右滑動導航選單

1.效果圖(用來和Viewpager結合使用來作為Viewpager的選項卡。) 2.使用方式 builde.gride檔案中新增下面的依賴，compile'com.android.support:design:22.2.0'//可修改版本號為對應的buildToolsV

Android5.x 新控制元件之RecyclerView，CardView，Palette的使用

自Android5.0釋出以來，谷歌推出全新的Material Desigen設計風格，時過一年多了，在國內也看到很多應用在慢 慢適應MD設計風格。其中比較好的app就是網易新聞客戶端了，其設計風格基本符合MD要求。鑑於越來多App採 用MD設計風格，作

懸浮控制元件之Tablayout

1、佈局檔案 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:ap

Qt控制元件隨視窗大小變化的設定方法（QTDesigner）

1 新建窗體（Dialog、MainWindow或Widget都行）； 2 拖一個控制元件到窗體上（任何控制元件都可以：layout、button、或check box）； 3 在窗體空白處右鍵→佈局→柵格佈局（G），即可； 4 如果第二步新增的layout控制元件，有時，

自定義控制元件之繪圖篇：Canvas與圖層(二)

public class CLIP_TO_LAYER_SAVE_FLAG_VIEW extends View {       private Paint mPaint;       public CLIP_TO_LAYER_SAVE_FLAG_VIEW(Context context, Att

C# 16進制與字符串、字節數組之間的轉換（二）

bool sub ber con tostring mat cep 字節數組 log 1 /// <summary> 2 /// 字符串轉16進制字節數組 3 /// </summary> 4 /// <param

zigbee 之ZStack-2.5.1a原始碼分析（二） 無線接收控制LED

本文描述ZStack-2.5.1a 模板及無線接收移植相關內容。 main HAL_BOARD_INIT // HAL_TURN_OFF_LED1 InitBoard HalDriverInit HalAdcInit

webRTC中音訊相關的netEQ（五）：DSP處理 webRTC中音訊相關的netEQ（四）：控制命令決策 webRTC中音訊相關的netEQ（二）：資料結構）

上篇（webRTC中音訊相關的netEQ（四）：控制命令決策）講了MCU模組是怎麼根據網路延時、抖動緩衝延時和反饋報告等來決定給DSP模組發什麼控制命令的。DSP模組根據收到的命令進行相關處理，處理簡要流程圖如下。   從上圖看出如果有語音包從packet buffer裡取出來先要做解碼得到PC