天天看点
返回

viewpager导航和滑动条使用

学习引导

http://blog.csdn.net/bobo8945510/article/details/52742758 第一节 viewpager初识

http://blog.csdn.net/bobo8945510/article/details/52743570 第二节 viewpager实现滑动条功能

http://blog.csdn.net/bobo8945510/article/details/52786360 第四节 viewpager实现带小园点过渡页

viewpager实现滑动条及导航功能

什么都不说先看效果图：

viewpager导航和滑动条使用

用到的重要知识点：

viewpager 适配器

TranslateAnimation 水平动画

OnPageChangeListener的API

一、布局效果，我在前面博客基础上添加了三个textview组件，如下： 

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="#E5E5E5"
    tools:context="com.example.enz.viewpagertext.MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/textView01"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="40dp"
            android:gravity="center"
            android:textColor="#EEE685"
            android:background="#FF4040"
            android:text="第一页"
            />

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#EEDFCC">
        </View>
        <TextView
            android:id="@+id/textView02"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="40dp"
            android:textColor="#D1D1D1"
            android:gravity="center"
            android:text="第二页"/>
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#EEDFCC">
        </View>
        <TextView
            android:id="@+id/textView03"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:textColor="#D1D1D1"
            android:layout_height="40dp"
            android:gravity="center"
            android:text="第三页"/>

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#EEDFCC">
    </View>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3">
        <ImageView
            android:id="@+id/img01"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginBottom="5dp"
            android:scaleType="matrix"
            android:background="@drawable/img01"/>
    </LinearLayout>



    <android.support.v4.view.ViewPager
        android:id="@+id/viewp_01"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
</LinearLayout>

布局效果图：

viewpager导航和滑动条使用

1，在代码中设置新添加的三个布局id,并设置监听

textView01= (TextView) findViewById(R.id.textView01);
        textView01.setOnClickListener(this);
        textView02= (TextView) findViewById(R.id.textView02);
        textView02.setOnClickListener(this);
        textView03= (TextView) findViewById(R.id.textView03);
        textView03.setOnClickListener(this);

2、在onClick()方法中关联viewpager页卡

@Override
    public void onClick(View v) {
      switch (v.getId()){
          case R.id.textView01:
              //绑定viewopager对应的页卡
              Log.i("Text","textView01 +textView01  ");
              vp.setCurrentItem();
              break;
          case R.id.textView02:
              Log.i("Text","textView02 +textView02  ");
              vp.setCurrentItem();
              break;
          case R.id.textView03:
              vp.setCurrentItem();
              Log.i("Text","textView03 +textView03  ");
              break;
      }
    }

3、在这个demo中我把滑动动画封装成了一个方法，只需要传递当前页面的position即可

如果对动画不甚了解，请看博客：http://blog.csdn.net/bobo8945510/article/details/52515866

//页面滑动动画方法
    private void movePositionX(int toPosition) {
        int one = img_wight+offset*;// 页面一到页面二移动量
        int two = one * ;// 页卡1 -> 页卡3 偏移量
            Log.i("Text","oneoneone   "+one);
            //创建一个移动动画，用来实现滑动效果
            Animation animation = null;
            switch (toPosition) {
                case :
                    if (currIndex == ) {
                        animation = new TranslateAnimation(one, , , );
                    } else if (currIndex == ) {
                        animation = new TranslateAnimation(two, , , );
                    }
                    break;
                case :
                    if (currIndex == ) {
                        animation = new TranslateAnimation(, one, , );
                    } else if (currIndex == ) {
                        animation = new TranslateAnimation(two, one, , );
                    }
                    break;
                case :
                    if (currIndex == ) {
                        animation = new TranslateAnimation(, two, , );
                    } else if (currIndex == ) {
                        animation = new TranslateAnimation(one, two, , );
                    }
                    break;
            }
            currIndex = toPosition;
            animation.setFillAfter(true);// True:图片停在动画结束位置
            animation.setDuration();
            img01.startAnimation(animation);
    }

4、调用viewPager的setOnPageChangeListener（）方法，来监听页面滑动和关联textview后改变起属性，在这里我改变了textview的字体颜色和背景颜色

vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            //页面在滑动过程中不停触发该方法：position：当前滑动到的位置，positionOffset：偏移量的百分比，positionOffsetPixels：偏移量的数值
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            //ViewPager跳转到新页面时触发该方法，position表示新页面的位置。
            public void onPageSelected(int position) {
              switch (position){
                  case :

                      textView01.setTextColor(android.graphics.Color.parseColor("#ffffff"));
                      textView02.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
                      textView03.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));

                      textView01.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
                      textView02.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                      textView03.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                      //把当前位置传递到动画方法中，进行滑动
                      movePositionX();
                      break;


                  case :
                      textView01.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
                      textView02.setTextColor(android.graphics.Color.parseColor("#ffffff"));
                      textView03.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));

                      textView01.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                      textView02.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
                      textView03.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                      //把当前位置传递到动画方法中，进行滑动
                      movePositionX();
                      break;



                  case :
                      textView01.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
                      textView02.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
                      textView03.setTextColor(android.graphics.Color.parseColor("#ffffff"));

                      textView01.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                      textView02.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                      textView03.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
                      //把当前位置传递到动画方法中，进行滑动
                      movePositionX();
                      break;
              }
            }
            @Override
            //当页面的滑动状态改变时该方法会被触发，页面的滑动状态有个：“”表示什么都不做，“”表示开始滑动，“”表示结束滑动。
            public void onPageScrollStateChanged(int state) {
            }
        });

5、还是发下所有的代码

  • 适配器 
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by ENZ on 2016/9/29.
 */
public class ViewPagerAdapter extends PagerAdapter {
    private Context context;
    private List<View> viewdata;

    public ViewPagerAdapter(MainActivity mainActivity, List<View> mview) {
        context = mainActivity;
        viewdata = mview;
    }

    //这个方法是获取一共有多少个item
    @Override
    public int getCount() {
        return viewdata.size();
    }

    //这个就这样写就OK ，无需管
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }

    //这个方法用来实例化页卡
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(viewdata.get(position),);
        return viewdata.get(position);
    }

    //删除实例化页卡
    @Override
    public void destroyItem(ViewGroup container, int position,
                            Object object) {
        // TODO Auto-generated method stub
        container.removeView(viewdata.get(position));
    }

}
  • 主类代码 
