这里我们用TabLayout来实现这一效果。TabLayout是Android Design Support Library库中的控件。
Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的Android Design Support Library，在这个support库里面，Google给我们提供了更加规范的MD设计风格的控件。最重要的是，Android Design Support Library的兼容性更广，直接可以向下兼容到Android 2.2。
首先我们先来看看效果：
接下来开始实现
1. 配置build.gradle
在build.gradle加入如下代码
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:22.2.0'
compile 'com.android.support:design:22.2.0'
compile 'com.android.support:recyclerview-v7:22.2.0'
compile 'com.android.support:cardview-v7:22.2.0'
}
com.android.support:design:22.2.0就是我们需要引入的Android Design Support Library，其次我们还引入了Recyclerview和Cardview,还不了解这两个控件的同学可以看下面这两篇文章：
Android5.x RecyclerView 应用解析和Android5.x CardView 应用解析
2.AppBarLayout,Toolbar与TabLayout
先看看主界面的布局 （activity_tab_layout.xml）
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".TabLayoutActivity"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#ADBE107E"
app:tabMode="scrollable"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</LinearLayout>
这里用到了AppBarLayout和Toolbar，AppBarLayout是Android Design Support Library新加的控件继承自LinearLayout，它用来将Toolbar和TabLayout组合起来作为一个整体。Toolbar我们在这里不讲了，如果不熟悉可以看Android5.x Toolbar和Palette应用解析这篇文章
这布局文件最关键的一点就是android.support.design.widget.TabLayout 标签中的app:tabMode="scrollable"，他设置tab的模式为“可滑动的”,现在我们把这句话去掉，来看看效果：
上面的tab由于太多（13个）却不能滑动就重叠了。
接下来在java中引用 （TabLayoutActivity.java）
package com.example.liuwangshu.mytablayout;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import java.util.ArrayList;
import java.util.List;
public class TabLayoutActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
private ViewPager mViewPager;
private TabLayout mTabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
initViewPager();
}
initViewPager方法 （TabLayoutActivity.java）
private void initViewPager() {
mTabLayout = (TabLayout) findViewById(R.id.tabs);
List<String> titles = new ArrayList<>();
titles.add("精选");
titles.add("体育");
titles.add("巴萨");
titles.add("购物");
titles.add("明星");
titles.add("视频");
titles.add("健康");
titles.add("励志");
titles.add("图文");
titles.add("本地");
titles.add("动漫");
titles.add("搞笑");
titles.add("精选");
for(int i=0;i<titles.size();i++){
mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));
}
List<Fragment> fragments = new ArrayList<>();
for(int i=0;i<titles.size();i++){
fragments.add(new ListFragment());
}
FragmentAdapter mFragmentAdapteradapter =
new FragmentAdapter(getSupportFragmentManager(), fragments, titles);
//给ViewPager设置适配器
mViewPager.setAdapter(mFragmentAdapteradapter);
//将TabLayout和ViewPager关联起来。
mTabLayout.setupWithViewPager(mViewPager);
//给TabLayout设置适配器
mTabLayout.setTabsFromPagerAdapter(mFragmentAdapteradapter);
}
在这里我们设定了13个标题内容并创建了相应的TabLayout和Fragment，设置了ViewPager适配器和TabLayout适配器并将将TabLayout和ViewPager关联起来。
ListFragment的代码（ListFragment.java)
package com.example.liuwangshu.mytablayout;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class ListFragment extends Fragment {
private RecyclerView mRecyclerView;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
mRecyclerView =
(RecyclerView) inflater.inflate(R.layout.list_fragment, container, false);
return mRecyclerView;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
mRecyclerView.setLayoutManager(new LinearLayoutManager(mRecyclerView.getContext()));
mRecyclerView.setAdapter(new RecyclerViewAdapter(getActivity()));
}
}
这里用RecyclerView来代替ListView来看看RecyclerViewAdapter（RecyclerViewAdapter.java)
package com.example.liuwangshu.mytablayout;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.annotation.TargetApi;
import android.content.Context;
import android.content.Intent;
import android.os.Build;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
private Context mContext;
public RecyclerViewAdapter(Context mContext) {
this.mContext = mContext;
}
@Override
public RecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view =
LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item_card_main, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(final RecyclerViewAdapter.ViewHolder holder, int position) {
final View view = holder.mView;
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
}
@Override
public int getItemCount() {
return 10;
}
public static class ViewHolder extends RecyclerView.ViewHolder {
public final View mView;
public ViewHolder(View view) {
super(view);
mView = view;
}
}
}
最后FragmentAdapter（FragmentAdapter.java)
package com.example.liuwangshu.mytablayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import java.util.List;
public class FragmentAdapter extends FragmentStatePagerAdapter {
private List<Fragment> mFragments;
private List<String> mTitles;
public FragmentAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
super(fm);
mFragments = fragments;
mTitles = titles;
}
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
@Override
public int getCount() {
return mFragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitles.get(position);
}
}
基本所有的代码都讲到了，当然这种稍微复杂的效果TabLayout能够实现，那么简单的3，4个Tab滑动TabLayout实现起来更是不再话下，修改TabLayoutActivity的initViewPager方法（TabLayoutActivity.java)
private void initViewPager() {
mTabLayout = (TabLayout) findViewById(R.id.tabs);
List<String> titles = new ArrayList<>();
titles.add("精选");
titles.add("体育");
titles.add("巴萨");
titles.add("购物");
for(int i=0;i<titles.size();i++){
mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));
}
List<Fragment> fragments = new ArrayList<>();
for(int i=0;i<titles.size();i++){
fragments.add(new ListFragment());
}
FragmentAdapter mFragmentAdapteradapter =
new FragmentAdapter(getSupportFragmentManager(), fragments, titles);
//给ViewPager设置适配器
mViewPager.setAdapter(mFragmentAdapteradapter);
//将TabLayout和ViewPager关联起来。
mTabLayout.setupWithViewPager(mViewPager);
//给TabLayout设置适配器
mTabLayout.setTabsFromPagerAdapter(mFragmentAdapteradapter);
}
我们只保留了4个Tab,然后去掉activity_tab_layout.xml android.support.design.widget.TabLayout 标签中的app:tabMode="scrollable"
运行代码来看看效果
好了讲到这里，预告：接下来我们会讲到Android Design Support Library提供的其他的控件
