Android實現(xiàn)引導頁的圓點指示器
更新時間:2021年06月16日 14:48:18 作者:精神小伙_奧利給
這篇文章主要為大家詳細介紹了Android實現(xiàn)引導頁的圓點指示器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
在App引導界面通常有引導界面提示小圓點,我們使用一個集成的類 來整體封裝實現(xiàn):
使用的方法:
首先在 XML布局中引入這個自定義的控件:
<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="match_parent" tools:context="com.chen.weibo.GuideAty"> <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/viewPager"> </android.support.v4.view.ViewPager> <com.chen.weibo.PageNumberPoint android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:id="@+id/myPoint" android:layout_marginBottom="20dp" > </com.chen.weibo.PageNumberPoint> </FrameLayout>
然后在Activity中綁定ViewPager對象
point.addViewPager(viewPager);
下面就是主的UI代碼 引入工程即可使用:
import android.animation.AnimatorSet; import android.animation.ObjectAnimator; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.support.annotation.Nullable; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.Gravity; import android.view.View; import android.view.ViewGroup; import android.widget.LinearLayout; import java.util.ArrayList; /** * Class: ViewPager 頁碼圓點指示器UI組件. * author: ChenDeng. * Date: 2017-11-8. * explain:直接在XML文件中調(diào)用,需要在Activity中綁定 ViewPager 對象,使用addViewPager()方法. */ public class PageNumberPoint extends LinearLayout { private Context context; private PagerAdapter adapter; private int countPoint = 0; private ArrayList<Circle> point; private ObjectAnimator scaleX; private ObjectAnimator scaleY; public PageNumberPoint(Context context) { super(context); this.context = context; initView(); } public PageNumberPoint(Context context, @Nullable AttributeSet attrs) { super(context, attrs); this.context = context; initView(); } public PageNumberPoint(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); this.context = context; initView(); } private void initView() { this.setOrientation(LinearLayout.HORIZONTAL); this.setGravity(Gravity.CENTER); this.setClickable(false); } /** * 綁定頁碼 * * @param pager */ public void addViewPager(ViewPager pager) { this.adapter = pager.getAdapter(); addPagerPoint(); //設置監(jiān)聽器 pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { setSelectPoint(position); } @Override public void onPageScrollStateChanged(int state) { } }); } private void addPagerPoint() { countPoint = adapter.getCount(); point = new ArrayList<>(); for (int i = 0; i < countPoint; i++) { Circle circle = new Circle(context); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(50, 50); params.setMargins(20, 0, 0, 0); //設置外邊距 circle.setLayoutParams(params); this.addView(circle); point.add(circle); } point.get(0).setChecked(true); //默認第一個是選中的 } /** * 縮放動畫效果 * @param view */ private void playAnimator(View view){ scaleX = ObjectAnimator.ofFloat(view,"scaleX",0.0f,1.0f); scaleY = ObjectAnimator.ofFloat(view,"scaleY",0.0f,1.0f); //通過動畫集合組合動畫 AnimatorSet animatorSet =new AnimatorSet(); //這兩個動畫同時執(zhí)行 綁定起來 animatorSet.play(scaleX).with(scaleY); animatorSet.setDuration(300); animatorSet.start(); } private void setSelectPoint(int position) { point.get(position).setChecked(true); //開啟動畫 playAnimator(point.get(position)); for (int i = 0; i < point.size(); i++) { if (i == position) continue; point.get(i).setChecked(false); } } /***************************自定義的小圓點UI組件******************************************/ public class Circle extends View { private float circleRadius = 6.8f; //默認的圓的半徑 private boolean checked = false; public Circle(Context context) { super(context); initViewSize(); } public Circle(Context context, @Nullable AttributeSet attrs) { super(context, attrs); initViewSize(); } public Circle(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initViewSize(); } private void initViewSize() { //推薦使用 寬高 各50dp this.setLayoutParams(new ViewGroup.LayoutParams(50, 50)); this.setClickable(false); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int verticalCenter = getHeight() / 2; int horizontalCenter = getWidth() / 2; Paint paint = new Paint(); paint.setAntiAlias(true); //防鋸齒 paint.setDither(true); //防抖動 paint.setStyle(Paint.Style.FILL_AND_STROKE); if (checked) { //如果是選中狀態(tài) //畫圓心填充物 paint.setColor(Color.WHITE); float radius = circleRadius + circleRadius / 2; canvas.drawCircle(verticalCenter - (circleRadius / 2), horizontalCenter - (circleRadius / 2), radius, paint); } else { paint.setColor(Color.rgb(146, 146, 146)); canvas.drawCircle(verticalCenter, horizontalCenter, circleRadius, paint); } } /** * 設置圓的半徑 * * @param radius */ public void setCircleRadius(float radius) { this.circleRadius = radius; invalidate();//重新繪制組件 } /** * 設置選擇 還是非選擇 * * @param checked */ public void setChecked(boolean checked) { this.checked = checked; invalidate(); } } }
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Android ViewPager小圓點指示器
- Android之帶group指示器的ExpandableListView(自寫)
- Android之IphoneTreeView帶組指示器的ExpandableListView效果
- Android TabLayout設置指示器寬度的方法
- Android實現(xiàn)仿網(wǎng)易新聞的頂部導航指示器
- Android自定義ViewPagerIndicator實現(xiàn)炫酷導航欄指示器(ViewPager+Fragment)
- Android實現(xiàn)基于ViewPager的無限循環(huán)自動播放帶指示器的輪播圖CarouselFigureView控件
- Android開發(fā)實現(xiàn)的ViewPager引導頁功能(動態(tài)加載指示器)詳解
- Android progressbar實現(xiàn)帶底部指示器和文字的進度條
- Android自定義圓點指示器
相關文章
Android Studio和Gradle使用不同位置JDK的問題解決
這篇文章主要介紹了Android Studio和Gradle使用不同位置JDK的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-03-03Android使用MulticastSocket實現(xiàn)多點廣播圖片
這篇文章主要為大家詳細介紹了Android使用MulticastSocket實現(xiàn)多點廣播圖片,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-01-01Android通過Java sdk的方式接入OpenCv的方法
這篇文章主要介紹了Android通過Java sdk的方式接入OpenCv的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04解決Android Studio xml 格式化不自動換行的問題
這篇文章主要介紹了解決Android Studio xml 格式化不自動換行的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03詳解Android Scroller與computeScroll的調(diào)用機制關系
這篇文章主要介紹了詳解Android Scroller與computeScroll的調(diào)用機制關系的相關資料,需要的朋友可以參考下2016-01-01