Viewpager的基本使用

来源：互联网发布：科瑞明软件怎么样编辑：程序博客网时间：2024/05/21 08:39

1.需求

1.1实现以下功能

这里写图片描述

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

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

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

0 0