zoukankan      html  css  js  c++  java
  • 利用Viewpager制作滚动游标效果

    由之前几篇文章的了解,我懂得了图片的各种变换效果,和动画的效果,因此我做了下面的游标效果

    附上代码:

    activity:

    package com.example.ui;
    
    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.os.Parcelable;
    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.KeyEvent;
    import android.view.LayoutInflater;
    import android.view.MotionEvent;
    import android.view.View;
    import android.view.animation.Animation;
    import android.view.animation.TranslateAnimation;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    import com.example.testforrun.R;
    import com.example.testforrun.R.drawable;
    import com.example.testforrun.R.id;
    import com.example.testforrun.R.layout;
    
    public class SimpleViewPagerActivity extends Activity{
        private ViewPager mPager;//页卡内容
        private List<View> listViews; // Tab页面列表
        private ImageView cursor;// 动画图片
        private TextView t1, t2, t3;// 页卡头标
        private int offset = 0;// 动画图片偏移量
        private int currIndex = 0;// 当前页卡编号
        private int bmpW;// 动画图片宽度
        
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            // TODO Auto-generated method stub
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_viewpager);
            InitTextView();
            InitImageView();
            InitViewPager();
    //        initEvent();    
            
        }
        private void initEvent() {
            cursor.setOnClickListener(new View.OnClickListener() {
                
                @Override
                public void onClick(View v) {
                    
                }
            });
            cursor.setOnTouchListener(new View.OnTouchListener() {
                
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    
                    return false;
                }
            });
            cursor.setOnKeyListener(new View.OnKeyListener() {
                
                @Override
                public boolean onKey(View v, int keyCode, KeyEvent event) {
                    switch (keyCode) {
                    case KeyEvent.ACTION_DOWN:
                        
                        break;
                    case KeyEvent.ACTION_UP:
                        
                        break;
                    case KeyEvent.ACTION_MULTIPLE:
                        
                        break;
                    default:
                        break;
                    }
                    return false;
                }
            });
        }
        /**
         * 初始化头标
    */
        private void InitTextView() {
            t1 = (TextView) findViewById(R.id.text1);
            t2 = (TextView) findViewById(R.id.text2);
            t3 = (TextView) findViewById(R.id.text3);
    
            t1.setOnClickListener(new MyOnClickListener(0));
            t2.setOnClickListener(new MyOnClickListener(1));
            t3.setOnClickListener(new MyOnClickListener(2));
        }
        /**
         *初始化动画
         */
        private void InitImageView() {
            cursor = (ImageView) findViewById(R.id.cursor);
            //获取图片宽度
            bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher)
                    .getWidth();
            //手机的外观机构工具,外观度量工具
            DisplayMetrics dm = new DisplayMetrics();
            getWindowManager().getDefaultDisplay().getMetrics(dm);
            //
            int screenW = dm.widthPixels;// 获取分辨率宽度
            offset = (screenW / 3 - bmpW) / 2;// 计算偏移量
            //3*3矩阵类
            Matrix matrix = new Matrix();
            matrix.postTranslate(offset, 0);
            cursor.setImageMatrix(matrix);// 设置动画初始位置
        }
        /**
         * 头标点击监听
         */
        public class MyOnClickListener implements View.OnClickListener {
            private int index = 0;
    
            public MyOnClickListener(int i) {
                index = i;
            }
    
            @Override
            public void onClick(View v) {
                mPager.setCurrentItem(index);
            }
        };
        /**
         * 初始化ViewPager
    */
        private void InitViewPager() {
            mPager = (ViewPager) findViewById(R.id.vPager);
            listViews = new ArrayList<View>();
            LayoutInflater mInflater = getLayoutInflater();
            listViews.add(mInflater.inflate(R.layout.activity_test1, null));
            listViews.add(mInflater.inflate(R.layout.activity_test2, null));
            listViews.add(mInflater.inflate(R.layout.activity_test3, null));
            mPager.setAdapter(new MyPagerAdapter(listViews));
            mPager.setCurrentItem(0);
            mPager.setOnPageChangeListener(new MyOnPageChangeListener());
        }
        
        /**
         * ViewPager适配器
         */
        public class MyPagerAdapter extends PagerAdapter {
            public List<View> mListViews;
    
            public MyPagerAdapter(List<View> mListViews) {
                this.mListViews = mListViews;
            }
            /**
             * 将page的view从父viewgroup中丢弃,参数分别为父view、要丢弃的子view在page中的position、子view
             */
            @Override
            public void destroyItem(View arg0, int arg1, Object arg2) {
                ((ViewPager) arg0).removeView(mListViews.get(arg1));
            }
            /**
             * 当全部page的view初始化完毕,即instantiateItem()执行完
             */
            @Override
            public void finishUpdate(View arg0) {
            }
            /**
             * viewpager的页数
             */
            @Override
            public int getCount() {
                return mListViews.size();
            }
            /**
             * 适配器中核心的方法,将每个page的view加到viewgroup中,该方法在finishUpdate(View container)方法执行前必须全部完成。
             */
            @Override
            public Object instantiateItem(View arg0, int arg1) {
                ((ViewPager) arg0).addView(mListViews.get(arg1), 0);
                return mListViews.get(arg1);
            }
            /**
             * 将每页与一个特殊的key联系起来。通过instantiateItem(View arg0, int arg1)返回的对象与当页的view进行比较
             * Determines whether a page View is associated with a specific key object
             * as returned by {@link #instantiateItem(ViewGroup, int)}. This method is
             * required for a PagerAdapter to function properly.
             */
            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                return arg0 == (arg1);
            }
    
            /**
             * Restore any instance state associated with this adapter and its pages
             * that was previously saved by {@link #saveState()}.
             *    恢复任何 通过saveState()方法存下状态信息并且与此适配器及其相关页面有关的实例
             * @param state State previously saved by a call to {@link #saveState()}
             * @param loader A ClassLoader that should be used to instantiate any restored objects
             */
            @Override
            public void restoreState(Parcelable arg0, ClassLoader arg1) {
            }
    
            /**
             * Save any instance state associated with this adapter and its pages that should be
             * restored if the current UI state needs to be reconstructed.
             */
            @Override
            public Parcelable saveState() {
                return null;
            }
    
            @Override
            public void startUpdate(View arg0) {
            }
        }
        
        
        /**
         * 页卡切换监听
         */
        public class MyOnPageChangeListener implements OnPageChangeListener {
    
            int one = offset * 2 + bmpW;// 第一页到第二页的偏移量
            int two = one * 2;// 第一页到第三页的偏移量
    
            @Override
            public void onPageSelected(int arg0) {
                Animation animation = null;
                switch (arg0) {//判断要翻到哪一页
                //如果要翻到第一页
                case 0:
                    if (currIndex == 1) {
                        //如果翻动前的页号为第二页,
                        animation = new TranslateAnimation(one, 0, 0, 0);
                    } else if (currIndex == 2) {
                        animation = new TranslateAnimation(two, 0, 0, 0);
                    }
                    break;
                case 1:
                    //如果要翻到第二页
                    if (currIndex == 0) {
                        animation = new TranslateAnimation(offset, one, 0, 0);
                    } else if (currIndex == 2) {
                        animation = new TranslateAnimation(two, one, 0, 0);
                    }
                    break;
                case 2:
                    //如果要翻到第三页
                    if (currIndex == 0) {
                        animation = new TranslateAnimation(offset, two, 0, 0);
                    } else if (currIndex == 1) {
                        animation = new TranslateAnimation(one, two, 0, 0);
                    }
                    break;
                }
                currIndex = arg0;
                animation.setFillAfter(true);//图片停在动画结束位置
                animation.setDuration(300);
                cursor.startAnimation(animation);//imageView的各种动画的方法都需要参考开始点,开始点就是imageView初始化完的位置
            }
    
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }
    
            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        }
    }
    View Code

    布局文件:

    三个基本一样的文件,viewgroup的颜色不同而已。

    仅贴上activity_test1.xml

    <RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin">
    
       <LinearLayout 
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:background="#123123"
           ></LinearLayout>
    
    </RelativeLayout>
    View Code

    其中关于偏移量的图示:

  • 相关阅读:
    齐次和线性
    数组指针/指针数组
    坐标转换矩阵
    【转】GMM与K-means聚类效果实战
    利用虚函数实现多态的方式:动态绑定
    类型限定符volatile
    《剑指offer》查找二维数组内元素 c++
    windows下使用命令行编译、链接C++源文件
    关于该博客的美化
    vimium快捷键修改
  • 原文地址:https://www.cnblogs.com/could-deng/p/5033278.html
Copyright © 2011-2022 走看看