import android.app.Activity;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity implements View.OnClickListener {
    private ViewPager vp;

    //把定义好的三个布局进行初始化对象
    private View  item_view01,item_view02,item_view03;
    //创建一个list集合 参数为view

    private List<View> Mview = new ArrayList<>();

    //用于引用布局好的三个itemView布局
    private LayoutInflater inflater;

    private ViewPagerAdapter adapter;

    private ImageView img01;

    private int img_wight = ; // 游标宽度

    private int currIndex = ;// 当前页卡编号

    private int offset = ;// // 动画图片偏移量

    int log = ;

    int w=;

    //下面是第三章博客新加id
    private TextView textView01,textView02,textView03;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       /*
       * LayoutInflater讲解
       * 对于一个没有被载入或者想要动态载入的界面，都需要使用LayoutInflater.inflate()来载入；
       * 对于一个已经载入的界面，就可以使用Activiyt.findViewById()方法来获得其中的界面元素。
       * 想了解更多：http://www.cnblogs.com/maliqian/p/3473800.html
       * */
        inflater = getLayoutInflater();
        setView();
    }
    private void setView() {
        textView01= (TextView) findViewById(R.id.textView01);
        textView01.setOnClickListener(this);
        textView02= (TextView) findViewById(R.id.textView02);
        textView02.setOnClickListener(this);
        textView03= (TextView) findViewById(R.id.textView03);
        textView03.setOnClickListener(this);

        item_view01 = inflater.inflate(R.layout.item01,null);
        item_view02 = inflater.inflate(R.layout.item02,null);
        item_view03 = inflater.inflate(R.layout.item03,null);
        //初始化viewPager
        vp = (ViewPager)findViewById(R.id.viewp_01);

        img01 = (ImageView) findViewById(R.id.img01);
        //把三个View布局对象加载到list中，这些就是item的数据
        Mview.add(item_view01);
        Mview.add(item_view02);
        Mview.add(item_view03);

        //添加OnPageChangeListener的API
        vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            //页面在滑动过程中不停触发该方法：position：当前滑动到的位置，positionOffset：偏移量的百分比，positionOffsetPixels：偏移量的数值
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            //ViewPager跳转到新页面时触发该方法，position表示新页面的位置。
            public void onPageSelected(int position) {
              switch (position){
                  case :
                      textView01.setTextColor(android.graphics.Color.parseColor("#ffffff"));
                      textView02.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
                      textView03.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));

                      textView01.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
                      textView02.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                      textView03.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                      //把当前位置传递到动画方法中，进行滑动
                      movePositionX();
                      break;

                  case :
                      textView01.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
                      textView02.setTextColor(android.graphics.Color.parseColor("#ffffff"));
                      textView03.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));

                      textView01.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                      textView02.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
                      textView03.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                      //把当前位置传递到动画方法中，进行滑动
                      movePositionX();
                      break;

                  case :
                      textView01.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
                      textView02.setTextColor(android.graphics.Color.parseColor("#d1d1d1"));
                      textView03.setTextColor(android.graphics.Color.parseColor("#ffffff"));

                      textView01.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                      textView02.setBackgroundColor(android.graphics.Color.parseColor("#ffffff"));
                      textView03.setBackgroundColor(android.graphics.Color.parseColor("#FF4040"));
                      //把当前位置传递到动画方法中，进行滑动
                      movePositionX();
                      break;
              }
            }
            @Override
            //当页面的滑动状态改变时该方法会被触发，页面的滑动状态有3个：“0”表示什么都不做，“1”表示开始滑动，“2”表示结束滑动。
            public void onPageScrollStateChanged(int state) {
            }
        });

        //初始化指示器位置
        initPosition();
        //把数据传递给适配器中，进行数据处理。
        adapter = new ViewPagerAdapter(this,Mview);
        vp.setAdapter(adapter);
    }

    private void initPosition() {
        //很明显是通过BitmapFactory.decodeResource（）方法获取图片资源的宽度
        img_wight = BitmapFactory.decodeResource(getResources(),R.drawable.img01).getWidth();
        Log.i("Text","img_wight   "+img_wight);
        //看上面注释（01）
        DisplayMetrics disp = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(disp);

         w = disp.widthPixels;//获取了分辨率的宽度
        Log.i("Text","wwwwww   "+w);

        Log.i("Text","w/Mview.size()   "+w/Mview.size());
        offset = ((w/Mview.size())-img_wight)/;// 计算偏移量
        Log.i("Text","offsetoffset   "+offset);
    }

    //页面滑动动画方法
    private void movePositionX(int toPosition) {
        int one = img_wight+offset*;// 页面一到页面二移动量
        int two = one * ;// 页卡1 -> 页卡3 偏移量
            Log.i("Text","oneoneone   "+one);
            //创建一个移动动画，用来实现滑动效果
            Animation animation = null;
            switch (toPosition) {
                case :
                    if (currIndex == ) {
                        animation = new TranslateAnimation(one, , , );
                    } else if (currIndex == ) {
                        animation = new TranslateAnimation(two, , , );
                    }
                    break;
                case :
                    if (currIndex == ) {
                        animation = new TranslateAnimation(, one, , );
                    } else if (currIndex == ) {
                        animation = new TranslateAnimation(two, one, , );
                    }
                    break;
                case :
                    if (currIndex == ) {
                        animation = new TranslateAnimation(, two, , );
                    } else if (currIndex == ) {
                        animation = new TranslateAnimation(one, two, , );
                    }
                    break;
            }
            currIndex = toPosition;
            animation.setFillAfter(true);// True:图片停在动画结束位置
            animation.setDuration();
            img01.startAnimation(animation);
    }



    @Override
    public void onClick(View v) {
      switch (v.getId()){
          case R.id.textView01:
              //绑定viewopager对应的页卡
              Log.i("Text","textView01 +textView01  ");
              vp.setCurrentItem();
              break;
          case R.id.textView02:
              Log.i("Text","textView02 +textView02  ");
              vp.setCurrentItem();
              break;
          case R.id.textView03:
              vp.setCurrentItem();
              Log.i("Text","textView03 +textView03  ");
              break;
      }
    }
}

dome地址：http://download.csdn.net/detail/bobo8945510/9649864

android viewpager 导航
上一篇: 学习笔记33—graphPad画图集
下一篇: Android ViewPager 分页滑动ViewPager

继续阅读