CirclePageIndicator

KO | EN

gitlite — search

#javascript #python #llm #go #machine-learning #deep-learning #linux #windows #awesome #cli #kubernetes #vue #ios #mcp

CirclePageIndicator

(★ 11)

No description available.

CirclePageIndicator Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 简介 #
一个简单的ViewPager圆点指示器自定义控件示例

![](https://raw.githubusercontent.com/uncleleonfan/CirclePageIndicator/master/img/circle_page_indicator.gif)

# 1. 初始化ViewPager #
在MainActivity中调用initView方法初始化ViewPager。

private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.vp);
        mViewPager.setAdapter(mPagerAdapter);
    }

private PagerAdapter mPagerAdapter = new PagerAdapter() {
        @Override
        public int getCount() {
            return mDataList.length;
        }

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

@Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = new ImageView(MainActivity.this);
            imageView.setImageResource(mDataList[position]);
            container.addView(imageView);
            return imageView;
        }

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

# 2. 创建CirclePagerIndicator #
	public class CirclePageIndicator extends View {
	
	    public CirclePageIndicator(Context context) {
	        this(context, null);
	    }
	
	    public CirclePageIndicator(Context context, @Nullable AttributeSet attrs) {
	        super(context, attrs);
	        init();
	    }
	}
	
	//将自定义控件CirclePageIndicator放入布局中
	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout
	    xmlns:android="http://schemas.android.com/apk/res/android"
	    xmlns:app="http://schemas.android.com/apk/res-auto"
	    xmlns:tools="http://schemas.android.com/tools"
	    android:layout_width="match_parent"
	    android:layout_height="180dp"
	    tools:context="com.itheima.circlepageindicator.MainActivity">
	
	    <android.support.v4.view.ViewPager
	        android:id="@+id/vp"
	        android:layout_width="match_parent"
	        android:layout_height="180dp"/>
	
	    <com.itheima.circlepageindicator.CirclePageIndicator
	        android:id="@+id/indicator"
	        android:layout_width="200dp"
	        android:layout_height="20dp"
	        android:layout_alignParentBottom="true"
	        android:layout_marginBottom="10dp"
	        android:layout_centerHorizontal="true"/>
	</RelativeLayout>

# 3. 关联ViewPager #

private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.vp);
        mViewPager.setAdapter(mPagerAdapter);
        mCirclePageIndicator = (CirclePageIndicator) findViewById(R.id.indicator);
        mCirclePageIndicator.setViewPager(mViewPager);
    }

# 4. CirclePageIndicator测量 #
![](https://raw.githubusercontent.com/uncleleonfan/CirclePageIndicator/master/img/dot.png)

//点的半径
    private int mDotRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics());
    //点与点的间隔
    private int mDotGap = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics());

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int count = mViewPager.getAdapter().getCount();
        int width =  2 * mDotRadius * count + (count - 1) * mDotGap;
        int height = 2 * mDotRadius;
        setMeasuredDimension(width, height);
    }

# 5. 绘制不动点 #
    @Override
    protected void onDraw(Canvas canvas) {
        //点与点之间圆心的距离
        int dotDistance = mDotGap + 2 *  mDotRadius;
        //循环遍历不动点
        for (int i = 0; i < mViewPager.getAdapter().getCount(); i++) {
            float cx = mDotRadius + i * dotDistance;
            float cy = mDotRadius;
            mDotPaint.setColor(mNormalColor);
            canvas.drawCircle(cx, cy, mDotRadius, mDotPaint);
        }
    }

# 6. 绘制动点 #
## 获取ViewPager滚动的位置和滚动的比例 ##
    private ViewPager.OnPageChangeListener mOnPageChangeListener = new ViewPager.OnPageChangeListener() {

@Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            mPosition = position;
            mPositionOffset = positionOffset;
            invalidate();
        }

@Override
        public void onPageSelected(int position) {

}

@Override
        public void onPageScrollStateChanged(int state) {

}
    };

## 计算出动点位置并绘制 ##
    @Override
    protected void onDraw(Canvas canvas) {
		........
        //绘制动点
        mDotPaint.setColor(mSelectedColor);
        float mMoveCx = mDotRadius + mPosition * dotDistance + dotDistance * mPositionOffset;
        float mMoveCy = mDotRadius;
        canvas.drawCircle(mMoveCx, mMoveCy, mDotRadius, mDotPaint);
    }

CirclePageIndicator

CirclePageIndicator Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

CirclePageIndicator

CirclePageIndicator Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README