TabLayout替換ViewPagerIndicator

TabLayout替換ViewPagerIndicator

參照文章: http://chenfuduo.me/2015/07/30/TabLayout-of-design-support-library/android

1.build.gradle關聯庫,須要在聯網的狀況下作ide

compile 'com.android.support:design:22.2.1'佈局

2.在佈局文件中使用TabLayout,即把TabPagerIndicator替換成TabLayoutgradle

<android.support.design.widget.TabLayout
        android:id="@+id/tabpage_indicator"
        android:layout_width="wrap_content"
        style="@style/MyCustomTabLayout"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

3.設置樣式(不能沒有樣式)ui

style="@style/MyCustomTabLayout"spa

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">

        <item name="tabMaxWidth">@dimen/tab_max_width</item>
        <item name="tabMinWidth">72dp</item>
        <item name="tabIndicatorColor">#0000FF</item>
        <item name="tabIndicatorHeight">3dp</item>


        <item name="tabPaddingStart">8dp</item>
        <item name="tabPaddingEnd">8dp</item>
        <item name="tabBackground">@android:color/white</item>
        <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
        <item name="tabSelectedTextColor">@android:color/holo_red_light</item>
    </style>


    <style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">@android:color/black</item>
        <item name="textAllCaps">false</item>
    </style>

4.關聯ViewPager3d

//TabLayout關聯ViewPager
    tabLayout.setupWithViewPager(vp_news_menu_detail);
    //必定要設置設置滾動模式
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

5.在適配器中重寫getPageTitle方法code

@Override
    public CharSequence getPageTitle(int position) {
        return  children.get(position).getTitle();
  }

6.自定義Tab的效果xml

6.1 設置Tab的效果步驟一,在適配器中重寫getTabView()方法utf-8

public View getTabView(int position){
        View view = LayoutInflater.from(mActivity).inflate(R.layout.tab_item, null);
        TextView tv= (TextView) view.findViewById(R.id.textView);
        tv.setText(children.get(position).getTitle());
        ImageView img = (ImageView) view.findViewById(R.id.imageView);
        img.setImageResource(R.drawable.dot_focus);
        return view;
    }

要寫佈局以下:

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="vertical">


        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true" />

    </LinearLayout>

6.2調用 getTabView 方法

//自定義Table佈局要結合適配器中的getTabView方法

for (int i = 0; i < tabLayout.getTabCount(); i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        tab.setCustomView(mAdapter.getTabView(i));
    }

若是不調用就沒有效果

相關文章
相關標籤/搜索