Android ViewPager+HorizontalScrollView实现标题栏滑动(腾讯新闻)

1) ViewPager提供了左右滑动切换页面的方法,但是它所提供的标题只是无语,估计没有真正的项目会照搬拿过来;并且它只能一页一页滑,我想直接查看最后一页要滑半天;

2) 看了腾讯新闻客户端感觉体验很好,所以就仿着写了,因为只是做个demo供大家交流也是给自己做个笔记,所以功能实现就行demo比较简单;

3) 有兴趣的可以在demo的基础拓展,如果哪里写得不好还望大家多多赐教、一起交流

4) 直接上主要代码,所以注释都写在代码里,最后会给工程包。(PS是在AS环境下生成的)

先放个效果图:

MainActivity.java

package qi.demo;

import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;

import qi.demo.adapter.MyViewPagerAdapter;

public class MainActivity extends FragmentActivity implements ViewPager.OnPageChangeListener{

    private MainActivity mActivity;
    private ViewPager viewPager;
    private HorizontalScrollView scrollView;
    private LinearLayout titleLayout;
    private ArrayList<Integer> moveToList;          //viewPager滑动时标题栏跟随滑动距离
    private int mTitleMargin;                       //每个标题间的间隔

    private ArrayList<Fragment> fragmentsList;      //viewPager加载类
    private ArrayList<TextView> textViewList;       //标题控件集合
    private ArrayList<String> titleList;            //标题文字集合
    private TestFragment fragment;
    private MyViewPagerAdapter mAdapter;

    private int currentPos;                         //现在显示的是第几页
    private String[] strList = new String[]{"物业服务", "教育", "医疗卫生", "劳动保障", "交通出行", "投资服务", "关于左邻右里"};
    private int[] idList = new int[]{0, 1, 2, 3, 4, 5, 6};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mActivity = this;
        mTitleMargin = dip2px(this, 10);
        initView();
        initData();
    }

    private void initView(){
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        viewPager.setOnPageChangeListener(mActivity);
        scrollView = (HorizontalScrollView) findViewById(R.id.scrollView);
        titleLayout = (LinearLayout) findViewById(R.id.titleLayout);
    }

    /**
     *  1）初始化viewPager
     *  2）设置默认的Fragment
     */
    private void initData(){
        fragmentsList = new ArrayList<>();
        titleList = new ArrayList<>();
        textViewList = new ArrayList<>();
        moveToList = new ArrayList<>();
        mAdapter = new MyViewPagerAdapter(getSupportFragmentManager());
        for(int i=0; i<strList.length; i++){
            titleList.add(strList[i]);
            fragment = new TestFragment(mActivity, idList[i]);
            fragmentsList.add(fragment);
            addTitleLayout(titleList.get(i), idList[i]);
        }
        mAdapter.setData(fragmentsList);
        viewPager.setAdapter(mAdapter);
        viewPager.setOffscreenPageLimit(1);
        textViewList.get(0).setTextColor(Color.rgb(255, 0, 0));
        currentPos = 0;
    }

    /**
     * 添加标题栏
     * @param title     标题名称
     * @param position  标题索引
     */
    private void addTitleLayout(String title, int position){
        final TextView textView = (TextView) getLayoutInflater().inflate(R.layout.title, null);
        textView.setText(title);
        textView.setTag(position);
        textView.setOnClickListener(new posOnClickListener());
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        params.leftMargin = dip2px(mActivity, mTitleMargin);
        params.rightMargin = dip2px(mActivity, mTitleMargin);
        titleLayout.addView(textView, params);
        textViewList.add(textView);
        int width;
        //如果是第一个标题则不设滑动距离
        if(position==0){
            width = 0;
            moveToList.add(width);
        }
        //第N个标题的滑动距离是上一个标题的宽度加上标题之间的间隔,这样的话滑动viewPager的时候保证当前标题栏在最左侧
        else{
            int w = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
            int h = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
            textViewList.get(position-1).measure(w, h);
            width = textViewList.get(position-1).getMeasuredWidth() + mTitleMargin*4;
            moveToList.add(width+moveToList.get(moveToList.size()-1));
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    /**
     * 滑动viewPager
     */
    @Override
    public void onPageSelected(int position) {
        textViewList.get(currentPos).setTextColor(Color.rgb(0, 0, 0));    //将之前的标题栏颜色变回来
        textViewList.get(position).setTextColor(Color.rgb(255, 0, 0));    //将当前标题栏变色
        currentPos = position;                                            //设置当前索引
        scrollView.scrollTo((int) moveToList.get(position), 0);           //标题栏跟随viewPager滑动
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    /**
     *  点击标题栏
     */
    class posOnClickListener implements View.OnClickListener{
        @Override
        public void onClick(View view) {
            //点击的是当前标题什么都不做
            if((int)view.getTag()==currentPos){
                return;
            }
            //标题栏变色且设置viewPager
            textViewList.get(currentPos).setTextColor(Color.rgb(0, 0, 0));
            currentPos = (int) view.getTag();
            textViewList.get(currentPos).setTextColor(Color.rgb(255, 0, 0));
            viewPager.setCurrentItem(currentPos);
        }
    }

    /**
     * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
     */
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

}

MyViewPagerAdapter.java

public class MyViewPagerAdapter extends FragmentPagerAdapter {

    private ArrayList<Fragment> fragmentList;

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

    public void setData(ArrayList<Fragment> fragmentList){
        this.fragmentList = fragmentList;
    }

    @Override
    public Fragment getItem(int arg0) {
        return fragmentList.get(arg0);
    }

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

}

activity_main.xml

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

    <HorizontalScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:scrollbars="none"
        android:background="#FFFFFF">
        <LinearLayout
            android:id="@+id/titleLayout"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:orientation="horizontal"/>
    </HorizontalScrollView>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagerTabStrip"
            android:layout_width="0dp"
            android:layout_height="0dp"/>
    </android.support.v4.view.ViewPager>

</LinearLayout>

demo下载地址：http://download.csdn.net/detail/qy7941237/9344763