高级UI系列(四) 扩展TextView 边角Drawable实战篇

简介: 高级UI系列(四) 扩展TextView 边角Drawable实战篇

一. 业务背景

TextView的setCompoundDrawables()可以在其四周设置图片,但是有个众所周知的问题,即无法设置drawable大小。这就导致在实际的使用中有很大的局限性,必须用代码去控制,就略显麻烦了。

1681560706575.png

这个时候我们就需要自定义 TextView 了,这个自定义控件虽然简单,也非常不起眼,但是用处还真不少:

  1. 解决了主要矛盾,无法在布局里设置 TextView 图片大小问题,使用更加简单。
  2. 除了设置图片大小,其它的 TextView 可以的事情这个一样也都可以
  3. 图片加文字的简单组合非常见,原本为了适配图片大小不得不用一个 xxxLayout+ImageView+TextView 才能搞定的事,现在用一个控件即可搞定。
  4. 在方便、高效使用的同时,也有效的减少了布局层。千万不要瞧不上这点苍蝇肉,这可能是你的app卡顿罪魁祸首

二. 扩展TextView原理

  1. 通过Drawable的setBound()设置显示区域,也就是图片大小
  2. 通过TextView的setCompoundDrawables()设置要显示的图片

三. 扩展TextView实现

3.1 定义一个MkDrawableTextView,继承AppCompatTextView,重写三个构造方法

    public MkDrawableTextView(Context context) {
        super(context);
    }
    public MkDrawableTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }
    public MkDrawableTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

3.2 通过自定义属性定义Drawable宽高,顶点坐标;drawable左上右下的图标引用

    <declare-styleable name="DrawableTextView">
        <attr name="left_drawable" format="reference" />
        <attr name="right_drawable" format="reference" />
        <attr name="top_drawable" format="reference" />
        <attr name="bottom_drawable" format="reference" />
        <attr name="drawable_width" format="dimension" />
        <attr name="drawable_height" format="dimension" />
        <attr name="left_drawable_width" format="dimension" />
        <attr name="left_drawable_height" format="dimension" />
        <attr name="right_drawable_width" format="dimension" />
        <attr name="right_drawable_height" format="dimension" />
        <attr name="top_drawable_width" format="dimension" />
        <attr name="top_drawable_height" format="dimension" />
        <attr name="bottom_drawable_width" format="dimension" />
        <attr name="bottom_drawable_height" format="dimension" />
    </declare-styleable>

3.3 获取Drawable真实宽高

局部的大小设置均正常的情况,我们获取局部设置的宽高,局部大小没设置时,看全局的大小是否正确设置,如果正确获取全局大小宽高

    public static class SizeWrap {
        int width;
        int height;
        /**
         * 检查Drawable的宽高是否符合要求
         * @param globalWidth xml定义的Drawable获取真实的宽度
         * @param globalHeight xml定义的Drawable获取真实的高度
         * @param localWidth Drawable实际图标局部设置的宽度
         * @param localHeight Drawable实际图标局部设置的高度
         * @return 是否符合要求
         */
        public boolean checkWidthAndHeight(int globalWidth, int globalHeight, int localWidth, int localHeight) {
            width = 0;
            height = 0;
            // 局部的大小设置均正常的情况
            if (localWidth > 0 && localHeight > 0) {
                width = localWidth;
                height = localHeight;
                return true;
            }
            // 局部大小没设置时,看全局的大小是否正确设置
            if (localWidth == -1 && localHeight == -1) {
                if (globalWidth > 0 && globalHeight > 0) {
                    width = globalWidth;
                    height = globalHeight;
                    return true;
                }
            }
            return false;
        }
    }
}

3.4 将顶角图标Drawable设置到我们的TextView上

    private void init(Context context, AttributeSet attrs) {
        // 1. 通过style.xml文件拿到所有的样式文件
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.DrawableTextView);
        int width = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_drawable_width, -1);
        int height = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_drawable_height, -1);
        SizeWrap sizeWrap = new SizeWrap();
        Drawable leftDrawable = ta.getDrawable(R.styleable.DrawableTextView_left_drawable);
        if (leftDrawable != null) {
            int lwidth = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_left_drawable_width, -1);
            int lheight = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_left_drawable_height, -1);
            if (sizeWrap.checkWidthAndHeight(width, height, lwidth, lheight)) {
                leftDrawable.setBounds(0, 0, sizeWrap.width, sizeWrap.height);
            } else {
                throw new IllegalArgumentException("error left drawable size setting");
            }
        }
        Drawable rightDrawable = ta.getDrawable(R.styleable.DrawableTextView_right_drawable);
        if (rightDrawable != null) {
            int rwidth = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_right_drawable_width, -1);
            int rheight = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_right_drawable_height, -1);
            if (sizeWrap.checkWidthAndHeight(width, height, rwidth, rheight)) {
                rightDrawable.setBounds(0, 0, sizeWrap.width, sizeWrap.height);
            } else {
                throw new IllegalArgumentException("error right drawable size setting");
            }
        }
        Drawable topDrawable = ta.getDrawable(R.styleable.DrawableTextView_top_drawable);
        if (topDrawable != null) {
            int twidth = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_top_drawable_width, -1);
            int theight = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_top_drawable_height, -1);
            if (sizeWrap.checkWidthAndHeight(width, height, twidth, theight)) {
                topDrawable.setBounds(0, 0, sizeWrap.width, sizeWrap.height);
            } else {
                throw new IllegalArgumentException("error top drawable size setting");
            }
        }
        Drawable bottomDrawable = ta.getDrawable(R.styleable.DrawableTextView_bottom_drawable);
        if (bottomDrawable != null) {
            int bwidth = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_bottom_drawable_width, -1);
            int bheight = ta.getDimensionPixelOffset(R.styleable.DrawableTextView_bottom_drawable_height, -1);
            if (sizeWrap.checkWidthAndHeight(width, height, bwidth, bheight)) {
                bottomDrawable.setBounds(0, 0, sizeWrap.width, sizeWrap.height);
            } else {
                throw new IllegalArgumentException("error bottom drawable size setting");
            }
        }
        this.setCompoundDrawables(leftDrawable, topDrawable, rightDrawable, bottomDrawable);
        ta.recycle();
        ta = null;
    }

四. 使用指南

        <com.github.microkibaco.view.MkDrawableTextView
           android:id="@+id/mk_text"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="8dp"
           android:layout_toEndOf="@+id/top_text"
           android:background="@drawable/mk_circle_rect_10_white_bg"
           android:drawablePadding="4dp"
           android:gravity="center"
           android:paddingStart="10dp"
           android:paddingTop="3dp"
           android:paddingEnd="10dp"
           android:paddingBottom="3dp"
           android:textColor="@color/white"
           android:textSize="@dimen/text_size_11"
           android:visibility="gone"
           app:right_drawable="@drawable/mk_arrow"
           app:right_drawable_height="10dp"
           app:right_drawable_width="10dp"
           tools:text="@string/mk_rank_no" />

五. 扩展TextView注意事项

在网上看到有一个版本,在控件的onMeasure()设置Drawable.setBound(), 在onDraw()里设置: setCompoundDrawables()。看setCompoundDrawables()源码可以知道,这个方法最终会调用invalide()和requestLayout(),会导致严重的后果就是,onMeasure()和onDraw()会无限循环的互调下去,有点浪费

1681560880490.png

改不完的 Bug,写不完的矫情。公众号 杨正友 现在专注移动基础开发 ,涵盖音视频和 APM,信息安全等各个知识领域;只做全网最 Geek 的公众号,欢迎您的关注!

相关文章
|
7月前
|
缓存 自然语言处理 物联网
LLama Factory+ModelScope实战——使用 Web UI 进行监督微调
LLaMA Factory 是一个高效的大语言模型训练和推理框架,它通过提供一站式的 Web UI 界面和集成多种训练方法,简化了大模型的微调过程,并能够适配多种开源模型。
|
7月前
|
开发框架 前端开发 .NET
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
|
5月前
鸿蒙使用 @Builder扩展出来的布局数据更新没法更新UI
鸿蒙使用 @Builder扩展出来的布局数据更新没法更新UI
167 1
|
5月前
|
前端开发
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
196 6
|
4月前
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞:解锁Windows Presentation Foundation应用新维度,探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实(AR)与虚拟现实(VR)技术正迅速改变生活和工作方式,在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation(WPF)环境中实现AR/VR功能,通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR,但借助第三方库如Unity、Vuforia或OpenVR,可实现沉浸式体验。例如,通过Unity和Vuforia在WPF中创建AR应用,或利用OpenVR在WPF中集成VR功能,从而提升用户体验并拓展应用功能边界。
75 0
|
4月前
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
52 0
|
5月前
|
JavaScript
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
82 1
|
5月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
769 1
|
5月前
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
445 0
|
5月前
|
JavaScript BI UED
vue + element UI【实战】打字闯关(含按键监听、按键音效、字符匹配、动态样式、结果判定、数据统计、音效获取和剪辑等实用技巧)
vue + element UI【实战】打字闯关(含按键监听、按键音效、字符匹配、动态样式、结果判定、数据统计、音效获取和剪辑等实用技巧)
55 0