Tablayout简单属性及使用

来源:互联网 发布:网络架空地板价格 编辑:程序博客网 时间:2024/05/16 08:16
-----------------------------TabLayout导航栏设置--------------------------------------------


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"---
app:tabIndicatorColor="@color/bule_color" ---指示器的颜色
        app:tabSelectedTextColor="@color/red_color" ---选中的字体
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#ffffff"
        />
</LinearLayout>
代码添加
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"));


1.改变选中字体的颜色
app:tabSelectedTextColor="@android:color/holo_orange_light"
2.改变未选中字体的颜色
app:tabTextColor="@color/colorPrimary"
3.改变指示器下标的颜色
app:tabIndicatorColor="@null"---没有指示器
app:tabIndicatorColor="@android:color/holo_orange_light"
4.改变整个TabLayout的颜色
app:tabBackground="color"
好像没有直接变大的方法,可是找到了这个:
app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"//设置文字的外貌
既然字体变大了,指示器太小就显得不太好看了,
设置指示器下标的高度:
app:tabIndicatorHeight="4dp"
有时候Tab只有文字感觉有点单调了:添加图标
tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));
Tab的模式
数据很多的时候我们应该怎么办呢,简书中的第二个Tab就是可以滑动的:
我们先多加几个tab:
tabLayout.addTab(tabLayout.newTab().setText("Tab 4"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 5"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 6"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 7"));
然后设置属性为:
app:tabMode="scrollable"
默认是fixed:固定的,标签很多时候会被挤压,不能滑动。
加入Padding
设置Tab内部的子控件的Padding:
app:tabPadding="xxdp"
app:tabPaddingTop="xxdp"
内容的显示模式
app:tabGravity="center"//居中,如果是fill,则是充满
设置最大的tab宽度:
app:tabMaxWidth="xxdp"
设置最小的tab宽度:
app:tabMinWidth="xxdp"
Tab的“Margin”
TabLayout开始位置的偏移量:
app:tabContentStart="100dp"
TabLayout的监听事件
选中了某个tab的监听事件OnTabSelectedListener():
public voidonTabSelected(TabLayout.Tab tab) {


public voidonTabUnselected(TabLayout.Tab tab) {
//未选中tab的逻辑
public voidonTabReselected(TabLayout.Tab tab) {
//再次选中tab的逻辑
和ViewPager的联动
最后也是最重要的:
tabLayout.setupWithViewPager(Viewpager);
一行代码和ViewPager联动起来,简单粗暴。
主要就是设置下标的高度为0,相当于没有下标。
app:tabIndicatorHeight="0dp"
然后设置背景颜色以及选中文字颜色
app:tabSelectedTextColor="#ff7a61"
app:tabBackground="#f6f4f2"//这里不能直接写RGB,需要@color/xx
最后设置Tab的模式:
app:tabMode="scrollable"
默认选中某项`ablayout.getTabAt(position).select();
文/自导自演的机器人(简书作者)
原文链接:http://www.jianshu.com/p/2b2bb6be83a8


protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_third);
        pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(pagerAdapter);
        tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
--------------------------------------------------------
class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    public final int COUNT = 5;
    private String[] titles = new String[]{"Tab1", "Tab2", "Tab3", "Tab4", "Tab5"};
    private Context context;


    public MyFragmentPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }


    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position + 1);
    }


    @Override
    public int getCount() {
        return COUNT;
    }


    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}




-----------------------============================================================
4.PagerTitleStrip的使用
   1.xml文件中与viewpager绑定
         <android.support.v4.view.ViewPager
        android:id="@+id/vp_pagers"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pts_titlesd"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
android:background="#ff99ff" //设置背景色
            >
        </android.support.v4.view.PagerTitleStrip>
    </android.support.v4.view.ViewPager>
----------------------
//设置tab的样式
<android.support.v4.view.ViewPager
        android:id="@+id/pager_view"
         android:layout_width="match_parent"
    android:layout_height="wrap_content"      
       
        >
        <android.support.v4.view.PagerTabStrip
            android:id="@+id/tiltle"
           android:layout_width="match_parent"
      android:layout_height="wrap_content"  
      android:background="#ff99ff"   
            />
vpPagers = (ViewPager) findViewById(R.id.pager_view);
layoutInflater = getLayoutInflater();
PagerTabStrip ptsTitles = (PagerTabStrip) findViewById(R.id.tiltle);
ptsTitles.setBackgroundColor(Color.BLUE);
//设置字体样式
ptsTitles.setTextColor(Color.RED);
//设置线条样式
ptsTitles.setTabIndicatorColor(Color.YELLOW);
    2.设置标题
       需要在Pageradapter{}中重写getPageTitle返回索引对应的标题
private String s0[] = new String[]{"主页","看客","视频","音乐","社会"};
public CharSequence getPageTitle(int position) {
return s0[position];
}
0 0