利用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) {
        }
    }
}

布局文件:

三个基本一样的文件,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>

其中关于偏移量的图示:

时间: 2024-10-06 07:13:27

利用Viewpager制作滚动游标效果的相关文章

Unity手机开发之巧妙利用纹理制作滚动背景

巧妙利用纹理制作滚动背景 本次学习的主要知识点有以下: 1.如何创建滚动背景. 可以利用材质球,让其不断地偏移纹理,就可以达到这样的效果. 2.time 和deltaTime的区别[狗刨学习网] Time.time是表示游戏从开始到现在的时间,是一个增长值. Time.deltaTime是表示机器上帧与帧之间的时间间隔,是一个固定值. 使用方法是创建一个材质球,贴上我们想要的背景,让Panel附上材质球,调整好摄像机的位置,将脚本挂在我们之前创建的Panel上. using UnityEngin

利用ViewPager实现3D画廊效果及其图片加载优化

前言 对于ViewPager,相信大家都已经很熟悉了,在各种切换场景比如Fragment切换.选项卡的切换或者顶部轮播图片等都可以用ViewPager去实现.那么本篇文章带来ViewPager的一种实现效果:3D画廊.直接上图来看: 从上面的图我们可以看出,整个页面分成三个部分,中间的是大图,正中地显示给用户:而两边的是侧图,而这两幅图片又有着角度的旋转,与大图看起来不在同一平面上,这就形成了3D效果.接着拖动页面,侧面的图慢慢移到中间,这个过程也是有着动画的,包括了图片的旋转.缩放和平移.在欣

利用OpacityMask制作打洞效果

起因 项目上存在一个连线功能,在设计的原型中,在连线中间文字上下各有15像素的空白.接手的同事觉得没思路,问我能不能在不影响连线后面的背景情况下解决该问题.我就抽了点时间给他写了个Demo.回家后趁热打铁,重新写了个Demo,添加和完善了些功能.下面是效果图: 代码实现 OpacityMask 在最开始看到效果图的时候,我就想到利用OpacityMask来解决问题.可能这个属性平时很多朋友都没注意到,因为一般情况下用Opacity就足够了. OpacityMask定义在UIElement中,类型

利用css3制作毛玻璃的效果

忙里偷闲,最近又在看许多比较酷炫的效果.现在基于jquery的插件比较多,但是很多插件的兼容性不是太好,所以原生的才是王道.在日常当中,毛玻璃已经不常见了,那是一个很久远年代的东西了.诺,下面就是毛玻璃: 哈哈,不闲扯了,接下来不如正题吧,先看一下终极效果: 嗯,好了,,开始我们的步骤吧: 第一步:进行页面的基本搭建: 我在body上设置了一张大大的背景图,然后中间部分是一个div,html代码如下: <body> <div > iPhone 7 dramatically impr

利用Clip制作打洞效果

起因 如上篇博文所说,连线原型需要在中间文字上下各留15像素的空白.设计师完成原型之后,问我有没有办法实现,我说,我能想到两种实现方式.其中一种就是上篇博文所说的OpacityMask.第二种就是使用Clip了.下面是效果图: 代码实现 Clip Clip定义在UIElement中,类型为Geometry .MSDN中的解释是获取或设置用于定义元素内容边框的几何图形.实际上不光可以在边框处留住空白,在UI元素里面留出空白也是可以的,只要定义好相关的形状. 矩形空洞 在一个大矩形中去除一个小矩形就

自定义View 之利用ViewPager 实现画廊效果(滑动放大缩小)

自定义View 之利用ViewPager 实现画廊效果(滑动放大缩小) 转载请标明出处: http://blog.csdn.net/lisdye2/article/details/52315008 本文出自:[Alex_MaHao的博客] 项目中的源码已经共享到github,有需要者请移步[Alex_MaHao的github] 基本介绍 画廊在很多的App设计中都有,如下图所示: 该例子是我没事的时候写的一个小项目,具体源码地址请访问https://github.com/AlexSmille/Y

利用递归 实现UIScrollView无限滚动的效果

项目需求 利用递归 实现UIScrollView无限滚动的效果. 上机试题, #import "ViewController.h" @interface ViewController (){ UIScrollView *mainScroll; BOOL isFinish; int x; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; x=0; isFinish = YES;

利用replaceChild制作简单的吞噬效果【jsDEMO】

[功能说明] 利用replaceChild制作简单的吞噬效果 [HTML代码说明] <ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in"

利用FluidMoveBehavior制作出手机通讯录平滑的效果

最近学习Blend,原来Blend制作动画等效果非常棒.下面演示一下FluidMoveBehavior应用,利用Blend中行为中的FluidMoveBehavior制作出手机通讯录平滑的效果 1.在画布上添加一个ListBox,添加N多个<TextBlock>,如图 2.在ListBox上右键按图指示操作创建副本 3.在模板中选择ItemsPresenter, 4.然后从行为面板中选择FluidMoveBehavior拖放到画板上的ItemsPresenter对象上 5.返回到ListBox