Android实现引导页的圆点指示器

在App引导界面通常有引导界面提示小圆点,我们使用一个集成的类 来整体封装实现:

使用的方法:

首先在 XML布局中引入这个自定义的控件:

<FrameLayout 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"
    tools:context="com.chen.weibo.GuideAty">

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

    </android.support.v4.view.ViewPager>

    <com.chen.weibo.PageNumberPoint
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:id="@+id/myPoint"
        android:layout_marginBottom="20dp"
        >
    </com.chen.weibo.PageNumberPoint>

</FrameLayout>

然后在Activity中绑定ViewPager对象

point.addViewPager(viewPager);

下面就是主的UI代码 引入工程即可使用:

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;

import java.util.ArrayList;

/**
 * Class: ViewPager 页码圆点指示器UI组件.
 * author: ChenDeng.
 * Date: 2017-11-8.
 * explain:直接在XML文件中调用,需要在Activity中绑定 ViewPager 对象,使用addViewPager()方法.
 */
public class PageNumberPoint extends LinearLayout {
    private Context context;
    private PagerAdapter adapter;
    private int countPoint = 0;
    private ArrayList<Circle> point;
    private ObjectAnimator scaleX;
    private ObjectAnimator scaleY;

    public PageNumberPoint(Context context) {
        super(context);
        this.context = context;
        initView();
    }

    public PageNumberPoint(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        initView();
    }

    public PageNumberPoint(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        initView();
    }

    private void initView() {
        this.setOrientation(LinearLayout.HORIZONTAL);
        this.setGravity(Gravity.CENTER);
        this.setClickable(false);
    }

