簡介
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]));
}
}複製程式碼顯示效果
改變選中字型的顏色和未選中字型的顏色
<?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"複製程式碼顯示效果：
改變指示器下標橫線的高度和顏色、改變TabLayout的背景色
改變指示器下標的顏色：黑色
app:tabIndicatorColor="@color/black"複製程式碼改變指示器下標的高度：2dp
app:tabIndicatorHeight="2dp"複製程式碼改變TabLayout的背景色：黃色
顯示效果：
改變TabLayout內部字型大小
app:tabTextAppearance="@style/TabLayoutTextStyle"複製程式碼styles.xml檔案中
<style name="TabLayoutTextStyle">
<item name="android:textSize">10sp</item>
</style>複製程式碼顯示效果：
新增圖示
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));複製程式碼顯示效果:
顯示模式
填充模式
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)
{
}
});
}
}複製程式碼顯示效果