Android Toolbar，ViewPager，TabLayout，联合使用可以滑动的栏目

1.第一次联合使用Toolbar，ViewPager，TabLayout的时候，作为小白，卧槽，不会啊，这是什么鬼啊，看别人的博客复制粘贴啊，哎，走在CV的路上无法自拔啊，一句话，先入行的小白们都是要自己多敲代码，多练习。

好了，不废话，上代码，最简单的形式最直白的简短的实现这个过程吧

首先布局是这样子的

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".TabLayoutPagerActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Base.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"
            android:theme="@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.TabLayout>
    </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">

    </android.support.v4.view.ViewPager>
</LinearLayout>

然后我们在主界面的代码这样实现

public class TabLayoutPagerActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout_pager);


        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        initViewPager();


    }

    private void initViewPager() {
        mTabLayout = (TabLayout) findViewById(R.id.tabs);
        ArrayList<String> titles = new ArrayList<>();
        titles.add("精选");
        titles.add("体育");
        titles.add("巴萨");
        titles.add("购物");
        titles.add("明星");
        titles.add("视屏");
        titles.add("健康");
        titles.add("健康");

        ArrayList<Fragment> fragments = new ArrayList<>();
        for (int i = 0; i < titles.size(); i++) {
            mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));
            fragments.add(new ListFragment());
        }
        FragmnetAdapter fragmnetAdapter = new FragmnetAdapter(getSupportFragmentManager(), fragments, titles);
        mViewPager.setAdapter(fragmnetAdapter);
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.setTabsFromPagerAdapter(fragmnetAdapter);
    }

}

我们将viewpager的适配器

public class FragmnetAdapter extends FragmentStatePagerAdapter {
    private List<Fragment> mFragments;
    private List<String> mTitles;
    public FragmnetAdapter(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);
    }

}

适配器就是这么的简单

接下来我们在viewpager的中的fragment很简单，我在fragment中的布局很简单就一个helloword,如何大家要展示列表，自己可以里面展示一些列表。

public class ListFragment extends android.support.v4.app.Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {


        View inflate = inflater.inflate(R.layout.fragment, container, false);
        return inflate;
    }
}

 

布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Hello Woorld "
        android:gravity="center"/>

最重要的就是 mTabLayout.setupWithViewPager(mViewPager);这行代码，viewpager和tablayout的绑定，实现滑动。他们三个的使用都是固定套路，大家记住就行了。下一篇，我们建立一个底部导航栏+Toolbar，ViewPager，TabLayout

（这个是参照了刘望舒的《进阶之光》，跟着大神走吃喝啥都有，大家多敲多理解，然后再去慢慢理解源码，一口吃不了个胖子，多练习到时候自然熟悉了）