Android TabLayout 實戰

標籤：劃線   tabs   關聯   source   ide   dip   static   init   stat   

1.

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

3.（探討一：有的博文說要添加依賴： compile ‘com.android.support:design:25.3.1‘           

　　　　   可是本人未添加此依賴 ，依然可以運行無誤）

　　布局檔案：

<android.support.design.widget.TabLayout

android:id="@+id/tablayout"

android:layout_width="match_parent"

android:layout_height="30dp"

app:tabIndicatorHeight="2dp"  // 設定便簽底線的高度（厚度）      不設定的話，預設大小就可以

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" />

 

控制器部分代碼：

（一）

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);

    //關聯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);    }

 

Android TabLayout 實戰