欢迎页导航页SplashActivity-条形进度条指示器-页面布局系列

最新推荐文章于 2021-05-26 01:40:59 发布

我是giggleman

最新推荐文章于 2021-05-26 01:40:59 发布

阅读量230

点赞数

分类专栏： Android 自定义View控件系列

本文链接：https://blog.csdn.net/ruiruiddd/article/details/115696605

版权

Android 同时被 2 个专栏收录

75 篇文章 0 订阅

订阅专栏

自定义View控件系列

16 篇文章 1 订阅

订阅专栏

Splash Activity 欢迎页，带条形进度条指示器

完整代码ZIP：下载
更多其他页面-自定义View-实用功能合集：点击查看

带圆点指示器可以浏览这篇文章点击跳转
仿ClassIn的欢迎页可以浏览这篇文章点击跳转

实现步骤：
1.使用ViewPager实现左右翻页layout
2.自定义绘制组件RectanglePointerView，通过监听ViewPager.OnPageChangeListener刷新绘制条形指示器

1.ViewPager.OnPageChangeListener的onPageScrolled可以告诉我们当前的页面滑动状态。position->当前页面位置下坐标，positionOffset->相对于两个页面之间滑动的偏移量 0 ~ 0.99，positionOffsetPixels->滑动相对于屏幕像素偏移量


  //监听页面状态
     class  ViewPagerChangeListener implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            Log.d("TAG", "onPageScrolled: "+position+" "+positionOffset+" "+positionOffsetPixels);
            mRectanglePointerView.refreshPointer(position,positionOffset); //刷新条形指示器

        }
        @Override
        public void onPageSelected(int position) {  //翻到最后一页才显示按钮
            if(position==mArrayList.size()-1){
                mButton.setVisibility(View.VISIBLE);
            }else {
                mButton.setVisibility(View.GONE);
            }
        }
        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

2.自绘制RectanglePointerView必须传入以下参数

//页面数量，条形width,条形height,选中时drawable,未选中时drawable
public void setPointerStyle(int pageNumber, int dotHeight, int dotWidth, Drawable dotDrawableSelected, Drawable dotDrawableUnSelected)

条形指示器view的总长度 = 设置的条形width x 页面数量(条形数量)
条形指示器view的总高度 = 设置的条形height


/**
 * 作者：YFZ
 * Android技术生活-QQ交流群:723592501
 * 简介：自定义绘制条形指示器，用于翻页
 * setDotInfor设置圆点信息,页数，长宽，
 */
public class RectanglePointerView extends LinearLayout {
    private Context mContext;
    private Paint mPaintDotSelected;
    private Paint mPaintDotUnSelected;
    private Rect mRect;
    private int mPageNumber=0;
    private int mDotWidth=0;
    private int mDotHeight =0;
    private int mSelectedPosition=0;
    private float mSelectedProcess=0;
    private Drawable mDotDrawableSelected;
    private Drawable mDotDrawableUnSelected;



    public RectanglePointerView(Context context) {
        super(context);
        initial(context);
    }
    public RectanglePointerView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initial(context);
    }
    public RectanglePointerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initial(context);
    }
    //初始化
    private void initial(Context context){
        this.mContext=context;
        this.mRect=new Rect();
        initial_paint_dot_selected();
        initial_paint_dot_unSelected();
        this.setBackgroundColor(Color.TRANSPARENT);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    //初始化-画笔-圆点-被选中的
    private void initial_paint_dot_selected(){
        this.mPaintDotSelected=new Paint(Paint.ANTI_ALIAS_FLAG);
        this.mPaintDotSelected.setStyle(Paint.Style.FILL);
        this.mPaintDotSelected.setColor(Color.BLACK);
    }
    //初始化-画笔-圆点-未被选中的
    private void initial_paint_dot_unSelected(){
        this.mPaintDotUnSelected=new Paint(Paint.ANTI_ALIAS_FLAG);
        this.mPaintDotUnSelected.setStyle(Paint.Style.STROKE);
        this.mPaintDotUnSelected.setColor(Color.GRAY);
        this.mPaintDotUnSelected.setStrokeWidth(3f);
    }
    //刷新绘制
    public void refreshUI(){
        this.invalidate();
    }
    //传入页面数量
    public void setPageNumber(int pageNumber){
    }
    //设置圆点信息-数量-高-宽
    public void setPointerStyle(int pageNumber, int dotHeight, int dotWidth, Drawable dotDrawableSelected, Drawable dotDrawableUnSelected){
        mPageNumber = pageNumber; //数量
        mDotHeight  = dotHeight; //高
        mDotWidth   = dotWidth; //宽
        mDotDrawableSelected=dotDrawableSelected;
        mDotDrawableUnSelected=dotDrawableUnSelected;

        this.getLayoutParams().height= (int)(mDotHeight);
        this.getLayoutParams().width = (int)(mDotWidth * pageNumber);
    }
    //设置当前选中的页面
    public void refreshPointer(int position, float process){
        mSelectedPosition=position+1;
        mSelectedProcess=process+position+1;
        refreshUI();
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(mPageNumber>0 && mDotWidth>0 && mDotHeight>0) { //必须传入数量,Dot长宽,才开始绘制
                //先绘制条形总长度，未选中drawable）
                mRect.left=0;
                mRect.top=0;
                mRect.right=getWidth();
                mRect.bottom=getHeight();
                mDotDrawableUnSelected.setBounds(mRect);
                mDotDrawableUnSelected.draw(canvas);
                //再绘制当前进度长度，选中drawable。进度比例% * 组件总长
                //进度百分比为：onPageScolled / 总页数 *100
                //组件总长：getwidth();
               mRect.left=0;
               mRect.top=0;
               mRect.right=(int)((mSelectedProcess/mPageNumber)*(getWidth()));
               mRect.bottom=getHeight();
//               if(mSelectedPosition==i) {
                   mDotDrawableSelected.setBounds(mRect);
                   mDotDrawableSelected.draw(canvas);
//               }else {
//                   mDotDrawableUnSelected.setBounds(mRect);
//                   mDotDrawableUnSelected.draw(canvas);
//               }

           }

    }

}