    /**
     * 绑定页码
     *
     * @param pager
     */
    public void addViewPager(ViewPager pager) {
        this.adapter = pager.getAdapter();
        addPagerPoint();
        //设置监听器
        pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                setSelectPoint(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }

    private void addPagerPoint() {
        countPoint = adapter.getCount();
        point = new ArrayList<>();

        for (int i = 0; i < countPoint; i++) {
            Circle circle = new Circle(context);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(50, 50);
            params.setMargins(20, 0, 0, 0); //设置外边距
            circle.setLayoutParams(params);
            this.addView(circle);
            point.add(circle);
        }

        point.get(0).setChecked(true);  //默认第一个是选中的
    }

    /**
     * 缩放动画效果
     * @param view
     */
    private void playAnimator(View view){
        scaleX = ObjectAnimator.ofFloat(view,"scaleX",0.0f,1.0f);
        scaleY = ObjectAnimator.ofFloat(view,"scaleY",0.0f,1.0f);
        //通过动画集合组合动画
        AnimatorSet animatorSet =new AnimatorSet();
        //这两个动画同时执行 绑定起来
        animatorSet.play(scaleX).with(scaleY);
        animatorSet.setDuration(300);
        animatorSet.start();
    }

    private void setSelectPoint(int position) {
        point.get(position).setChecked(true);
        //开启动画
        playAnimator(point.get(position));
        for (int i = 0; i < point.size(); i++) {
            if (i == position)
                continue;
            point.get(i).setChecked(false);
        }
    }

    /***************************自定义的小圆点UI组件******************************************/
    public class Circle extends View {
        private float circleRadius = 6.8f;   //默认的圆的半径
        private boolean checked = false;

        public Circle(Context context) {
            super(context);
            initViewSize();
        }

        public Circle(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
            initViewSize();
        }

        public Circle(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            initViewSize();
        }

        private void initViewSize() {
            //推荐使用 宽高 各50dp
            this.setLayoutParams(new ViewGroup.LayoutParams(50, 50));
            this.setClickable(false);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            int verticalCenter = getHeight() / 2;
            int horizontalCenter = getWidth() / 2;
            Paint paint = new Paint();
            paint.setAntiAlias(true);  //防锯齿
            paint.setDither(true);   //防抖动
            paint.setStyle(Paint.Style.FILL_AND_STROKE);

            if (checked) {  //如果是选中状态
                //画圆心填充物
                paint.setColor(Color.WHITE);
                float radius = circleRadius + circleRadius / 2;
                canvas.drawCircle(verticalCenter - (circleRadius / 2), horizontalCenter - (circleRadius / 2), radius, paint);
            } else {
                paint.setColor(Color.rgb(146, 146, 146));
                canvas.drawCircle(verticalCenter, horizontalCenter, circleRadius, paint);
            }
        }

        /**
         * 设置圆的半径
         *
         * @param radius
         */
        public void setCircleRadius(float radius) {
            this.circleRadius = radius;
            invalidate();//重新绘制组件
        }

        /**
         * 设置选择 还是非选择
         *
         * @param checked
         */
        public void setChecked(boolean checked) {
            this.checked = checked;
            invalidate();
        }
    }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件

    最近用到需要无限轮播自动播放的轮播轮播图,网上感觉都有这样那样的问题,于是自己写了一个通用的控件CarouselFigureView. 特点: 1.可以轮播view可以自己定义,不一定是要是ImageView2.指示器默认显示,但是可以隐藏3.可以设置指示器的颜色.间距.大小 4.有基础的可以自己修改代码改变指示器位置,这个应该不难5.可以自己开启和关闭自动轮播,开启轮播的时候可以设置轮播时间间隔,默认3000毫秒 我们先来看看效果图: 然后来看看使用代码 xml代码 <?xml version

  • Android TabLayout设置指示器宽度的方法

    anroid 5.0 Design  v7 包中引用了TabLayout 简单快速的写出属于自己的Tab切换效果 如图所示: 但是正常使用中你发现无法设置tablayout指示器的宽度.查看源码你会发现设计师将指示器的宽度设置成TabView最大的宽度.并且设计师并没有给我们暴漏出接口,这导致有时使用TabLayout无法满足一些产品设计要求,这么好的组件无法使用还需要自定义费时费力.这个时候我们可以通过反射机制拿到TabLayout中的指示器对象对它的宽度进行处理就可以满足我们的要求:具体代码

  • Android ViewPager小圆点指示器

    一个很常用的功能,一个ViewPager会自动滚动,并且有一排小圆点黑和白来指示当前的滚动进度 首先写一个ViewPager的适配器,这里这个适配器为了方便里面的元素全都是ImageView import android.content.Context; import android.os.Handler; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import a

  • Android自定义圆点指示器

    本文实例为大家分享了Android自定义圆点指示器的具体代码,供大家参考,具体内容如下 先上效果图 大概思路就是自定义View 从左至右绘制圆点 然后在ViewPager的OnPageChangeListener中设置当前页面的圆点 下面是代码 先定义属性 <resources> <attr name="selectedColor" format="color"/> <attr name="unselectedColor&qu

  • Android progressbar实现带底部指示器和文字的进度条

    本文实例为大家分享了Android实现带指示器和文字的进度条,供大家参考,具体内容如下 根据项目要求需要实现以下效果: 列出源码: public class TextProgressBar extends LinearLayout { String text; Paint mPaint; private Rect textRect; private Bitmap bitmap; private ProgressBar progressBar; int progress; int proWidth

  • Android自定义ViewPagerIndicator实现炫酷导航栏指示器(ViewPager+Fragment)

    ViewPagerIndicator导航栏指示器运行效果: 实现这个效果,我是看了很多大神写的博客和视频后自己敲的,欢迎指正 github地址:https://github.com/dl10210950/TabViewPagerIndicator 自定义一个ViewPagerIndicator 自定义一个Indicator继承LinearLayout,在构造方法里面设置画笔的一些属性 public ViewPagerIndicator(Context context, AttributeSet

  • Android之IphoneTreeView带组指示器的ExpandableListView效果

    之前实现过一次这种效果的ExpandableListView:http://www.jb51.net/article/38482.htm,带效果比较挫,最近,在参考联系人源码PinnedHeaderListView,以及网上各位大侠的源码,封装了一个效果最好,而且使用最简单的IphoneTreeView,下面先看看效果图:  首先让我们看看封装得比较完善的IphoneTreeView: 复制代码 代码如下: public class IphoneTreeView extends Expandab

  • Android实现仿网易新闻的顶部导航指示器

    我们知道,页面导航器(Navigator)在几乎所有的项目中都会用到,平时大多数时候为了节省时间,都会直接在github上面拿别人的开源项目来用,最近自己在复习自定义View,就尝试封装了一下,源码参考项目PagerSlidingTabStrip 大家先来看一下效果图 基于文字的页面导航器 基于图片的页面导航器 使用方法 主要步骤分为三步 1)在xml文件里面 <com.xujun.viewpagertabindicator.TabPagerIndicator android:id="@+

  • Android之带group指示器的ExpandableListView(自写)

    我们都知道Android缺省的ExpandableListView的group header无法固定在界面上,当向下滚动后,不能对当前显示的那些child 指示出它们归属于哪个group,在网上搜了很多关于仿手机QQ好友分组效果的ExpandableListView,发现都不尽如意,于是乎在别人的基础上改进了一点点,其实原理还是差不多的,只是增加了往上挤出去的动画效果,而且更加简单,只不过还是没有完全到达跟QQ一样的效果,希望有高手能实现更加逼真的效果,下面我们先看看效果图:  我这里没有把Ex

  • Android开发实现的ViewPager引导页功能(动态加载指示器)详解

    本文实例讲述了Android开发实现的ViewPager引导页功能(动态加载指示器).分享给大家供大家参考,具体如下: 先看效果图咯~ 现在几乎每个App都会有引导页,是不是感觉很炫很厉害,所以就想做出来一个学习一下~让自己的App看起来更加的美观~ 现在来分析一下: 这个引导页可以分为俩部分~ 1.小红点--来提醒这是第几页了~ 2."开始体验"这个Button--可以进入主界面,但是要控制这个Button只能在最后一页出现 布局的话使用相对布局~ 那现在来看看布局吧: activi

随机推荐

其他