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();

}

}

}

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

以上是 Android实现引导页的圆点指示器 的全部内容, 来源链接: utcz.com/p/243651.html

回到顶部