android 修改控件的坐标_Android自定义字母导航栏

点击上方“Android技术杂货铺”,选择“标星”

8点31分,真爱打卡!

e170550ef88cb1afbf334c062261a44f.png

效果:

bd136f088224afcd747e5d1fefc0b399.gif
实现逻辑

明确需求

字母导航栏在实际开发中还是比较多见的,城市选择、名称选择等等可能需要到。 现在要做到的就是在滑动控件过程中可以有内容以及 下标的回调,方便处理其他逻辑!

整理思路

1、确定控件的尺寸,防止内容显示不全。相关的逻辑在onMeasure()方法中处理;

2、绘制显示的内容,在按下和抬起不同状态下文字、背景的颜色。相关逻辑在onDraw()方法中;

3、滑动事件的处理以及事件回调。相关逻辑在onTouchEvent()方法中;

动手实现

在需求明确、思路清晰的情况下就要开始动手实现(需要了解自定义View的一些基础API)。代码中有思路和注释,可以结合代码一起看看。如果有疑惑、优化、错误的地方请在评论区提出,共同进步!最后给诸位拜个晚年:望各位在新的一年里事业顺顺心心、爱情美美满满、家庭和和睦睦、亲人健健康康。过年好!

完整代码
/**
 * 自定义字母导航栏
 * 
 * 总的来说就四步
 * 1、测量控件尺寸{@link #onMeasure(int, int)}
 * 2、绘制显示内容(背景以及字符){@link #onDraw(Canvas)}
 * 3、处理滑动事件{@link #onTouchEvent(MotionEvent)}
 * 4、暴露接口{@link #setOnNavigationScrollerListener(OnNavigationScrollerListener)}
 *
 * @attr customTextColorDefault  //导航栏默认文字颜色
 * @attr customTextColorDown  //导航栏按下文字颜色
 * @attr customBackgroundColorDown  //导航栏按下背景颜色
 * @attr customLetterDivHeight  //导航栏内容高度间隔
 * @attr customTextSize  //导航栏文字尺寸
 * @attr customBackgroundAngle //导航栏背景角度
 */
public class CustomLetterNavigationView extends View {
    private static final String TAG = "CustomLetterNavigation";
    //导航内容
    private String[] mNavigationContent;
    //导航栏内容间隔
    private float mContentDiv;
    //导航栏文字大小
    private float mContentTextSize;
    //导航栏文字颜色
    private int mContentTextColor;
    //导航栏按下时背景颜色
    private int mBackgroundColor;
    //导航栏按下时圆角度数
    private int mBackGroundAngle = 0;
    //导航栏按下时文字颜色
    private int mDownContentTextColor;
    private TextPaint mTextPaint;
    private Paint mPaintBackgrount;
    private boolean mEventActionState = false;
    private String mCurrentLetter = "";
    private OnNavigationScrollerListener mOnNavigationScrollerListener;

    public CustomLetterNavigationView(Context context) {
        this(context, null);
    }

    public CustomLetterNavigationView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomLetterNavigationView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initDefaultData();//初始化默认数据
        initAttrs(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        /**
         * 


         *     这里我们分为两步
         *
         *     1、绘制背景
         *        这里简单,直接调用Canvas的drawRoundRect()方法直接绘制
         *     2、绘制显示文本
         *        绘制文字首先要定位,定位每个字符的坐标
         *        X轴简单,宽度的一半
         *        Y轴坐标通过每个字符的高heightShould乘以已绘制字符的数目
         * 


         */
        int mViewWidth = getWidth();
        //绘制背景
        RectF mRectF = new RectF(0, 0, mViewWidth, getHeight());
        if (mEventActionState) {
            mTextPaint.setColor(mDownContentTextColor);
            mPaintBackgrount.setColor(mBackgroundColor);
            canvas.drawRoundRect(mRectF, mBackGroundAngle, mBackGroundAngle, mPaintBackgrount);
        } else {
            mTextPaint.setColor(mContentTextColor);
            mPaintBackgrount.setColor(Color.TRANSPARENT);
            Drawable mBackground = getBackground();
            if (mBackground instanceof ColorDrawable) {
                mPaintBackgrount.setColor(((ColorDrawable) mBackground).getColor());
            }
            canvas.drawRoundRect(mRectF, mBackGroundAngle, mBackGroundAngle, mPaintBackgrount);
        }
        //绘制文本
        float textX = mViewWidth / 2;
        //X轴坐标
        int contentLenght = getContentLength();
        //Y轴坐标(这里在测量的时候多加入了两个间隔高度要减去,同时还有Padding值)
        float heightShould = (getHeight() - mContentDiv * 2 - getPaddingTop() - getPaddingBottom()) / contentLenght;
        for (int i = 0; i             //计算Y轴的坐标
            float startY = ((i + 1) * heightShould) + getPaddingTop();
            //绘制文字
            canvas.drawText(mNavigationContent[i], textX, startY, mTextPaint);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        /**
         * 这里主要处理手指滑动事件
         */
        float mEventY = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //手指按下的时候,修改Enent状态、重绘背景、触发回调
                mEventActionState = true;
                invalidate();
                if (mOnNavigationScrollerListener != null) {
                    mOnNavigationScrollerListener.onDown();
                }
                scrollCount(mEventY);
                break;
            case MotionEvent.ACTION_MOVE:
                scrollCount(mEventY);
                break;
            case MotionEvent.ACTION_UP:
                //手指离开的时候,修改Enent状态、重绘背景、触发回调
                mEventActionState = false;
                invalidate();
                if (mOnNavigationScrollerListener != null) {
                    mOnNavigationScrollerListener.onUp();
                }
                break;
        }
        return true;
    }


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


         *     这里做了简单的适应,其目的就是为了能够正常的显示我们的内容
         *
         *     不管设置的是真实尺寸或者是包裹内容,都会以内容的最小尺寸为
         *     基础,如果设置的控件尺寸大于我们内容的最小尺寸,就使用控件
         *     尺寸,反之使用内容的最小尺寸!
         * 


         */
        int widhtMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        //获取控件的尺寸
        int actualWidth = MeasureSpec.getSize(widthMeasureSpec);
        int actualHeight = MeasureSpec.getSize(heightMeasureSpec);
        int contentLegth = getContentLength();
        //计算一个文字的尺寸
        Rect mRect = measureTextSize();
        //内容的最小宽度
        float contentWidth = mRect.width() + mContentDiv * 2;
        //内容的最小高度
        float contentHeight = mRect.height() * contentLegth + mContentDiv * (contentLegth + 3);
        if (MeasureSpec.AT_MOST == widhtMode) {
            //宽度包裹内容
            actualWidth = (int) contentWidth + getPaddingLeft() + getPaddingRight();
        } else if (MeasureSpec.EXACTLY == widhtMode) {
            //宽度限制
            if (actualWidth                 actualWidth = (int) contentWidth + getPaddingLeft() + getPaddingRight();
            }
        }
        if (MeasureSpec.AT_MOST == heightMode) {
            //高度包裹内容
            actualHeight = (int) contentHeight + getPaddingTop() + getPaddingBottom();
        } else if (MeasureSpec.EXACTLY == widhtMode) {
            //高度限制
            if (actualHeight                 actualHeight = (int) contentHeight + getPaddingTop() + getPaddingBottom();
            }
        }
        setMeasuredDimension(actualWidth, actualHeight);
    }


    /**
     * 初始化默认数据
     */
    private void initDefaultData() {
        mNavigationContent = new String[]{"搜", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"};
        mContentDiv = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5, getResources().getDisplayMetrics());
        mContentTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 14, getResources().getDisplayMetrics());
        mContentTextColor = Color.parseColor("#333333");
        mDownContentTextColor = Color.WHITE;
        mBackgroundColor = Color.parseColor("#d7d7d7");
        mBackGroundAngle = 0;
        //绘制文字画笔
        mTextPaint = new TextPaint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(mContentTextSize);
        mTextPaint.setColor(mContentTextColor);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        //绘制背景画笔
        mPaintBackgrount = new Paint();
        mPaintBackgrount.setAntiAlias(true);
        mPaintBackgrount.setStyle(Paint.Style.FILL);
    }

    /**
     * 初始化自定义属性
     *
     * @param context
     * @param attrs
     */
    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomLetterNavigationView);
        mContentTextColor = mTypedArray.getColor(R.styleable.CustomLetterNavigationView_customTextColorDefault, mContentTextColor);
        mBackgroundColor = mTypedArray.getColor(R.styleable.CustomLetterNavigationView_customBackgroundColorDown, mBackgroundColor);
        mDownContentTextColor = mTypedArray.getColor(R.styleable.CustomLetterNavigationView_customTextColorDown, mDownContentTextColor);
        mContentTextSize = mTypedArray.getDimension(R.styleable.CustomLetterNavigationView_customTextSize, mContentTextSize);
        mContentDiv = mTypedArray.getFloat(R.styleable.CustomLetterNavigationView_customLetterDivHeight, mContentDiv);
        mBackGroundAngle = mTypedArray.getInt(R.styleable.CustomLetterNavigationView_customBackgroundAngle, mBackGroundAngle);
        mTypedArray.recycle();
    }


    /**
     * 获取内容长度
     *
     * @return 内容长度
     */
    private int getContentLength() {
        if (mNavigationContent != null) {
            return mNavigationContent.length;
        }
        return 0;
    }

    /**
     * 滑动计算
     *
     * @param mEventY Y轴滑动距离
     */
    private void scrollCount(float mEventY) {
        //滑动的时候利用滑动距离和每一个字符高度进行取整,获取到Index
        Rect mRect = measureTextSize();
        int index = (int) ((mEventY - getPaddingTop() - getPaddingBottom() - mContentDiv * 2) / (mRect.height() + mContentDiv));
        //防止越界
        if (index >= 0 && index             String newLetter = mNavigationContent[index];
            //防止重复触发回调
            if (!mCurrentLetter.equals(newLetter)) {
                mCurrentLetter = newLetter;
                if (mOnNavigationScrollerListener != null) {
                    mOnNavigationScrollerListener.onScroll(mCurrentLetter, index);
                }
            }
        }
    }

    /**
     * 测量文字的尺寸
     *
     * @return 一个汉字的矩阵
     */
    public Rect measureTextSize() {
        Rect mRect = new Rect();
        if (mTextPaint != null) {
            mTextPaint.getTextBounds("田", 0, 1, mRect);
        }
        return mRect;
    }


    /**
     * 设置导航栏滑动监听
     *
     * @param onNavigationScrollerListener
     */
    public void setOnNavigationScrollerListener(OnNavigationScrollerListener onNavigationScrollerListener) {
        this.mOnNavigationScrollerListener = onNavigationScrollerListener;
    }

    /**
     * 设置导航栏显示内容
     *
     * @param content 需要显示的内容
     */
    public void setNavigationContent(String content) {
        if (!TextUtils.isEmpty(content)) {
            mNavigationContent = null;
            mNavigationContent = new String[content.length()];
            for (int i = 0; i                 mNavigationContent[i] = String.valueOf(content.charAt(i));
            }
        }
        //需要重新测量
        requestLayout();
    }

    public interface OnNavigationScrollerListener {
        //按下
        void onDown();

        //滑动
        void onScroll(String letter, int position);

        //离开
        void onUp();

    }
}

自定义属性

<declare-styleable name="CustomLetterNavigationView">    declare-styleable>

作者:Android阿呆
链接:https://www.jianshu.com/p/1f471b1d9aee
本文经作者授权推送。

---完---

推荐阅读:

Flutter-自定义一个水波进度球

羡慕Mac的搜索效率?Windows同样也可以做到!

Material Design之-交互效果炸裂的 FloatingActionMenu

1e64fbf1d12386e574dbc94d6805b541.png 4a5c046509e49b20b371cdae2f77a024.png  2019 随手点好看 年薪上百万!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值