Android 5.0新控件 Tablayout | 導航欄 介紹及使用詳情

Android 5.0新控件 Tablayout | 導航欄 介紹及使用詳情

extends HorizontalScrollView

TabLayout provides a horizontal layout to display tabs.

Google官方對這個控件的大概意思是一個橫向的佈局標籤

我們在應用viewpager的時候，經常會使用TabPageIndicator來與其配合。達到很漂亮的效果。但是TabPageIndicator是第三方的，而且比較老了，當然了現在很多大神都已經開始自己寫TabPageIndicator來滿足自己的需求。但是google發佈了新的Android Support Design庫，裏面包含了幾個新的控件，TabLayout就是其中一個，它就可以完成TabPageIndicator的效果，廢話不多說，先上圖

使用方法

• TabLayout來自design兼容包，使用需要添加依賴。android studio 添加依賴如下：

dependencies {
    compile ‘com.android.support:design:24.2.0‘
}

首先，我們先來實現一個最簡單的tablayout

Step1

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

Step2

  public class PlayTabLayout extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);
        tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
    }
  }

• 效果圖

這兩步就可以實現一個簡單的Tablayout滑動標籤，so easy!But,通常我們使用滑動標籤逗搭配Viewpager來使用，看看如何實現

Step1

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        （fixed）默認固定的選項卡同時顯示所有選項卡，（scrollable）可滾動選項卡並且可以包含較長的選項卡標籤和更大數量
        app:tabMode="scrollable"  
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

Step2

  public class PlayTabLayout extends AppCompatActivity {
    private List<String> mList = new ArrayList<String>();
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        for (int i = 1; i <= 8; i++) {
            mList.add("tab" + i);
        }
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), mList);
        viewPager.setAdapter(adapter);
        //將view pager與tablayout關聯起來
        tabLayout.setupWithViewPager(viewPager);
    }
  }

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    private List<String> mList;
    public MyFragmentPagerAdapter(FragmentManager fm, List<String> list) {
        super(fm);
        this.mList = list;
    }
    @Override
    public Fragment getItem(int position) {//加載的Fragment
        return new PageFragment();
    }
    @Override
    public int getCount() {//標籤頁數
        return mList.size();
    }
    @Override
    public CharSequence getPageTitle(int position) {//標籤標題
        return mList.get(position);
    }
}

• PageFragment就是一個空白的Fragment

• 效果圖（這是沒有設置tabMode時的樣子，默認顯示的模式是 fixed 固定的選項卡同時顯示所有選項卡）

• 效果圖 （這是設置tabMode爲scrollable的樣子）

到這裏最基礎的搭配使用就ok了，下面貼上一些可以自己定製需求常用的方法

設置遊標的顏色

setSelectedTabIndicatorColor(int color)

設置遊標的高度 0就是沒有

setSelectedTabIndicatorHeight(int height)

設置tablayout標籤的模式 （fixed）默認固定的選項卡同時顯示所有選項卡，（scrollable）可滾動選項卡並且可以包含較長的選項卡標籤和更大數量

setTabMode()

設置tab標籤文字顏色

setTabTextColors（）

遇到的問題

Question1：如果Tablayout和viewpager一起使用，tabLayout.addTab添加的標題就會失效！

• 效果圖

• 查看谷歌的文檔發現，Tablayout會默認執行setTabsFromPagerAdapter，這個方法的效果是從給定的PagerAdapter填充我們的標籤內容，
  任何現有的選項卡將被首先刪除。 每個選項卡將其文本設置爲從getPageTitle（int）返回的值

• 簡單來說Tablayout和viewpager一起使用，標籤的標題需要在pageradapter中的getPageTiele方法返回

@Override
    public CharSequence getPageTitle(int position) {//標籤標題
        return "標題";
    }

完整代碼點我下載

Thank you

• 以上僅本人學習中遇到的問題，如有更多意見歡迎隨時交流 issues
• email:[email protected]