Android ---------- TabLayout 實戰 (一)

1.效果圖

2.原理：TabLayout提供了一個水平的布局用來展示   Tabs

3.添加依賴： compile 'com.android.support:design:27.+ ‘

　　4.布局文件：

 

<android.support.design.widget.TabLayout

android:id="@+id/tablayout"

android:layout_width="match_parent"

android:layout_height="30dp"

app:tabTextAppearance="@style/MyTabLayoutTextAppearanceInverse"   // 設置標簽的字體大小  在style文件里進行設置

app:tabIndicatorHeight="2dp"  // 設置便簽下划線的高度（厚度）      不設置的話，默認大小就可以    設置為0dp就是不顯示下划線

app:tabIndicatorColor="#007aff" // 設置標簽下划線的顏色

app:tabSelectedTextColor="#007aff" // 設置選中標簽的字體的顏色

app:tabTextColor="@android:color/darker_gray" /> //設置未選中標簽的字體的顏色

 

<android.support.v4.view.ViewPager

     android:id="@+id/vpager"

　　　android:layout_width="match_parent"

　　　android:layout_height="200dp" />

 

5.控制器部分代碼：

（一）

class TabAdapter extends FragmentPagerAdapter {

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

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }
    //顯示標簽上的文字
    @Override
    public CharSequence getPageTitle(int position) {
        return tabs.get(position);
    }
}

（二）

public static class TabFrament extends Fragment {
        private Context context;
        private String content;

        public TabFrament() {
        }

        @SuppressLint("ValidFragment")
        public TabFrament(Context contexts, String content) {
            this.context = contexts;
            this.content = content;
        }

        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
             TextView textView = new TextView(context);   //此處用Textview舉個例子，可以布置任意布局，自定義布局，用View view = inflater.inflate(）方法
             textView.setText(content);
             textView.setTextSize(30);
             textView.setGravity(Gravity.CENTER);
             return textView;

        }
    }

（三）

private void initData() {

    for(Map<String,String> map:list) {      // 從服務器獲取的數據，已經處理成list
        tabs.add(map.get("tab"));　　　　　　　// tab標簽　
        fragments.add(new TabFrament(this,map.get("content"))); //viewpage 內容
    }
    tabLayout = (TabLayout) findViewById(R.id.tablayout);

    //設置TabLayout的模式
    tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);   //注：此條屬性必須配合MODE_FIXED使用，不然不起作用
　　 //  GRAVITY_FILL  讓每個標簽平分TabLayout的全部寬度

    //  GRAVITY_CENTER  讓每個標簽顯示自身寬度，然后所有標簽居中顯示
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
　　// MODE_FIXED  表示寬度始終是tablayout控件指定的寬度，如果標簽過多，那么就無限擠壓控件  
　　// MODE_SCROLLABLE 表示每個標簽都保持自身寬度，一旦標簽過多，給標題欄提供支持橫向滑動的功能

    TabAdapter tabadapter=new TabAdapter(getSupportFragmentManager());
    vpager.setAdapter(tabadapter);
 
    vpager.setOffscreenPageLimit(3);  　// 設置viewpager緩存頁面個數，建議：有 n 個tab就緩存 n-1 個頁面

  　//關聯ViewPager和TabLayout  

　　tabLayout.setupWithViewPager(vpager); 

 //設置分割線 標簽之間的縱向分割線 
 LinearLayout linear = (LinearLayout)tabLayout.getChildAt(0); 
 linear.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE); 
 linear.setDividerDrawable(ContextCompat.getDrawable(this,R.drawable.divider)); 
 //設置分割線間隔 
 linear.setDividerPadding(dip2px(15)); } 　　

　　　　　　　　　　（四）

 public int dip2px(int dip) {
        float density = getResources().getDisplayMetrics().density;
        return (int) (dip * density + 0.5);
 }

6.實踐感悟

（1） ViewPager 的含義是單獨的一個頁面，如果要設置此頁面滾動的話，不可在ViewPager的外部而應該在子布局的外圍設置srollview；把每一個ViewPager當成獨立的頁面就好了。