文章詳情頁

Android自定義圓點指示器

瀏覽：3日期：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. 在layer彈出層中通過ajax返回html拼接字符串填充數據的方法2. 存儲于xml中需要的HTML轉義代碼3. java volatile案例講解4. asp.net core 中的Jwt(Json Web Token)的使用詳解5. 解決Ajax方式上傳文件報錯"Uncaught TypeError: Illegal invocation"6. jsp實現textarea中的文字保存換行空格存到數據庫的方法7. 編寫xml沒有代碼提示的解決方法8. 用xslt將xml解析成xhtml的代碼9. JSP的Cookie在登錄中的使用10. ztree+ajax實現文件樹下載功能

排行榜

					
					java volatile案例講解
IntelliJ IDEA導入項目的方法
jsp實現textarea中的文字保存換行空格存到數據庫的方法
JSP的Cookie在登錄中的使用
javascript實現貪吃蛇小練習
存儲于xml中需要的HTML轉義代碼
ztree+ajax實現文件樹下載功能
解決Ajax方式上傳文件報錯"Uncaught TypeError: Illegal invocation"
asp.net core 中的Jwt(Json Web Token)的使用詳解
用xslt將xml解析成xhtml的代碼
在layer彈出層中通過ajax返回html拼接字符串填充數據的方法
				