ViewPager的翻页动画_android viewpager 翻页动画-程序员宅基地

技术标签: android  翻页动画  viewpager  Android  

  1. ViewPager的简介和作用
    ViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view
    1)ViewPager类直接继承了ViewGroup类,所有它是一个容器类,可以在其中添加其他的view类。
    2)ViewPager类需要一个PagerAdapter适配器类给它提供数据。
    3)ViewPager经常和Fragment一起使用,并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

本文实现ViewPager实现翻页动画,并且下方圆点表示指示当前显示第几页
翻页动画以及红点指示功能

  1. activity的代码如下:

public class WelGuideActivity extends AppCompatActivity {
    

    private ViewPager viewPager;
    private List<ImageView> ivs;
    private LinearLayout ll_guide_points;
    private ImageView iv_point_red;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_wel_guide);
        getSupportActionBar().hide();
        init();
    }

    private void init() {
        viewPager=(ViewPager) findViewById(R.id.pager);
        ll_guide_points=(LinearLayout) findViewById(R.id.ll_guide_points);
        iv_point_red=(ImageView) findViewById(R.id.iv_point_red);
        //准备数据
        initData();
        // 设置适配器
        viewPager.setAdapter(new QuickPageAdapter<ImageView>(ivs));
        viewPager.addOnPageChangeListener(new MyOnPageChangeListener());
    }

    private void initData() {
        int[] imgIds=new int[]{R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3};
        ivs=new ArrayList<ImageView>();
        for (int i=0;i<imgIds.length;i++){
            ImageView iv=new ImageView(getApplicationContext());
            iv.setBackgroundResource(imgIds[i]);
            ivs.add(iv);

            //创建灰点
            ImageView point=new ImageView(getApplicationContext());
            point.setBackgroundResource(R.drawable.guide_point_normal);
            // 设置大小
            LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(30,30);
            if(i!=0){
                params.leftMargin=30;
            }
            point.setLayoutParams( params);

            ll_guide_points.addView(point);
        }
    }



    class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

        //position 页数,从0 开始,positionOffsetPixels 移动的像素,positionOffset 移动的像素占屏幕宽度的比例
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            Log.d("Tag",position+"   "+positionOffset+"   "+positionOffsetPixels);
            int redPointX=(int) (positionOffset+position)*60;
            // 移动红点,通过修改左边距 30+30=60
            RelativeLayout.LayoutParams params=(RelativeLayout.LayoutParams) iv_point_red.getLayoutParams();
            params.leftMargin=redPointX;
            iv_point_red.setLayoutParams(params);
        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }
}
  1. 为了简化ViewPager的使用,所以对进行了PagerAdapter封装,以后可根据需要进行调整
public class QuickPageAdapter<T extends View> extends PagerAdapter {
    
    private List<T> mList;

    public QuickPageAdapter(List<T> mList) {
        this.mList = mList;
    }

    @Override
    public int getCount() {
        return mList.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return object == view;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mList.get(position));
        return mList.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mList.get(position));
    }
}

简化之后,使用它,这样不用每次都写个适配器
List views = new ArrayList();

mViewPager.setAdapter(new QuickPageAdapter(views));

  1. 至于红点和灰点,为Drawable下的shape文件

红点颜色为#f00, 灰点为@android:color/darker_gray

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#f00" />
</shape>
  1. Activity的布局内容如下
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_wel_guide"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_height="match_parent"
        android:layout_width="match_parent"/>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp">
        <LinearLayout
            android:id="@+id/ll_guide_points"
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <ImageView
            android:id="@+id/iv_point_red"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/guide_point_red"/>
    </RelativeLayout>


</RelativeLayout>

