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