ViewPager结合自定义View产生滑动pager下方有效圆点变动显示的效果

最新推荐文章于 2021-05-27 11:41:19 发布

原创最新推荐文章于 2021-05-27 11:41:19 发布 · 854 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #viewpager #小圆点

本文介绍了一种自定义ViewPager指示器的方法，通过创建ClumsyIndicator类并实现绘制不同状态的小圆点来指示ViewPager的当前页。文章详细展示了ClumsyIndicator的实现代码，包括XML布局文件配置和Java类的编写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.布局文件

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
             tools:showIn="@layout/pf_layout">

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

        <app.coolwhether.com.duitang_16_7_15.ui.ClumsyIndicator
            android:id="@+id/indicator"
            android:layout_gravity="bottom|center_horizontal"
            android:layout_marginBottom="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

</FrameLayout>

2.自定义的View

package app.coolwhether.com.duitang_16_7_15.ui;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;

import app.coolwhether.com.duitang_16_7_15.R;

/**
 * Created by Administrator on 2016/8/13.
 */
public class ClumsyIndicator extends View {
    private int mCount;
    private int mSelectedItem = 0;
    private float mRadius;
    private float mSelectedRadius;
    private float mSpace;
    private Paint mPaint;
    private static final String TAG = "ClumsyIndicator";

    public ClumsyIndicator(Context context) {
        //调用下面两个参数的构造函数
        this(context,null);
    }

    public ClumsyIndicator(Context context, AttributeSet attrs) {
        //调用下面三个参数的构造函数
        this(context, attrs,0);
    }

    public ClumsyIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setSize();
        initPaint();
    }

    private void setSize(){
        DisplayMetrics metrics = getResources().getDisplayMetrics();
        mRadius = 2 * metrics.density;
        mSelectedRadius = 3 * metrics.density;
        mSpace = 12 * metrics.density;
    }

    private void initPaint(){
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(getResources().getColor(R.color.white));
        mPaint.setStyle(Paint.Style.FILL);
    }

    public void setIndicatorCount(ViewPager viewPager){
        mCount = viewPager.getAdapter().getCount();
        //Log.e(TAG, "setIndicatorCount: mCount---"+mCount );
        invalidate();
    }
//使得小圆点跟随Viewpager移动
    public void setmSelectedItem(int position){
        mSelectedItem = position;
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //是setMeasuredDimension，不是从父类继承的方法
        setMeasuredDimension(measureWidth(widthMeasureSpec), measureHeight(heightMeasureSpec));
    }

    private int measureHeight(int heightMeasureSpec){
        int specMode = MeasureSpec.getMode(heightMeasureSpec);
        int specSize = MeasureSpec.getSize(heightMeasureSpec);
        int result;
        if (specMode != MeasureSpec.EXACTLY){
            result = getPaddingBottom() + getPaddingTop() + (int)(mSelectedRadius * 2);
            if (specMode == MeasureSpec.AT_MOST){
                result = Math.min(result,specSize);
            }
        }else {
            result = specSize;
        }
        return result;
    }

    private int measureWidth(int widthMeasureSpec){
        int specMode = MeasureSpec.getMode(widthMeasureSpec);
        int specSize = MeasureSpec.getSize(widthMeasureSpec);
        int result;
        if (specMode != MeasureSpec.EXACTLY){
            result = getPaddingLeft() + getPaddingRight() + (int)(mSpace * mCount);
            if (specMode == MeasureSpec.AT_MOST){
                result = Math.min(result,specSize);
            }
        }else {
            result = specSize;
        }
        return result;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float y = getHeight() / 2;
        float x = mSpace / 2;
        for (int i = 0;i < mCount;i++){
            if (i != mSelectedItem){
                canvas.drawCircle(x,y,mRadius,mPaint);
            }else {
                canvas.drawCircle(x,y,mSelectedRadius,mPaint);
            }
            x += mSpace;
        }
    }
}

3.在为viewpager添加了adapter后，加上

indicator.setIndicatorCount(pagerImages);