【练习】ViewPager标签滑动

效果图：

布局：

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagerTab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"></android.support.v4.view.PagerTabStrip>
    </android.support.v4.view.ViewPager>
</RelativeLayout>

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

    <TextView
        android:id="@+id/fragment_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

java代码

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private PagerTabStrip pagerTab;
    private List<String> titles;    //标签
    private List<Fragment> fragments;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化页面
        initView();
        //初始化标题数组
        initTitle();
        //初始化fragments
        initFragment();
        FragmentAdapter adapter = new FragmentAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        pagerTab = (PagerTabStrip) findViewById(R.id.pagerTab);
        pagerTab.setBackgroundColor(Color.GREEN);
        pagerTab.setTabIndicatorColor(Color.RED);
        pagerTab.setDrawFullUnderline(true);
    }

    private void initTitle() {
        titles = new ArrayList<String>();
        for(int i = 0;i<10;i++){
            titles.add("第"+i+"个标签");
        }
    }

    private void initFragment() {
        fragments = new ArrayList<Fragment>();
        for(int i = 0;i<titles.size();i++){
            MyFragment myFragment = new MyFragment();
            Bundle bundle = new Bundle();
            bundle.putString("content","第"+i+"个fragment");
            myFragment.setArguments(bundle);
            fragments.add(myFragment);
        }
    }

    class FragmentAdapter extends FragmentPagerAdapter{

        public FragmentAdapter(FragmentManager fm) {
            super(fm);
        }

        @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);
        }
    }
}

public class MyFragment extends Fragment {
    private String content;
        private TextView fragment_textview;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Bundle bundle = getArguments();
        content = bundle.getString("content","没有内容");
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.myfragment,container,false);
        fragment_textview = (TextView) view.findViewById(R.id.fragment_textview);
        return view;
    }

    @Override
    public void onActivityCreated( Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        fragment_textview.setText(content);
    }
}

*接下来不用PagerTabStrip实现

第一步：实现基本的上下布局

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

    <HorizontalScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#3edccf"
        android:scrollbars="none">
        <LinearLayout
            android:id="@+id/layout_top"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <LinearLayout
                android:id="@+id/layout_tab"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:orientation="horizontal">
                <TextView
                    android:id="@+id/tab1"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:text="标签1"
                    android:textSize="30dp"
                    android:paddingRight="10dp"
                    android:gravity="center"/>
                <TextView
                    android:id="@+id/tab2"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:text="标签2"
                    android:textSize="30dp"
                    android:paddingRight="10dp"
                    android:gravity="center"/>
                <TextView
                    android:id="@+id/tab3"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:text="标签3"
                    android:textSize="30dp"
                    android:paddingRight="10dp"
                    android:gravity="center"/>
                <TextView
                    android:id="@+id/tab4"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:text="标签4"
                    android:textSize="30dp"
                    android:paddingRight="10dp"
                    android:gravity="center"/>
                <TextView
                    android:id="@+id/tab5"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:text="标签5"
                    android:textSize="30dp"
                    android:paddingRight="10dp"
                    android:gravity="center"/>
                <TextView
                    android:id="@+id/tab6"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:text="标签6"
                    android:textSize="30dp"
                    android:paddingRight="10dp"
                    android:gravity="center"/>
                <TextView
                    android:id="@+id/tab7"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:text="标签7"
                    android:textSize="30dp"
                    android:paddingRight="10dp"
                    android:gravity="center"/>
                <TextView
                    android:id="@+id/tab8"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:text="标签8"
                    android:textSize="30dp"
                    android:paddingRight="10dp"
                    android:gravity="center"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/layout_scroll"
                android:layout_width="wrap_content"
                android:layout_height="10dp"
                android:orientation="horizontal">
                <TextView
                    android:id="@+id/scroll_line"
                    android:layout_width="100dp"
                    android:layout_height="10dp"
                    android:background="#bf24c4"/>
            </LinearLayout>
        </LinearLayout>

    </HorizontalScrollView>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/scrollView"/>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/fragment_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

