文章詳情頁

Android自定義圓點指示器

瀏覽：24日期：2022-09-18 09:08:48

本文實例為大家分享了Android自定義圓點指示器的具體代碼，供大家參考，具體內容如下

先上效果圖

Android自定義圓點指示器

大概思路就是自定義View 從左至右繪制圓點然后在ViewPager的OnPageChangeListener中設置當前頁面的圓點

下面是代碼

先定義屬性

接下來是自定義的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_unselectedColor,Color.WHITE);typedArray.recycle();totalIndex = DEFAULT_TOTAL_INDEX;currentIndex = DEFAULT_CURRENT_INDEX;paint = new Paint(); }

從TypedArray中獲取自定義的屬性，totalIndex是總的圓點個數，currentIndex是當前頁面的圓點接下來是重寫的OnDraw()方法

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

注釋里的代碼是當頁面可以循環的時候設置的接下來是設置總的圓點個數的方法

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

當刪除圓點的時候如果currentIndex是最后一個讓currentIndex向前移動接下來是重寫的OnMeasure()方法

@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; }

下面是MainActivity的布局代碼，很簡單

下面是MainActivity的代碼

public class MainActivity extends AppCompatActivity { View layout1,layout2,layout3; ViewPager viewPager; Indicator indicator; List<View> 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,null);layout2 = inflater.inflate(R.layout.layout2,null);layout3 = inflater.inflate(R.layout.layout3,null); 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{ @Overridepublic void onPageSelected(int position) { indicator.setCurrentIndex(position);} @Overridepublic void onPageScrollStateChanged(int state) { } @Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } }

ViewPager里添加了三個空頁面然后設置指示器的圓點個數，最后在ViewPager的OnPageChangeListener中設置當前的頁面的圓點。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。

Android

上一條：Android socket如何實現文件列表動態訪問下一條：Android ViewPager小圓點指示器

相關文章：

1. docker鏡像完全卸載的操作步驟2. IntelliJ IDEA導入jar包的方法3. IntelliJ IDEA配置Tomcat服務器的方法4. idea刪除項目的操作方法5. 使用Maven 搭建 Spring MVC 本地部署Tomcat的詳細教程6. idea重置默認配置的方法步驟7. IntelliJ IDEA調整字體大小的方法8. idea打開多個窗口的操作方法9. IntelliJ IDEA安裝插件的方法步驟10. IntelliJ IDEA設置默認瀏覽器的方法

排行榜

					
					docker鏡像完全卸載的操作步驟
IntelliJ IDEA導入jar包的方法
使用Maven 搭建 Spring MVC 本地部署Tomcat的詳細教程
IntelliJ IDEA配置Tomcat服務器的方法
idea刪除項目的操作方法
IntelliJ IDEA恢復刪除文件的方法
IntelliJ IDEA調整字體大小的方法
IntelliJ IDEA設置默認瀏覽器的方法
IntelliJ IDEA安裝插件的方法步驟
idea打開多個窗口的操作方法
Docker 部署 Prometheus的安裝詳細教程
				