Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android組件12—viewpager學習02(帶導航)

Android組件12—viewpager學習02(帶導航)

編輯:關於Android編程

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

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

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

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

第一步首先xml之main布局:



    
        
    



    
    

 

第二步,怎麼在代碼中根據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) {
        }
    }
}
viewPager適配器代碼
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);
    }
}

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

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved