请选择 进入手机版 | 继续访问电脑版

Android自定义View实现分段选择按钮

[复制链接]
为你演绎 发表于 2020-12-31 18:58:35 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
首先演示下效果,分段选择按钮,支持点击和滑动切换。

视图绘制过程中,要执行onMeasure、onLayout、onDraw等方法,这也是自界说控件最常用到的几个方法。
onMeasure:丈量视图的巨细,可以根据MeasureSpec的Mode确定父视图和子视图的巨细。
onLayout:确定视图的位置
onDraw:绘制视图
这里就不做过多的先容,主要先容本控件涉及的到的部门。
1.1 获取item巨细、起始位置

  1.     @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        if(isItemZero() || getMeasuredWidth() == 0)            return;        mHeight = getMeasuredHeight();        int width = getMeasuredWidth();        mItemWidth = (width - 2 * itemHorizontalMargin)/getCount();        mStart = itemHorizontalMargin + mItemWidth * selectedItem;        mEnd = width - itemHorizontalMargin - mItemWidth;    }
复制代码
1.2 绘制

绘制背景,所有的Item,以及选中项
  1.     @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        if(isItemZero())            return;        drawBackgroundRect(canvas);        drawUnselectedItemsText(canvas);        drawSelectedItem(canvas);        drawSelectedItemsText(canvas);    }
复制代码
* 绘制背景区域

背景区域就是个带圆角的长方形
  1.     /**     * 画背景区域     * @param canvas     */    private void drawBackgroundRect(Canvas canvas) {        float r = cornersMode == Round?cornersRadius: mHeight >> 1;        mPaint.setXfermode(null);        mPaint.setColor(backgroundColor);        mRectF.set(0, 0, getWidth(), getHeight());        canvas.drawRoundRect(mRectF, r, r, mPaint);    }
复制代码
* 绘制所有未选中Item的文字

轮番绘制所有Item的文字
  1.     /**     * 画所有未选中Item的文字     * @param canvas     */    private void drawUnselectedItemsText(Canvas canvas) {        mTextPaint.setColor(textColor);        mTextPaint.setXfermode(null);        for (int i = 0; i< getCount(); i++){            int start = itemHorizontalMargin + i * mItemWidth;            float x = start + (mItemWidth >> 1) - mTextPaint.measureText(getName(i))/2;            float y = (getHeight() >> 1) - (mTextPaint.ascent() + mTextPaint.descent())/2;            canvas.drawText(getName(i), x, y, mTextPaint);        }    }
复制代码
* 绘制选中项

  1.     /**     * 画选中项     * @param canvas     */    private void drawSelectedItem(Canvas canvas) {        float r = cornersMode == Round?cornersRadius: (mHeight >> 1) - itemVerticalMargin;        mPaint.setColor(selectedItemBackgroundColor);        mRectF.set(mStart, itemVerticalMargin, mStart + mItemWidth, getHeight() - itemVerticalMargin);        canvas.drawRoundRect(mRectF, r, r, mPaint);    }
复制代码
* 绘制选中Item的文字

当选中项移动时,刚移动到下一个Item时,颜色应该是选中的颜色。这里在原来文字之上再画选中Item的文字颜色,就有了被选中的效果。
  1.     /**     * 画选中Item的文字     * @param canvas     */    private void drawSelectedItemsText(Canvas canvas) {        canvas.saveLayer(mStart, 0, mStart + mItemWidth, getHeight(), null, Canvas.ALL_SAVE_FLAG);        mTextPaint.setColor(selectedItemTextColor);        mTextPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));        int begin = mStart/mItemWidth;        int end = (begin + 2) < getCount()?begin+2:getCount();        for (int i = begin; i< end; i++){            int start = itemHorizontalMargin + i * mItemWidth;            float x = start + (mItemWidth >> 1) - mTextPaint.measureText(getName(i))/2;            float y = (getHeight() >> 1) - (mTextPaint.ascent() + mTextPaint.descent())/2;            canvas.drawText(getName(i), x, y, mTextPaint);        }        canvas.restore();    }
复制代码
1.3 添加手势事件

