Activity组件安全（下）

此前我们用HorizontalScrollView也实现了类似网易选项卡动态滑动效果，详见 Android选项卡动态滑动效果这篇文章

这里我们用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=;i<titles.size();i++){

        mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));

    }

    List<Fragment> fragments = new ArrayList<>();

    for(int i=;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 ;

    }

    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=;i<titles.size();i++){

          mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));

      }

      List<Fragment> fragments = new ArrayList<>();

      for(int i=;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”
运行代码来看看效果

源码下载