6.上述就实现了翻页动画和圆点指示功能,但是有一点需要注意一下。

  1. 红点指示当前显示的是哪一页,原理其实是使用id为iv_point_red的ImageView来覆盖ll_guide_points中三个灰点的其中一个,第一页则覆盖第一个,第二页则覆盖第二个,以此类推。
  2. 在Activity的布局文件中,iv_point_red的宽和高设置为10dp,在代码中我将灰点设置为了30,经研究此处的单位应该为px, 所以说灰点为30px,dp和px的关系如下
    **dp是虚拟像素,在不同的像素密度的设备上会自动适配,比如:
    在320x480分辨率,像素密度为160,1dp=1px
    在480x800分辨率,像素密度为240,1dp=1.5px
    计算公式:1dp*像素密度/160 = 实际像素数
    px(像素):屏幕上的点.
    dp(与密度无关的像素):一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px.**
  3. 我在分辨率为1920*1080 的手机上运行,刚好10dp对等30px,所以才恰好覆盖。注意美观度。
  4. 所以,在代码中我们应该做一个适配,即把我们知道的dp(在布局文件中已经定义)转成需要的px在代码中使用,可以调用如下方法:
private int dp2px(int dp){
        // px=dp*屏幕的密度比
        float desity=getResources().getDisplayMetrics().density; //屏幕的密度比
        int px= (int) (dp*desity+0.5f);
        return px;
}

关于ViewPager的深入学习可参考大神们写的一些博客:
http://www.jianshu.com/p/e5abbda4a71c ViewPager 全面剖析及使用详解

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/vili_sky/article/details/70849980

智能推荐

c# 调用c++ lib静态库_c#调用lib-程序员宅基地

文章浏览阅读2w次,点赞7次,收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加 外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案,在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建:添加Visual C++ , Win32 项目这......_c#调用lib

deepin/ubuntu安装苹方字体-程序员宅基地

文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体,挺好看的。注重颜值的网站都会使用,例如知乎:font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang

html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地

文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--action,当提交表单时,向何处发送表单中的数据,地址可以是相对地址也可以是绝对地址--><!--method将表单中的数据传送给服务器处理,get方式直接显示在url地址中,数据可以被缓存,且长度有限制;而post方式数据隐藏传输,_html表单的处理程序有那些

PHP设置谷歌验证器(Google Authenticator)实现操作二步验证_php otp 验证器-程序员宅基地

文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证(即Google Authenticator服务)后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器

【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地

文章浏览阅读4.3k次,点赞5次,收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距

docker — 容器存储_docker 保存容器-程序员宅基地

文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节,实现了多层数据的堆叠,为用户 提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制(CoW)策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的,不建议用于生成环境。_docker 保存容器

随便推点

网络拓扑结构_网络拓扑csdn-程序员宅基地

文章浏览阅读834次,点赞27次,收藏13次。网络拓扑结构是指计算机网络中各组件(如计算机、服务器、打印机、路由器、交换机等设备)及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式,也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn

JS重写Date函数,兼容IOS系统_date.prototype 将所有 ios-程序员宅基地

文章浏览阅读1.8k次,点赞5次,收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时,通常的做法是:new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的,而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠,也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑,需要做一些额外的特殊处理,笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数,一劳永逸,避免每次ne_date.prototype 将所有 ios

如何将EXCEL表导入plsql数据库中-程序员宅基地

文章浏览阅读5.3k次。方法一:用PLSQL Developer工具。 1 在PLSQL Developer的sql window里输入select * from test for update; 2 按F8执行 3 打开锁, 再按一下加号. 鼠标点到第一列的列头,使全列成选中状态,然后粘贴,最后commit提交即可。(前提..._excel导入pl/sql

Git常用命令速查手册-程序员宅基地

文章浏览阅读83次。Git常用命令速查手册1、初始化仓库git init2、将文件添加到仓库git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,不处理untracked的文件git add -A # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,包括untracked的文件...

分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120-程序员宅基地

文章浏览阅读202次。分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120

【C++缺省函数】 空类默认产生的6个类成员函数_空类默认产生哪些类成员函数-程序员宅基地

文章浏览阅读1.8k次。版权声明:转载请注明出处 http://blog.csdn.net/irean_lau。目录(?)[+]1、缺省构造函数。2、缺省拷贝构造函数。3、 缺省析构函数。4、缺省赋值运算符。5、缺省取址运算符。6、 缺省取址运算符 const。[cpp] view plain copy_空类默认产生哪些类成员函数

推荐文章

热门文章

相关标签