<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
1 TabLayout tabs = (TabLayout) this.findViewById(R.id.tabs);
tabs.addTab(tabs.newTab().setText("Tab1"));
tabs.addTab(tabs.newTab().setText("Tab2"));
tabs.addTab(tabs.newTab().setText("Tab3"));
tabs.addTab(tabs.newTab().setText("Tab4"));
tabs.addTab(tabs.newTab().setText("Tab5"));
注：如果Tab标签特别多的话，控件是支持自动滑动的，只需要在控件加入 app:tabMode=”scrollable” 这个属性即可。
以上简单两步，就可以实现如图效果了。但是这个远远不能满足我们的需要，所以接着往下看。
给以上控件添加不同的颜色。如下图效果：
<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">
<!--
app:tabTextColor 未选中字体颜色
app:tabSelectedTextColor 选中的字体颜色
app:tabIndicatorColor 下标指示器的颜色
app:tabIndicatorHeight 下标指示器的高度
-->
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_green_dark"
app:tabTextColor="@android:color/black"
app:tabSelectedTextColor="@android:color/holo_red_light"
app:tabIndicatorColor="@android:color/holo_orange_light"
app:tabIndicatorHeight="5dp"
/>
</LinearLayout>
更多的使用是与ViewPager相结合来使用。
效果：Title可以左右滑动切换；同时也可以利用ViewPager左右滑动切换。
代码步骤如下：
1、MainActivity的布局文件，activity_main.xml。
<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">
<!--
app:tabTextColor 未选中字体颜色
app:tabSelectedTextColor 选中的字体颜色
app:tabIndicatorColor 下标指示器的颜色
app:tabIndicatorHeight 下标指示器的高度
app:tabMode="scrollable" 横向滚动
-->
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_green_dark"
app:tabTextColor="@android:color/black"
app:tabSelectedTextColor="@android:color/holo_red_light"
app:tabIndicatorColor="@android:color/holo_orange_light"
app:tabIndicatorHeight="5dp"
app:tabMode="scrollable"
/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
2、MainActivity.java
package com.example.com.designdemo; 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.List; public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabLayout tabs = (TabLayout) this.findViewById(R.id.tabs); List<String> titles = new ArrayList<String>();
List<Fragment> fragments = new ArrayList<Fragment>();
for (int i=0; i<10; i++) {
String title = "Tab"+ (i+1);
tabs.addTab(tabs.newTab().setText(title));
titles.add(title); Fragment fragment = new TestOneFragment(title);
fragments.add(fragment);
} ViewPager viewpager = (ViewPager) this.findViewById(R.id.viewpager);
TestOneAdapter mAdapter = new TestOneAdapter(getSupportFragmentManager(), titles, fragments);
viewpager.setAdapter(mAdapter);
tabs.setupWithViewPager(viewpager);
tabs.setTabsFromPagerAdapter(mAdapter);
} }
3、新建一个TestOneFragment.java，添加ViewPager使用。
package com.example.com.designdemo; import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView; public class TestOneFragment extends Fragment {
public String mTitle = null; public TestOneFragment(String title) {
this.mTitle = title;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.test_one_fragment, container, false); TextView txt = (TextView) view.findViewById(R.id.txt);
txt.setText(mTitle);
return view;
}
}
4、Fragment适配器TestOneAdapter.java
package com.example.com.designdemo; import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import java.util.List; public class TestOneAdapter extends FragmentStatePagerAdapter { List<String> titles;
List<Fragment> fragments; public TestOneAdapter(FragmentManager fm, List<String> titles, List<Fragment> fragments) {
super(fm);
this.titles = titles;
this.fragments = fragments;
} @Override
public Fragment getItem(int position) {
return fragments.get(position);
} @Override
public int getCount() {
return fragments.size();
} @Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
}
完整DEMO下载地址：http://download.csdn.net/detail/androidsj/9301597
