Android开发中经常遇到的图文混排的情况,例如列表项,废话不多说先上图
要想实现第一种样式的方法很简单,直接在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 继承关系。
从图中可以看到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设计师,原来这么简单就搞定了)