【关键词】
Android
图片紧随文字
多行文字挤压图片
【问题】
- 实现如效果图的布局,其中
中间部分的文字和图片
是紧挨着的; - 要考虑适配情况,文字太多的时候,如果处理不当,图片会被挤压出去,看不到图片;
【效果图】
针对中间部分的文字和图片,在最左边和最右边都有内容(例如图片)的情况下该如何布局?
【分析】
- 如果TextView的宽度设置为 wrap_content ,那么drawableEnd设置的图片就可以紧随文字了;
- 为了让右边的编辑按钮保持在最右边,用LinearLayout来包含TextView,并使LinearLayout填充中间部分(用weight填充);
【解决方案】
- 参考代码
【代码】
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<CheckBox
android:id="@+id/cb_main_manager_status"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_gravity="center_vertical"
android:layout_marginStart="16dp"
android:background="@drawable/main_manager_status"
android:button="@null"
android:focusable="false" />
<!-- 中间部分的图片和文字布局 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:paddingStart="8dp"
android:paddingEnd="0dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:gravity="center_vertical" >
<TextView
android:id="@+id/tv_main_manager_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:drawableEnd="@drawable/main_manager_timer"
android:drawablePadding="4dp"
android:text="this is first room"
android:textSize="14sp" />
</LinearLayout>
<ImageView
android:id="@+id/iv_main_manager_edit"
android:layout_width="48dp"
android:layout_height="match_parent"
android:contentDescription="@string/app_name"
android:paddingEnd="16dp"
android:paddingStart="16dp"
android:src="@drawable/main_manager_edit" />
</LinearLayout>
【扩展】
- 取消TextView上下左右的drawable ,
tvName.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);
- 添加TextView文字右边的图片,
tvName.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.main_manager_timer, 0);