Android布局：宽度适应的横向跟随，防止挤掉重要视图

时间：2021-09-17 08:18:57

不知道这样的布局该怎么描述，标题也是乱取的。。直接上图吧

Android布局：宽度适应的横向跟随，防止挤掉重要视图

最近遇到了这样要求的布局：

1、上图中的“标题”长度不定，“状态”标签可能有多个并紧跟在标题右边，“属性”一直居右显示；

2、当“标题”过长，一行显示不下时，“标题”换行显示，但不能挤掉“状态”和“属性”。

刚开始用了LinearLayout和RelativeLayout的多层嵌套总算是强行实现，但是嵌套太深了，而且代码看着也相当复杂，所以修改为用TableLayout，利用shrinkColumns和stretchColumns保证跟随的视图不被挤掉。

当然还有一个问题没解决：固定居右的“属性”一直没能放进TableLayout里，尝试设置“属性”为 stretchColumns + match_parent + gravity: right，放到TableRow的最后，但是没有效果，所以这里才套了层RelativeLayout，如果有办法能把RelativeLayout这层都省去，麻烦大家告诉我下~

 <RelativeLayout

             android:layout_width="match_parent"

             android:layout_height="wrap_content"

             android:gravity="center"

             android:orientation="horizontal">

             <TableLayout

                 android:id="@+id/table"

                 android:layout_width="match_parent"

                 android:layout_height="wrap_content"

                 android:layout_toLeftOf="@+id/txvCreateTime"

                 android:shrinkColumns="0"

                 android:stretchColumns="1|2">

                 <TableRow android:gravity="center_vertical">

                     <TextView

                         android:id="@+id/txvTitle"

                         android:layout_width="wrap_content"

                         android:layout_height="wrap_content"

                         android:ellipsize="end"

                         android:maxLines="2"

                         android:text="居左居左居左居左居左居左"

                         android:textColor="@android:color/black"

                         android:textSize="@dimen/dimens_16_sp"

                         android:textStyle="bold" />

                     <TextView

                         android:id="@+id/txvState1"

                         android:layout_width="wrap_content"

                         android:layout_height="wrap_content"

                         android:layout_marginLeft="@dimen/dimens_5_dp"

                         android:background="@drawable/layout_bg_orange"

                         android:paddingBottom="@dimen/dimens_2_dp"

                         android:paddingLeft="@dimen/dimens_5_dp"

                         android:paddingRight="@dimen/dimens_5_dp"

                         android:paddingTop="@dimen/dimens_2_dp"

                         android:singleLine="true"

                         android:text="跟随"

                         android:textColor="@android:color/white"

                         android:textSize="@dimen/dimens_12_sp" />

                     <TextView

                         android:id="@+id/txvState2"

                         android:layout_width="wrap_content"

                         android:layout_height="wrap_content"

                         android:layout_marginLeft="@dimen/dimens_5_dp"

                         android:background="@drawable/layout_bg_orange"

                         android:paddingBottom="@dimen/dimens_2_dp"

                         android:paddingLeft="@dimen/dimens_5_dp"

                         android:paddingRight="@dimen/dimens_5_dp"

                         android:paddingTop="@dimen/dimens_2_dp"

                         android:singleLine="true"

                         android:text="跟随"

                         android:textColor="@android:color/white"

                         android:textSize="@dimen/dimens_12_sp" />

                 </TableRow>

             </TableLayout>

             <TextView

                 android:id="@+id/txvCreateTime"

                 android:layout_width="wrap_content"

                 android:layout_height="wrap_content"

                 android:layout_alignParentRight="true"

                 android:layout_centerVertical="true"

                 android:layout_marginLeft="@dimen/dimens_5_dp"

                 android:gravity="center"

                 android:text="居右"

                 android:textColor="#999999"

                 android:textSize="@dimen/dimens_14_sp" />

         </RelativeLayout>

阅读原文

相关文章