天天看點
傳回

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

繼續閱讀