-----------------------------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];
}
<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];
}