public class MainActivity extends AppCompatActivity {

    private HorizontalScrollView scrollView;
    private LinearLayout layout_top,layout_tab,layout_scroll;
    private TextView scroll_line;
    private ViewPager viewPager;
    private List<Fragment> fragments;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化页面
        initView();
        //初始化fragments
        initFragments();
        MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
    }

    private void initView() {
        scrollView = (HorizontalScrollView) findViewById(R.id.scrollView);
        layout_top = (LinearLayout) findViewById(R.id.layout_top);
        layout_tab = (LinearLayout) findViewById(R.id.layout_tab);
        layout_scroll = (LinearLayout) findViewById(R.id.layout_scroll);
        scroll_line = (TextView) findViewById(R.id.scroll_line);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
    }

    private void initFragments() {
        fragments = new ArrayList<Fragment>();
        for(int i = 0;i<layout_tab.getChildCount();i++){
            MyFrgment fragment = new MyFrgment();
            Bundle bundle = new Bundle();
            bundle.putString("content","第"+(i+1)+"个fragment");
            fragment.setArguments(bundle);
            fragments.add(fragment);
        }
    }

    class MyAdapter extends FragmentPagerAdapter{

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

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

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

public class MyFrgment extends Fragment {
    private TextView fragment_textview;
    private String content;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Bundle bundle = getArguments();
        content = bundle.getString("content","没有内容");
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.myfragment,container,false);
        fragment_textview = (TextView) view.findViewById(R.id.fragment_content);
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        fragment_textview.setText(content);
    }
}

第二步：实现滑动下面控制上面

优化MainActivity类

public class MainActivity extends AppCompatActivity {

    private HorizontalScrollView scrollView;
    private LinearLayout layout_top,layout_tab,layout_scroll;
    private TextView scroll_line;
    private ViewPager viewPager;
    private List<Fragment> fragments;
    private int scroll_line_width;
    private LinearLayout.LayoutParams params;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化页面
        initView();
        //初始化fragments
        initFragments();
        MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                int left = (int) (scroll_line_width*(position+positionOffset));
                params.leftMargin = left;
                scroll_line.setLayoutParams(params);
            }

            @Override
            public void onPageSelected(int position) {
                int out_left = position*scroll_line_width +scroll_line_width/2 - getResources().getDisplayMetrics().widthPixels/2;
                scrollView.smoothScrollTo(out_left,0);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void initView() {
        scrollView = (HorizontalScrollView) findViewById(R.id.scrollView);
        layout_top = (LinearLayout) findViewById(R.id.layout_top);
        layout_tab = (LinearLayout) findViewById(R.id.layout_tab);
        layout_scroll = (LinearLayout) findViewById(R.id.layout_scroll);
        scroll_line = (TextView) findViewById(R.id.scroll_line);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        params = (LinearLayout.LayoutParams) scroll_line.getLayoutParams();
        scroll_line_width = params.width;

    }

    private void initFragments() {
        fragments = new ArrayList<Fragment>();
        for(int i = 0;i<layout_tab.getChildCount();i++){
            MyFrgment fragment = new MyFrgment();
            Bundle bundle = new Bundle();
            bundle.putString("content","第"+(i+1)+"个fragment");
            fragment.setArguments(bundle);
            fragments.add(fragment);
        }
    }

    class MyAdapter extends FragmentPagerAdapter{

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

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

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

第三步：增加标签点击监听控制页面滑动

在MainActivity类中增加方法initTabControl()

private void initTabControl() {
        for(int i = 0;i<layout_tab.getChildCount();i++){
            TextView tab = (TextView) layout_tab.getChildAt(i);
            tab.setTag(i);
            tab.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    viewPager.setCurrentItem((Integer) v.getTag(),true);
                }
            });
        }
    }