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

智能推荐

PB 的 Inet对象_pb inet撖寡情-程序员宅基地

文章浏览阅读3.5k次。我一直以为PB不能直接访问网页的东西,今天才知道是我落伍了,有个INET对象,要好好研究一下了_pb inet撖寡情

【优化求解】基于蚁群算法求解考虑航班延误恢复经济损失优化问题附Matlab代码-程序员宅基地

文章浏览阅读886次,点赞21次,收藏23次。航班延误是航空运输中常见的现象,会对航空公司和乘客造成巨大的经济损失。为了减少航班延误带来的经济损失,本文提出了一种基于蚁群算法的航班延误恢复经济损失优化模型。该模型考虑了航班延误的各种因素,包括延误时间、延误原因、乘客数量和航班类型等。通过蚁群算法的优化求解,可以得到航班延误恢复经济损失的最佳方案,从而最大限度地减少航班延误带来的经济损失。

支付宝数据架构师网站日志-程序员宅基地

文章浏览阅读375次。http://dbanotes.net/

VSCode 常用设置项_vscode 修改文件打开个数-程序员宅基地

文章浏览阅读1.1k次。代码编辑工具VSCode 常用设置项 // VScode主题配置 "editor.tabSize": 2, "editor.lineHeight": 24, "editor.renderLineHighlight": "none", "editor.renderWhitespace": "none", "editor.fontFamily": "Consolas", "editor.fontSize": 15, "editor.cursorBlinking": "smooth"_vscode 修改文件打开个数

python no module named pip_解决python “No module named pip”-程序员宅基地

文章浏览阅读133次。CentOS 6 日期 时间,时区,设置修改及时间同步一.时区 显示时区 date --help 获取帮助 date -R date +%z 上面两个命令都可 [root@localhost~]#date-R;date+%z Fri,19O ...开发VR游戏的基本要求由于我对VR技术的兴趣,我特意去网上查找了一下如果要从事VR游戏的开发,程序员要掌握的一些能力和要求.可能不太详细,..._no module named sonar.sonar

springboot启动报错�й���׼ʱ��' is unrecognized or represents more than one time zone-程序员宅基地

文章浏览阅读1.1k次。mysql> set global time_zone='+8:00';Query OK, 0 rows affected (0.00 sec)mysql>

随便推点

Ubuntu 20.04 + mysql8 安装以及配置大小写不敏感_ubuntu mysql8 配置大小写敏感-程序员宅基地

文章浏览阅读533次,点赞10次,收藏10次。重新安装mysql时,会提示本地已经有mysqld.cnf这个配置文件,让你选使用下载来的包里的配置文件还是你本地的。记得选本地的,不要让他覆盖回去。mysql8在初始化后不允许配置大小写敏感。_ubuntu mysql8 配置大小写敏感

微信小程序有多香?-程序员宅基地

文章浏览阅读153次。10年前打广告,商家会放上联系方式和网站网址,10年后打广告,取而代之的确是公众号二维码或者客服二维码。现如今微信已经成为我们日常生活中不可或缺的工具。俗话说有人的地方就有江湖,微信小程序应运而生。它凭借 “即用即走、不需要下载、不占内存 ”的优势被大众喜爱,像这种“饕餮盛宴” 势必会受到各行业的关注。今天大牛哥就针对小程序的诸多问题和大家一起交流探讨一波!一、微信小程序是什么?小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用,也体现了“用完即

蓝牙通信,完整的通信流程-程序员宅基地

文章浏览阅读3.1k次。无线通信方案,有三种方案可以实施: 1、NFC 2、蓝牙 3、WIFI 下面是对这三个知识点做的一个总结, 参照对比可以选择合适的方案。而本章着重讲的蓝牙之间通信。 首先介绍一下蓝牙的两个广播Receiver。 第一个:蓝牙状态的改变是通过广播接收到的。 // 注册蓝牙状态接收广播 ..._蓝牙通信流程

8086汇编语言入门之HelloWorld_汇编语言如何看字符串“hello world”所在的段地址以及段内起始地址?-程序员宅基地

文章浏览阅读1.3k次,点赞2次,收藏16次。文章目录一.学习汇编的目的二.汇编仿真软件工具推荐三.了解基本指令段四.汇编的执行【调用debug命令】绪论: 汇编语言是一门面向机器编程的语言,与面向过程,面向对象的高级编程语言不同;编程者只需要调用模块方法就行,不需要关心寄存器与内存的分配问题,但是汇编语言就需要编程者多关心这类问题了。一.学习汇编的目的 ..._汇编语言如何看字符串“hello world”所在的段地址以及段内起始地址?

SAP_ABAP_数据治理_物料主数据_基本视图_物料名称重复_abap 修改物料主数据工厂视图-程序员宅基地

文章浏览阅读413次,点赞7次,收藏7次。问题:物料名称重名,影响正常下单等等... ...1 通过abap脚本找出重复的数据。_abap 修改物料主数据工厂视图

对逆波兰式的简单理解_逆波兰式最简单三个步骤-程序员宅基地

文章浏览阅读386次,点赞10次,收藏9次。前言:人是比较喜欢中缀式的,因为它符合人们的运算习惯;但是机器是不喜欢中缀式,它更喜欢后缀式,也就是逆波兰式。逆波兰式的理解:1.逆波兰式: ab35c-*+=2.计算机计算过程:策略:计算机从左到右进行扫描,遇到操作数入栈,遇到运算符,最靠近栈顶的两个元素出栈。 图示: 1.遇到操作数入栈 2.遇到运算符出栈注意:逆波兰式的符号顺序就是运算顺序。中缀式快速转化成逆波兰式:步骤:1.根据运算优先级加下划线2.去掉步骤1中所..._逆波兰式最简单三个步骤

推荐文章

热门文章

相关标签