Viewpager的基本使用

1.需求

1.1实现以下功能

1.2 分析一下都有什么要求：

1. 可以滑动的页面
2. 导航栏，可以选择打开的页面
3. 下标，需要随着页面改变而改变

2.实现

2.1使用viewPager，及使用PagerTabStrip，但发现使用PagerTabStrip并不能固定标题，故导航栏自己实现，而页面滑动使用viewpager

2.2主页面布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout 
            android:id="@+id/tab_bar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal">

        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/btn1"
            android:background="#fff"/>

        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/btn2"
            android:background="#fff"/>

        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/btn3"
            android:background="#fff"/>

    </LinearLayout>

    <!--使用shapeDrawable填充-->
    <TextView
        android:id="@+id/cursor"
        android:layout_width="wrap_content"
        android:layout_height="5dp"
        android:scaleType="matrix"
        android:background="@drawable/rect"
        android:clickable="false"/>

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

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

</LinearLayout>

2.3子页面布局，只是一个TextView ，故不贴了

2.4shapeDrawable填充游标的背景颜色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 设置填充色 -->
    <solid android:color="#FFB90F" />
</shape>

2.5页面滑动监听事件以及按钮的监听事件

//页面滑动监听事件
package com.example.myviewpager;

import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.TextView;

public class MyPageListener implements OnPageChangeListener {

    //距离
    private int kio;
    //移动的view
    private TextView view;
    //当前页面
    private int curPage=0;

    public MyPageListener() {
        // TODO Auto-generated constructor stub
    }

    public MyPageListener(TextView view,int kio) {
        // TODO Auto-generated constructor stub

        this.view = view;
        this.kio = kio;
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {
    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
    }
    /**
    fromXDelta：位置变化的起始点X坐标。
    toXDelta：位置变化的结束点X坐标。
    fromYDelta：位置变化的起始点Y坐标。
    toYDelta：位置变化的结束点Y坐标。
    **/
    @Override
    public void onPageSelected(int arg0) {

        Animation am = new TranslateAnimation(curPage*kio, arg0*kio , 0, 0);
        am.setDuration(300);
        am.setFillAfter(true);
        view.startAnimation(am);
        curPage = arg0;
    }

}

//按钮监听事件
package com.example.myviewpager;

import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class BtnListener implements OnClickListener {
    private ViewPager pager;

    public BtnListener() {
        // TODO Auto-generated constructor stub
    }
    public BtnListener(ViewPager v)
    {
        this.pager = v;
    }
    public void onClick(View v) {

        String text = ((Button)v).getText().toString();
        if(text.equals("btn1"))
        {
            pager.setCurrentItem(0);
        }
        if(text.equals("btn2"))
        {
            pager.setCurrentItem(1);
        }
        if(text.equals("btn3"))
        {
            pager.setCurrentItem(2);
        }
    }

}

2.6主activity

public class MainActivity extends Activity {

    private Button btn1,btn2,btn3;
    private ViewPager vPager;
    private List<View> vList;
    private TextView cursor;
    private MyPageListener pageListener;
    private BtnListener btnListener;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initButton();

        vList = new ArrayList<View>();

        vPager = (ViewPager)findViewById(R.id.viewpager);


        vList.add(LayoutInflater.from(this).inflate(R.layout.view1_layout, null));
        vList.add(LayoutInflater.from(this).inflate(R.layout.view2_layout, null));
        vList.add(LayoutInflater.from(this).inflate(R.layout.view3_layout, null));


        MyViewPagerAdapter adapter = new MyViewPagerAdapter(vList);

        vPager.setAdapter(adapter);

        pageListener = new MyPageListener(cursor,getScreenWidth()/3);
        vPager.setOnPageChangeListener(pageListener);
        btnListener = new BtnListener(vPager);
        btn1.setOnClickListener(btnListener);
        btn2.setOnClickListener(btnListener);
        btn3.setOnClickListener(btnListener);
    }

    //初始化导航栏
    public void initButton()
    {
        btn1 = (Button)findViewById(R.id.btn1);
        btn2 = (Button)findViewById(R.id.btn2);
        btn3 = (Button)findViewById(R.id.btn3);
        cursor = (TextView)findViewById(R.id.cursor);

        btn1.setWidth(getScreenWidth()/3);
        btn2.setWidth(getScreenWidth()/3);
        btn3.setWidth(getScreenWidth()/3);
        cursor.setWidth(getScreenWidth()/3);

    }


    public int getScreenWidth()
    {
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        int screenW = dm.widthPixels;// 获取分辨率宽度
        return screenW;
    }



    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}