Shulou(Shulou.com)05/31 Report--

This article mainly explains the "Android how to customize the dot indicator", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "Android how to customize the dot indicator" bar!

Put up the effect picture first

The general idea is to customize View to draw dots from left to right and then set the dots of the current page in the OnPageChangeListener of ViewPager

Here is the code

Define attributes first

Next is the custom View.

Public class Indicator extends View {private static final int DEFAULT_TOTAL_INDEX = 5; private static final int DEFAULT_CURRENT_INDEX = 0; private static final int DEFAULT_CIRCLE_DISTANCE = 40; private static final int DEFAULT_CIRCLE_RADIUS = 8; private static final int DEFAULT_CIRCLE_SELECTED_RADIUS = 11; private int selectedColor; private int unselectedColor; private int currentIndex; private int totalIndex; private Paint paint; private int startX; private int startSelectedY; private int startY; private int centreX Public Indicator (Context context) {this (context,null);} public Indicator (Context context, AttributeSet attrs) {this (context, attrs,0);} public Indicator (Context context, AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr); TypedArray typedArray = context.getTheme (). ObtainStyledAttributes (attrs,R.styleable.Indicator,defStyleAttr,0) SelectedColor = typedArray.getColor (R.styleable.Indicator_selectedColor, Color.LTGRAY); unselectedColor = typedArray.getColor (R.styleable.indicator unselectedColorRecolor. Where); typedArray.recycle (); totalIndex = DEFAULT_TOTAL_INDEX; currentIndex = DEFAULT_CURRENT_INDEX; paint = new Paint ();}

Get custom attributes from TypedArray. TotalIndex is the total number of dots, and currentIndex is the dots of the current page.

Next is the overridden OnDraw () method

@ Override protected void onDraw (Canvas canvas) {super.onDraw (canvas); centreX = getWidth () / 2; startSelectedY = getHeight () / 2-DEFAULT_CIRCLE_SELECTED_RADIUS; startY = getHeight () / 2-DEFAULT_CIRCLE_RADIUS; if (totalIndex% 2 = = 0) {startX = centreX-(int) (1.0 * (totalIndex-1) / 2 * DEFAULT_CIRCLE_DISTANCE) } else {startX = centreX-totalIndex / 2 * DEFAULT_CIRCLE_DISTANCE;} paint.setAntiAlias (true); paint.setColor (unselectedColor); int tempX = startX; for (int I = 0; I

< totalIndex ; i++ ){ RectF rectF = new RectF(tempX - DEFAULT_CIRCLE_RADIUS,startY, tempX + DEFAULT_CIRCLE_RADIUS,startY + 2 * DEFAULT_CIRCLE_RADIUS); if (i == currentIndex) { paint.setColor(selectedColor); rectF = new RectF(tempX - DEFAULT_CIRCLE_SELECTED_RADIUS,startSelectedY, tempX + DEFAULT_CIRCLE_SELECTED_RADIUS,startSelectedY + 2 * DEFAULT_CIRCLE_SELECTED_RADIUS); } canvas.drawOval(rectF,paint); if (paint.getColor() == selectedColor) paint.setColor(unselectedColor); tempX += DEFAULT_CIRCLE_DISTANCE; } } 因为当前页面的圆点和未选中页面的圆点要设置不同的大小 所以分别设置每个圆点的坐标 然后用for循环绘制圆点 这里有一点要注意 new RectF() 的四个参数分别是圆点外面的矩形的左上角的X,Y和右下角的X,Y 接下来是设置当前页面的圆点的方法 public void setCurrentIndex(int currentIndex){ //if (currentIndex < 0) // currentIndex += totalIndex ; //if (currentIndex >

TotalIndex-1) / / currentIndex% = totalIndex; this.currentIndex = currentIndex; invalidate ();}

The code in the comment is set when the page can be looped

Next is the method of setting the total number of dots

Public void setTotalIndex (int totalIndex) {int oldTotalIndex = this.totalIndex; if (totalIndex < 1) return; if (totalIndex < oldTotalIndex) {if (currentIndex = = totalIndex) currentIndex = totalIndex-1;} this.totalIndex = totalIndex; invalidate ();

When deleting a dot, if currentIndex is the last one to move currentIndex forward

Next is the overridden OnMeasure () method

@ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {setMeasuredDimension (measureWidth (widthMeasureSpec), measureHeight (heightMeasureSpec));} private int measureHeight (int measureSpec) {int result; int specMode = MeasureSpec.getMode (measureSpec); int specSize = MeasureSpec.getSize (measureSpec); int desired = DEFAULT_CIRCLE_SELECTED_RADIUS * 2 + getPaddingBottom () + getPaddingTop () If (specMode = = MeasureSpec.EXACTLY) {result = Math.max (desired,specSize);} else {if (specMode = = MeasureSpec.AT_MOST) {result = Math.min (desired,specSize);} else result = desired;} return result;} private int measureWidth (int measureSpec) {int result Int specMode = MeasureSpec.getMode (measureSpec); int specSize = MeasureSpec.getSize (measureSpec); int desired = (totalIndex-1) * DEFAULT_CIRCLE_DISTANCE + DEFAULT_CIRCLE_SELECTED_RADIUS * 2 + getPaddingLeft () + getPaddingRight (); if (specMode = = MeasureSpec.EXACTLY) {result = Math.max (desired,specSize) } else {if (specMode = = MeasureSpec.AT_MOST) {result = Math.min (desired,specSize);} else result = desired;} return result;}

Here is the layout code for MainActivity. It's very simple.

Here is the code for MainActivity

Public class MainActivity extends AppCompatActivity {View layout1,layout2,layout3; ViewPager viewPager; Indicator indicator; List viewList; @ Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); viewPager = (ViewPager) findViewById (R.id.viewPager); LayoutInflater inflater = getLayoutInflater (); layout1 = inflater.inflate (R.layout.layout1) Layout2 = inflater.inflate; layout3 = inflater.inflate; viewList = new ArrayList (); viewList.add (layout1); viewList.add (layout2); viewList.add (layout3); indicator = (Indicator) findViewById (R.id.indicator); indicator.setTotalIndex (viewList.size ()) PagerAdapter pagerAdapter = new PagerAdapter () {@ Override public int getCount () {return viewList.size ();} @ Override public void destroyItem (ViewGroup container, int position, Object object) {container.removeView (viewList.get (position)) } @ Override public Object instantiateItem (ViewGroup container, int position) {container.addView (viewList.get (position)); return position;} @ Override public boolean isViewFromObject (View view, Object object) {return view = = viewList.get (Integer.parseInt (object.toString ()) }}; viewPager.setAdapter (pagerAdapter); viewPager.setOnPageChangeListener (new PageChangeListener ());} public class PageChangeListener implements ViewPager.OnPageChangeListener {@ Override public void onPageSelected (int position) {indicator.setCurrentIndex (position) } @ Override public void onPageScrollStateChanged (int state) {} @ Override public void onPageScrolled (int position, float positionOffset, int positionOffsetPixels) {}}

Add three empty pages to ViewPager and then set the number of dots for the indicator, and finally set the dots for the current page in the OnPageChangeListener of ViewPager.

Thank you for your reading, the above is the content of "Android how to customize the dot indicator". After the study of this article, I believe you have a deeper understanding of how to customize the dot indicator in Android, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.