【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

【参考资料】