TabLayout使用

来源：互联网发布：php解析markdown 编辑：程序博客网时间：2024/06/05 19:38

1.关联库

compile ‘com.android.support:design:23.3.0’

2.布局写上TabLayout

 <android.support.design.widget.TabLayout      android:id="@+id/tabLayout"      android:layout_width="0dp"      android:layout_height="wrap_content"      android:layout_gravity="center_vertical"      android:layout_weight="1" />

3.实例化

  @ViewInject(R.id.tablayout)    private TabLayout tabLayout;

4.TabLayout和关联

tabLayout.setupWithViewPager(viewPager); //注意以后监听页面的变化 ， viewPager.addOnPageChangeListener(new MyOnPageChangeListener()); tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

5.适配器中重写getPageTitle方法

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

TabLayout设置指针颜色和高度文字颜色

1.添加样式

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

values目录下styles.xml里面
MyCustomTabLayout样式

  <stylename="MyCustomTabLayout"parent="Widget.Design.TabLayout">        <item name="tabMaxWidth">72dp</item>//设置标签的宽        <item name="tabMinWidth">72dp</item>//设置标签的高        <item name="tabIndicatorColor">#ff0000</item>//设置指针的颜色        <item name="tabIndicatorHeight">2dp</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">16sp</item>//设置文字大小        <item name="android:textColor">@android:color/black</item>//设置文字默认颜色        <item name="textAllCaps">false</item>//设置大小写    </style>

TabLayout自定义样式

1.设置的样式

   vp_news_menu_detailpager.setAdapter(adapter);        //6.关联ViewPager,TabPageIndicator才可以显示        tabLayout.setupWithViewPager(vp_news_menu_detailpager);        //设置滚动模式        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);        //设置页面的监听需要用TabPageIndicator        for (int i = 0; i < tabpageindicator.getTabCount(); i++) {            TabLayout.Tab tab = tabLayout.getTabAt(i);            tab.setCustomView(getTabView(i));        }

    注意了setupWithViewPager必须在ViewPager.setAdapter()之后调用

//自定义Tab

2.在适配器中添加getTabView()方法

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

 布局文件tab_item.xml文件

  <?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:text="text"          android:id="@+id/textView"          android:textColor="#000000"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_marginLeft="3dp" />      <ImageView          android:src="@drawable/dot_focus"          android:id="@+id/imageView"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_centerVertical="true" />  </LinearLayout>

0 0