【Android界面实现】使用ScrollingTabsView实现有滑动标签的ViewPager效果

转载自：http://blog.csdn.net/zhaokaiqiang1992/article/details/40378285

    在前面的文章中，我们使用支持包里面的PagerTabStrip实现了有滑动标签的viewPager效果，今天，再给大家介绍另外一种开源项目，来实现类似的效果。

    在这篇文章中，我们将使用第三方开源项目ViewPagerExtensions实现。

    先看效果

    ViewPagerExtensions的github地址：https://github.com/astuetz/ViewPagerExtensions

    首先给出整个项目的目录结构

    在这个demo之中，我直接把资源文件全部放在了项目之中，方便使用。

    首先，我们看一下布局文件activity_main.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/com.heli17.tradeshowcloud"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.astuetz.viewpager.extensions.ScrollingTabsView
        android:id="@+id/scrolling_tabs"
        android:layout_width="fill_parent"
        android:layout_height="38dp"
        android:background="@drawable/tab_unselected_holo"
        app:dividerDrawable="@android:color/white" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>

    我们在布局文件中，添加了一个scrollingTabsView控件，这个就是上面指示器的自定义控件。

    布局写好了之后，我们就可以在代码里面设置适配器了。

    代码如下：

package com.example.scrollingtabsdemo;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.Button;

import com.astuetz.viewpager.extensions.ScrollingTabsView;
import com.astuetz.viewpager.extensions.TabsAdapter;

public class MainActivity extends FragmentActivity {

    private ViewPager viewPager;
    private ScrollingTabsAdapter scrollingTabsAdapter;
    private ScrollingTabsView scrollingTabs;
    private FragsAdapter pagerAdapter;

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

        viewPager = (ViewPager) findViewById(R.id.pager);
        // 设置适配器
        pagerAdapter = new FragsAdapter(getSupportFragmentManager());
        viewPager.setAdapter(pagerAdapter);

        // 设置缓存fragment的数量
        viewPager.setOffscreenPageLimit(2);
        viewPager.setCurrentItem(0);
        viewPager.setPageMargin(4);

        scrollingTabsAdapter = new ScrollingTabsAdapter(this);
        // 设置滑动标签的适配器和宿主ViewPager
        scrollingTabs = (ScrollingTabsView) findViewById(R.id.scrolling_tabs);
        scrollingTabs.setAdapter(scrollingTabsAdapter);
        scrollingTabs.setViewPager(viewPager);

    }

    /**
     * ViewPager适配器
     *
     * @author zhaokaiqiang
     *
     */
    private class FragsAdapter extends FragmentStatePagerAdapter {

        private ArrayList<Fragment> fragments;

        public FragsAdapter(FragmentManager fm) {
            super(fm);

            fragments = new ArrayList<Fragment>();
            for (int i = 0; i < scrollingTabsAdapter.mTitles.length; i++) {
                fragments.add(new MyFragment(i));
            }

        }

        @Override
        public int getCount() {
            return fragments.size();
        }

        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }
    }

    /**
     * 滑动标签适配器
     *
     * @author zhaokaiqiang
     *
     */
    private class ScrollingTabsAdapter implements TabsAdapter {

        private Activity mContext;
        public String[] mTitles = { "首页", "推荐", "最新", "娱乐", "设置" };

        public ScrollingTabsAdapter(Activity ctx) {
            this.mContext = ctx;
        }

        @Override
        public View getView(int position) {

            Button tab = (Button) mContext.getLayoutInflater().inflate(
                    R.layout.tab_scrolling, null);
            tab.setText(mTitles[position]);
            return tab;
        }

    }

}

    在代码里面，我们需要设置两个适配器，一个是ViewPager的，用来更换显示的fragment，另外一个就是上面滑动的tab布局的，用来控制每一个tab显示的布局，在getView方法里面返回。

    这里的R.layout.tab_scrolling是自定义的一个布局，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="@drawable/tab_holo"
    android:gravity="center"
    android:paddingBottom="8dp"
    android:paddingLeft="30dip"
    android:paddingRight="30dip"
    android:paddingTop="8dp"
    android:textColor="@android:color/holo_blue_light"
    android:textSize="16sp" />

    大家可以根据自己的需求进行更改。

    这种滑动的tab适合界面比较多的情况，所以在Viewpagr的适配器的选择上使用的是FragmentPagerStateAdapter，如果滑动的界面在3个或者3个以下，推荐使用FixedTabsView，使用方法和这个完全一样，另外，ViewPager的适配器换成FragmentPagerAdapter比较合适。

    这个项目的demo的github地址：https://github.com/ZhaoKaiQiang/ScrollingTabsDemo