Android佈局：寬度適應的橫向跟隨，防止擠掉重要視圖

不知道這樣的佈局該怎麼描述，標題也是亂取的。。直接上圖吧

最近遇到了這樣要求的佈局：

一、上圖中的「標題」長度不定，「狀態」標籤可能有多個並緊跟在標題右邊，「屬性」一直居右顯示；

二、當「標題」過長，一行顯示不下時，「標題」換行顯示，但不能擠掉「狀態」和「屬性」。

 

剛開始用了LinearLayout和RelativeLayout的多層嵌套總算是強行實現，可是嵌套太深了，並且代碼看着也至關複雜，因此修改成用TableLayout，利用shrinkColumns和stretchColumns保證跟隨的視圖不被擠掉。

 

固然還有一個問題沒解決：固定居右的「屬性」一直沒能放進TableLayout裏，嘗試設置「屬性」爲 stretchColumns + match_parent + gravity: right，放到TableRow的最後，可是沒有效果，因此這裏才套了層RelativeLayout，若是有辦法能把RelativeLayout這層都省去，麻煩你們告訴我下~

 

 1 <RelativeLayout
 2             android:layout_width="match_parent"
 3             android:layout_height="wrap_content"
 4             android:gravity="center"
 5             android:orientation="horizontal">
 6 
 7             <TableLayout
 8                 android:id="@+id/table"
 9                 android:layout_width="match_parent"
10                 android:layout_height="wrap_content"
11                 android:layout_toLeftOf="@+id/txvCreateTime"
12                 android:shrinkColumns="0"
13                 android:stretchColumns="1|2">
14 
15                 <TableRow android:gravity="center_vertical">
16 
17                     <TextView
18                         android:id="@+id/txvTitle"
19                         android:layout_width="wrap_content"
20                         android:layout_height="wrap_content"
21                         android:ellipsize="end"
22                         android:maxLines="2"
23                         android:text="居左居左居左居左居左居左"
24                         android:textColor="@android:color/black"
25                         android:textSize="@dimen/dimens_16_sp"
26                         android:textStyle="bold" />
27 
28                     <TextView
29                         android:id="@+id/txvState1"
30                         android:layout_width="wrap_content"
31                         android:layout_height="wrap_content"
32                         android:layout_marginLeft="@dimen/dimens_5_dp"
33                         android:background="@drawable/layout_bg_orange"
34                         android:paddingBottom="@dimen/dimens_2_dp"
35                         android:paddingLeft="@dimen/dimens_5_dp"
36                         android:paddingRight="@dimen/dimens_5_dp"
37                         android:paddingTop="@dimen/dimens_2_dp"
38                         android:singleLine="true"
39                         android:text="跟隨"
40                         android:textColor="@android:color/white"
41                         android:textSize="@dimen/dimens_12_sp" />
42 
43                     <TextView
44                         android:id="@+id/txvState2"
45                         android:layout_width="wrap_content"
46                         android:layout_height="wrap_content"
47                         android:layout_marginLeft="@dimen/dimens_5_dp"
48                         android:background="@drawable/layout_bg_orange"
49                         android:paddingBottom="@dimen/dimens_2_dp"
50                         android:paddingLeft="@dimen/dimens_5_dp"
51                         android:paddingRight="@dimen/dimens_5_dp"
52                         android:paddingTop="@dimen/dimens_2_dp"
53                         android:singleLine="true"
54                         android:text="跟隨"
55                         android:textColor="@android:color/white"
56                         android:textSize="@dimen/dimens_12_sp" />
57                 </TableRow>
58             </TableLayout>
59 
60             <TextView
61                 android:id="@+id/txvCreateTime"
62                 android:layout_width="wrap_content"
63                 android:layout_height="wrap_content"
64                 android:layout_alignParentRight="true"
65                 android:layout_centerVertical="true"
66                 android:layout_marginLeft="@dimen/dimens_5_dp"
67                 android:gravity="center"
68                 android:text="居右"
69                 android:textColor="#999999"
70                 android:textSize="@dimen/dimens_14_sp" />
71         </RelativeLayout>

 

閱讀原文