Android組件12—viewpager學習02（帶導航）

Viewpager的第二章講解，滑動關聯導航條的功能實現。

這個功能的實現，需要用的

水平滑動TranslateAnimation，用於計算頁面滑動是，導航條滑動的距離，
viewpager，用法同上一篇博客一樣。

這個是繼承上一遍博客來擴展的，添加了上面一個黃色拖動條的功能。

第二步，怎麼在代碼中根據viewPager來滑動上面的黃色條呢，這裡用到的是水平滑動動畫。看全部代碼：

1、TranslateAnimation：位移變化的動畫，創建該動畫時只要指定動畫開始時的位置（以X、Y坐標來表示）、結束時的位置（以X、Y坐標來表示），並指定動畫持續時間即可。

/*
* float fromXDelta 動畫開始的點離當前View X坐標上的差值
* float toXDelta 動畫結束的點離當前View X坐標上的差值
* float fromYDelta 動畫開始的點離當前View Y坐標上的差值
* float toYDelta 動畫開始的點離當前View Y坐標上的差值
* 起始點X軸坐標（數值、譬如50表示以當前View左上角坐標加50px為初始點、
* 50%表示以當前View的左上角加上當前View寬高的50%做為初始點、
* 50%p表示以當前View的左上角加上父控件寬高的50%做為初始點）
* */

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 java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity {
    private ViewPager vp;

    //把定義好的三個布局進行初始化對象
    private View  item_view01,item_view02,item_view03;
    //創建一個list集合 參數為view

    private List Mview = new ArrayList<>();

    //用於引用布局好的三個itemView布局
    private LayoutInflater inflater;

    private ViewPagerAdapter adapter;

    private ImageView img01;

    private int img_wight = 0; // 游標寬度

    private int currIndex = 0;// 當前頁卡編號

    private int offset = 0;// // 動畫圖片偏移量

    int log = 0;

    int w=0;
    @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() {
        //初始化viewPager
        vp = (ViewPager)findViewById(R.id.viewp_01);

        item_view01 = inflater.inflate(R.layout.item01,null);
        item_view02 = inflater.inflate(R.layout.item02,null);
        item_view03 = inflater.inflate(R.layout.item03,null);

        img01 = (ImageView) findViewById(R.id.img01);
        //把三個View布局對象加載到list中，這些就是item的數據
        Mview.add(item_view01);
        Mview.add(item_view02);
        Mview.add(item_view03);


        //初始化指示器位置
        initPosition();

        //把數據傳遞給適配器中，進行數據處理。
        adapter = new ViewPagerAdapter(this,Mview);
        vp.setOnPageChangeListener(new MyPageChangeListener());
        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)/2;// 計算偏移量，自己用筆劃一下就明白了
        Log.i("Text","offsetoffset   "+offset);
    }
    //頁面改變監聽器
    public class MyPageChangeListener implements ViewPager.OnPageChangeListener {
        int one = img_wight+offset*2;// 頁面一到頁面二移動量,他的大小就是屏幕的三分之一
        int two = one * 2;// 頁卡1 -> 頁卡3 偏移量

        @Override
        public void onPageSelected(int arg0) {
            Log.i("Text","oneoneone   "+one);
            //創建一個移動動畫，用來實現滑動效果
            Animation animation = null;
            switch (arg0) {
                case 0:
                //0，1，2對應第一頁，第二頁，第三頁
                //這個的意思就是，你要滑動到0位置
                    if (currIndex == 1) {
                    //從1滑動到0位置
                        animation = new TranslateAnimation(one, 0, 0, 0);
                    } else if (currIndex == 2) {
                    //從2滑動到0位置
                        animation = new TranslateAnimation(two, 0, 0, 0);
                    }
                    break;
                case 1:
                    if (currIndex == 0) {
                    //從0滑動到1位置
                        animation = new TranslateAnimation(0, one, 0, 0);
                    } else if (currIndex == 2) {
                     //從2滑動到1位置
                        animation = new TranslateAnimation(two, one, 0, 0);
                    }
                    break;
                case 2:
                    if (currIndex == 0) {
                      //從0滑動到2位置
                        animation = new TranslateAnimation(0, two, 0, 0);
                    } else if (currIndex == 1) {
                     //從1滑動到2位置
                        animation = new TranslateAnimation(one, two, 0, 0);
                    }
                    break;
            }
            currIndex = arg0;
            animation.setFillAfter(true);// True:圖片停在動畫結束位置
            animation.setDuration(300);//
            img01.startAnimation(animation);
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    }
}

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

    public ViewPagerAdapter(MainActivity mainActivity, List 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),0);
        return viewdata.get(position);
    }

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

* 那怎麼滑動，我大概說下。

滑動的方法上面已經說過了（x軸起點,x軸滑動的終點,y起點,y軸滑動位置的終點）

如果現在從第一頁滑動，因為一共就三個頁面。
第一頁滑動到第二頁，用到的動畫是TranslateAnimation（0，one（就是屏幕的三分之一），0，0）
從第二頁滑動到第三頁的位置第二頁就是TranslateAnimation（one,two(屏幕的三分之二位置),0,0）;

我在dome中也寫了一個水平滑動的類，布局如下：

代碼如下：

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AnimationSet;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by ENZ on 2016/9/30.
 */
public class DomeActivity extends Activity {
    private ImageView headimg_iv;
    private TextView login_tv_login;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.animation);
        headimg_iv = (ImageView)findViewById(R.id.login_iv);
        login_tv_login = (TextView)findViewById(R.id.tv_login);
        login_tv_login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                test();
            }
        });
    }

    /*
  * 1.Alpha：透明度改變效果
  *2.Scale：縮放效果
  *3.Rotate：旋轉效果
  *4.Translate:移動效果
  * */
    private void test() {
        AnimationSet set = new AnimationSet(true);
        set.setFillAfter(true);
        // (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
        TranslateAnimation translate = new TranslateAnimation(0,360,0,0);
        translate.setDuration(1000);
        translate.setFillAfter(true);
        set.addAnimation(translate);
        headimg_iv.startAnimation(set);
    }
}

最後記得把清單文件中的改下