【Android】布局——图片紧随文字

【关键词】

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);

参考 setCompoundDrawablesRelativeWithIntrinsicBounds/android:drawableEnd - Add a Drawable to the End of Text, in a TextView, in Java

【参考资料】