Android中Design库之TabLayout

发表于 | 分类于 | 本文总阅读量 次
时间不会辜负每一个平静努力的人！

欢迎来到周建的博客: 共同致力于技术分享与交流

##简介

TabLayout就是用一个水平的布局用来展示Tabs

##使用

首先在build.gradle的dependencies中加入依赖

1
compile 'com.android.support:design:25.0.0'

给application重新指定theme

android:theme=”@style/MyTheme”

1
2
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.zhoujian.tablayout" >
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/MyTheme" >
<activity android:name=".MainActivity" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

布局文件中

默认情况下，没有设置任何属性

1
2
3
4
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

在代码中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package com.zhoujian.tablayout;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
public static final String[] titles = new String[]{"精选","训练","饮食","商城"};
private TabLayout mTabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView()
{
mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
mTabLayout.addTab(mTabLayout.newTab().setText(titles[0]));
mTabLayout.addTab(mTabLayout.newTab().setText(titles[1]));
mTabLayout.addTab(mTabLayout.newTab().setText(titles[2]));
mTabLayout.addTab(mTabLayout.newTab().setText(titles[3]));
}
}

显示效果

a.png

###改变选中字体的颜色和未选中字体的颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="@color/black"
app:tabSelectedTextColor="@color/red"/>
</LinearLayout>

未选中的颜色:黑色

1
app:tabTextColor="@color/black"

选中的颜色:红色

1
app:tabSelectedTextColor="@color/red"

显示效果：

b.png

###改变指示器下标横线的高度和颜色、改变TabLayout的背景色

改变指示器下标的颜色：黑色

1
app:tabIndicatorColor="@color/black"

改变指示器下标的高度：2dp

1
app:tabIndicatorHeight="2dp"

改变TabLayout的背景色：黄色

显示效果：

c.png

###改变TabLayout内部字体大小

1
2
3
4
5
app:tabTextAppearance="@style/TabLayoutTextStyle"
```  
styles.xml文件中

1
2
3
4
5
6
7
8
9
10
显示效果：
![e.png](http://upload-images.jianshu.io/upload_images/2965516-aa47668a6e455e59.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
###添加图标

mTabLayout.addTab(mTabLayout.newTab().setText(titles[0]).setIcon(R.mipmap.circle1));
mTabLayout.addTab(mTabLayout.newTab().setText(titles[1]).setIcon(R.mipmap.circle2));
mTabLayout.addTab(mTabLayout.newTab().setText(titles[2]).setIcon(R.mipmap.circle3));
mTabLayout.addTab(mTabLayout.newTab().setText(titles[3]).setIcon(R.mipmap.circle4));

1
2
3
4
5
6
7
8
9
显示效果:
![f.png](http://upload-images.jianshu.io/upload_images/2965516-ded8eafad69a4195.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
###显示模式
填充模式

app:tabGravity=”fill”

1
2
居中模式

app:tabGravity=”center”

1
2
###点击事件

mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//选中

}

@Override
public void onTabUnselected(TabLayout.Tab tab) {
//未选中
}

@Override
public void onTabReselected(TabLayout.Tab tab)
{
//再次选中

}
});

1
2
3
4
5
###ViewPager联动
activity_main.xml

<?xml version=”1.0” encoding=”utf-8”?>

LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"


android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabBackground="@color/yellow" app:tabGravity="fill" app:tabIndicatorColor="@color/black" app:tabIndicatorHeight="2dp" app:tabSelectedTextColor="@color/red" app:tabTextAppearance="@style/TabLayoutTextStyle" app:tabTextColor="@color/black"/


android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent"/


1
2
3
MainActivity.java

package com.zhoujian.tablayout;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.Arrays;

public class MainActivity extends AppCompatActivity {

public static final String[] titles = new String[]{“精选”,”训练”,”饮食”,”商城”};
private ArrayList fragmentList = new ArrayList();
private TabLayout mTabLayout;
private ViewPager mViewPager;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}

private void initView() {
mTabLayout = (TabLayout) findViewById(R.id.tabLayout);

mViewPager = (ViewPager) findViewById(R.id.view_pager);
mTabLayout.addTab(mTabLayout.newTab().setText(titles[0]));
mTabLayout.addTab(mTabLayout.newTab().setText(titles[1]));
mTabLayout.addTab(mTabLayout.newTab().setText(titles[2]));
mTabLayout.addTab(mTabLayout.newTab().setText(titles[3]));

mTabLayout.setupWithViewPager(mViewPager);

fragmentList.add(FirstFragment.newInstance());
fragmentList.add(SecondFragment.newInstance());
fragmentList.add(ThirdFragment.newInstance());
fragmentList.add(FourthFragment.newInstance());

FragmentAdapter adapter = new FragmentAdapter(getSupportFragmentManager(),fragmentList, Arrays.asList(titles));
mViewPager.setAdapter(adapter);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener()
{
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
{

}
@Override
public void onPageSelected(int position)
{
}
@Override
public void onPageScrollStateChanged(int state)
{

}
});

}
}

```

显示效果

g.gif

###源码下载：

源码下载：https://github.com/zeke123/TabLayout