手势分为三种,ACTION_DOWN、ACTION_MOVE、ACTION_UP,对应动作就是按下,滑动,按起。
当按下时确定按下位置,是在当前Item,则不做处理惩罚,当按下位置为别的Item位置,就滑动到别的Item位置。
当手势滑动时,计算相对滑动值,通过改变mStart,改变选中项的位置。
当手势按起时,根据按下位置、速度和方向,判定是否可移动到下一个Item。
  1.     @Override    public boolean onTouchEvent(MotionEvent event) {        if(!isEnabled() || !isInTouchMode() || getCount() == 0)            return false;        if (mVelocityTracker == null) {            mVelocityTracker = VelocityTracker.obtain();        }        mVelocityTracker.addMovement(event);        int action = event.getActionMasked();        if(action == MotionEvent.ACTION_DOWN){            x = event.getX();            onClickDownPosition = -1;            final float y = event.getY();            if(isItemInside(x, y)){                return scrollSelectEnabled;            }else if(isItemOutside(x, y)){                if(!mScroller.isFinished()){                    mScroller.abortAnimation();                }                onClickDownPosition = (int) ((x - itemHorizontalMargin)/ mItemWidth);                startScroll(positionStart(x));                return true;            }            return false;        }else if(action == MotionEvent.ACTION_MOVE){            if(!mScroller.isFinished() || !scrollSelectEnabled){                return true;            }            float dx = event.getX() - x;            if(Math.abs(dx) > MIN_MOVE_X){                mStart = (int) (mStart + dx);                mStart = Math.min(Math.max(mStart, itemHorizontalMargin), mEnd);                postInvalidate();                x = event.getX();            }            return true;        }else if(action == MotionEvent.ACTION_UP){            int newSelectedItem;            float offset = (mStart - itemHorizontalMargin)%mItemWidth;            float itemStartPosition = (mStart - itemHorizontalMargin) * 1.0f/ mItemWidth;            if(!mScroller.isFinished() && onClickDownPosition != -1){                newSelectedItem = onClickDownPosition;            }else{                if(offset == 0f){                    newSelectedItem = (int)itemStartPosition;                }else {                    VelocityTracker velocityTracker = mVelocityTracker;                    velocityTracker.computeCurrentVelocity(VELOCITY_UNITS, mMaximumFlingVelocity);                    int initialVelocity = (int) velocityTracker.getXVelocity();                    float itemRate = offset/mItemWidth;                    if (isXVelocityCanMoveNextItem(initialVelocity, itemRate)){                        newSelectedItem = initialVelocity > 0?(int)itemStartPosition+1:(int)itemStartPosition;                    }else {                        newSelectedItem = Math.round(itemStartPosition);                    }                    newSelectedItem = Math.max(Math.min(newSelectedItem, getCount() - 1), 0);                    startScroll(getXByPosition(newSelectedItem));                }            }            onStateChange(newSelectedItem);            mVelocityTracker = null;            onClickDownPosition = -1;            return true;        }        return super.onTouchEvent(event);    }
复制代码
1.4 生存状态

当手机屏幕方向转换大概内存不足等情况下, 视图会重新加载,这样就会导致状态丢失。使用onSaveInstanceState和onRestoreInstanceState方法生存并规复状态。
  1.     @Override    public Parcelable onSaveInstanceState() {        Parcelable parcelable = super.onSaveInstanceState();        SelectedItemState pullToLoadState = new SelectedItemState(parcelable);        pullToLoadState.setSelectedItem(selectedItem);        return pullToLoadState;    }    @Override    public void onRestoreInstanceState(Parcelable state) {        if(!(state instanceof SelectedItemState))            return;        SelectedItemState pullToLoadState = ((SelectedItemState)state);        super.onRestoreInstanceState(pullToLoadState.getSuperState());        selectedItem = pullToLoadState.getSelectedItem();        invalidate();    }
复制代码
想要学习的同学,发起还是直接看项目源码。项目源码地址:https://github.com/danledian/SegmentedControl

来源:https://blog.csdn.net/songnigo6/article/details/111934357
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )