美文网首页
Android TextView DrawableLeft对齐第

Android TextView DrawableLeft对齐第

作者: 雨秋寒 | 来源:发表于2018-11-08 11:10 被阅读0次

Android开发中经常遇到的图文混排的情况,例如列表项,废话不多说先上图


带图标的文本框.png

要想实现第一种样式的方法很简单,直接在TextView 中设置DrawableLeft即可

        <TextView
            android:id="@+id/address"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/qian_loc"
            android:drawablePadding="4dp"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="这是一个单行的TextView"
            android:textColor="@color/grayAA"
            android:textSize="13sp" />

但是可以看到上面的TextView 设置的maxLines=1,即单行显示。
文字较多产生换行的情况下会是怎么样的? 就是第二个控件,这时候发现drawableLeft一直处于文本居中的地方,感觉很不美观。如果想让图标和第一行文字对齐,这时候很难实现。
搜寻网上的答案,一般会给出两种方案:

  • 一 自定义TextView,在onDraw中重新计算drawableLeft的显示位置
  • 二 自定义View,使用ImageView 和TextView 在Layout布局中重新排放。这两种在网上都能找到,但是写法都比较复杂。有没有更简单的方法呢。
    首先要研究一下Android View 继承关系。


    Android View继承关系图.png

从图中可以看到Button,RadioButton 都是TextView的子类,也就是说RadioButton也是一种TextView, 它具备TextView的所有属性,同时拥有自己的特性。熟悉RadioButton的童鞋都知道RadioButton除了DrawableLeft之外还有一个Button属性来显示单选图标,这个单选图标支持g'ravity属性。所以有了第三种解决方案。

        <RadioButton
            android:id="@+id/etc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="备注:我是Radiobutton我是Radiobutton我是Radiobutton我是Radiobutton我是Radiobutton我是Radiobutton我是Radiobutton我是Radiobutton我是Radiobutton我是Radiobutton我是Radiobutton"
            android:textSize="13sp"
            android:gravity="top"
            android:paddingLeft="2dp"
            android:textColor="@color/grayAA"
            android:button="@drawable/att_sign_etc_ico"
            android:layout_marginTop="5dp"
            android:checked="false"
            android:clickable="false"
            />

核心代码 android:gravity="top" 以及 android:button="@drawable/att_sign_etc_ico" ,最后伪装成Textview,禁用Radio Button的点击和check属性。
完美实现了图标对齐第一行要求。(害的我白揍了一顿UI设计师,原来这么简单就搞定了)

相关文章

网友评论

      本文标题:Android TextView DrawableLeft对齐第

      本文链接:https://www.haomeiwen.com/subject/pkbixqtx.html