Android基础学习之viewpager（左右滑页卡）

来源：互联网发布：mac原唱变伴奏编辑：程序博客网时间：2024/06/05 13:27

此功能为android 3.0 后开始有，如果需要兼容低版本侧要使用v4兼容包
这里写图片描述

1.xml布局视图

<LinearLayout 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:orientation="vertical" >    <LinearLayout        android:id="@+id/ll_top"        android:layout_width="match_parent"        android:layout_height="40dp"        android:orientation="horizontal"         android:background="#ccc" >        <TextView            android:id="@+id/tv_title1"            android:layout_width="0dp"            android:layout_height="37dp"            android:layout_weight="1"            android:gravity="center"            android:text="Tab1" />        <TextView            android:id="@+id/tv_title2"            android:layout_width="0dp"            android:layout_height="37dp"            android:layout_weight="1"            android:gravity="center"            android:text="Tab2" />        <TextView            android:id="@+id/tv_title3"            android:layout_width="0dp"            android:layout_height="37dp"            android:layout_weight="1"            android:gravity="center"            android:text="Tab3" />    </LinearLayout>    <ImageView         android:id="@+id/iv_cursor"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:scaleType="matrix"        android:src="@drawable/cursor"/>    <LinearLayout         android:layout_width="match_parent"        android:layout_height="1dp"        android:background="#0af">    </LinearLayout>    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:flipInterval="30"        android:persistentDrawingCache="animation" >    </android.support.v4.view.ViewPager></LinearLayout>

效果图这里写图片描述

2.Activity类，直接上代码了

package com.ql.viewpagerdemo;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.graphics.BitmapFactory;import android.graphics.Matrix;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.DisplayMetrics;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;import android.widget.TextView;public class MainActivity extends Activity implements OnPageChangeListener {    private TextView tv_title1;    private TextView tv_title2;    private TextView tv_title3;    private ViewPager viewPager;    private List<View> views; //用于装页卡    private View view1, view2, view3; //分别对应3个Tab的页卡视图    private ImageView iv_cursor;    private int bmpW; //指示器图片的宽    private int offset; // 动画图片偏移量    private int currIndex = 0; // 当前页卡的编号    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //分开封装，便于维护和阅读        initImageView();         initTitleView();        initViewPager();    }    private void initViewPager() {        viewPager = (ViewPager) findViewById(R.id.viewpager);//获取控件对象        views = new ArrayList<View>(); //初始化容器        LayoutInflater inflater = LayoutInflater.from(this); //用LayoutInflater获取xml布局文件        view1 = inflater.inflate(R.layout.tab1, null);//加载tab对应的xml布局        views.add(view1); //添加进容器        view2 = inflater.inflate(R.layout.tab2, null);        views.add(view2);        view3 = inflater.inflate(R.layout.tab3, null);        views.add(view3);        viewPager.setAdapter(new MyPagerAdapter()); //绑定适配器        viewPager.setCurrentItem(0); //默认显示第1张页卡        viewPager.setOnPageChangeListener(this); //设置页卡改变监听器    }    private void initTitleView() {        tv_title1 = (TextView) findViewById(R.id.tv_title1);        tv_title2 = (TextView) findViewById(R.id.tv_title2);        tv_title3 = (TextView) findViewById(R.id.tv_title3);        tv_title1.setOnClickListener(new MyListener(0)); //为TextView设置监听器        tv_title2.setOnClickListener(new MyListener(1));        tv_title3.setOnClickListener(new MyListener(2));    }    private void initImageView() {        iv_cursor = (ImageView) findViewById(R.id.iv_cursor);        bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.cursor)                .getWidth(); //获得图片宽度        DisplayMetrics outMetrics = new DisplayMetrics(); // 用来保存屏幕相关数据的对象        getWindowManager().getDefaultDisplay().getMetrics(outMetrics); // 填充当前屏幕数据到该对象        int screenW = outMetrics.widthPixels; // 获得屏幕宽度        // 动画操作        Matrix matrix = new Matrix(); // 用来做矩阵变换的对象        offset = (screenW / 3 - bmpW) / 2;         matrix.postTranslate(offset, 0); // 初始位置对于 页卡编号0        iv_cursor.setImageMatrix(matrix); // 设置动画效果    }    //自定义监听器类    private class MyListener implements OnClickListener {        private int index = -1;        public MyListener(int index) {            this.index = index;        }        @Override        public void onClick(View v) {            viewPager.setCurrentItem(index); //设置显示的页卡        }    }    //自定义页卡适配器    private class MyPagerAdapter extends PagerAdapter {        @Override //父容器中页卡总数        public int getCount() {            return views.size();        }        @Override //建立object和view的映射        public boolean isViewFromObject(View view, Object object) {            return view == object; //由object来生成view  (key-value)        }        @Override //将页卡view从父容器中移除        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView(views.get(position));        }        @Override //将页卡view添加到父容器,最后将view作为object返回        public Object instantiateItem(ViewGroup container, int position) {            container.addView(views.get(position));            return views.get(position);        }    }    @Override    public void onPageScrollStateChanged(int arg0) {    }    @Override    public void onPageScrolled(int arg0, float arg1, int arg2) {    }    @Override //页卡改变事件    public void onPageSelected(int arg0) {        //处理指示器动画效果        int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量        Animation animation = new TranslateAnimation(one * currIndex, one * arg0, 0, 0);        currIndex = arg0;        animation.setFillAfter(true);// True:图片停在动画结束位置        animation.setDuration(300);// 持续时间        iv_cursor.startAnimation(animation); //开始动画    }}

0 0