简介
TabLayout就是用一个水平的布局用来展示Tabs
使用
首先在build.gradle的dependencies中加入依赖
compile 'com.android.support:design:25.0.0'
给application重新指定theme
android:theme="@style/MyTheme"
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
<?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>
布局文件中
默认情况下，没有设置任何属性
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
在代码中
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
改变选中字体的颜色和未选中字体的颜色
<?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>
未选中的颜色:黑色
app:tabTextColor="@color/black"
选中的颜色:红色
app:tabSelectedTextColor="@color/red"
显示效果：
b.png
改变指示器下标横线的高度和颜色、改变TabLayout的背景色
改变指示器下标的颜色：黑色
app:tabIndicatorColor="@color/black"
改变指示器下标的高度：2dp
app:tabIndicatorHeight="2dp"
改变TabLayout的背景色：黄色
显示效果：
c.png
改变TabLayout内部字体大小
app:tabTextAppearance="@style/TabLayoutTextStyle"
styles.xml文件中
<style name="TabLayoutTextStyle">
<item name="android:textSize">10sp</item>
</style>
显示效果：
e.png
添加图标
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));
显示效果:
f.png
显示模式
填充模式
app:tabGravity="fill"
居中模式
app:tabGravity="center"
点击事件
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)
{
//再次选中
}
});
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"/>
</LinearLayout>
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<Fragment> fragmentList = new ArrayList<Fragment>();
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
