468
技術社區[雲棲]
android布局技巧之類微信對話輸入布局
在設計的過程中我們一定經常會遇到這樣的需求：
一行內放3個控件，左邊控件左對齊，右麵控件右對齊，中間控件來填充剩下的空間。
或者一列內放3個控件，上麵的與頂部對齊，下麵的沉在最底部，中間控件是彈性的，充滿剩餘空間。
情況一：水平布局
圖示:
這是第一種情形。由於涉及到ImageView，想保持圖片原比例不便使用LinearLayout的weight屬性。
解決辦法：
1.外層套一個RelativeLayout
2.三個控件分別裝進3個LinearLayout中，假如id分別為leftlayout，midlayout，rightlayout
leftlayout屬性：android:layout_width="wrap_content"
rightlayout屬性：android:layout_width="wrap_content"
midlayout屬性： android:layout_width="match_parent"
android:layout_toLeftOf="@+id/rightlayout"
android:layout_toRightOf="@+id/leftlayout"
這樣就可以達到兩端控件分別左右對齊，中部控件填充剩餘空間的效果。
上圖效果的代碼：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:andro
android:layout_width="fill_parent"
android:layout_height="34dp"
android:background="#FFFFFF"
android:orientation="horizontal" >
<LinearLayout
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true">
<ImageView
android:
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center_vertical"
android:layout_marginBottom="2dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="2dp"
android:contentDescription="@string/app_name"
android:src="@drawable/tag_ico_movie" />
</LinearLayout>
<LinearLayout
android:
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_centerVertical="true"
android:layout_toLeftOf="@+id/choosetags_listview_item_rightlayout"
android:layout_toRightOf="@+id/choosetags_listview_item_leftlayout" >
<com.coolletter.util.MarqueeTextView
android:
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
android:checkMark="?android:attr/textCheckMark"
android:ellipsize="marquee"
android:focusableInTouchMode="true"
android:gravity="center_vertical"
android:marqueeRepeatLimit="marquee_forever"
android:paddingEnd="5dp"
android:paddingStart="5dp"
android:scrollHorizontally="true"
android:singleLine="true"
android:textColor="#000000"
android:textSize="15dp" />
</LinearLayout>
<LinearLayout
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" >
<TextView
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="253"
android:textColor="#000000" >
</TextView>
</LinearLayout>
</RelativeLayout>
情形二：垂直布局
圖示：
垂直布局方案：
1.外層放一個RealtiveLayout
2.內部三個控件分別裝進3個LinearLayout中，id設為topayout，midlayout，bottomlayout
toplayout屬性：android:layout_width="wrap_content"
bottomlayout屬性：android:layout_width="wrap_content"
midlayout屬性： android:layout_width="match_parent"
android:layout_below="@+id/toplayout"
android:layout_above="@+id/bottomlayout"
布局：
代碼：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:andro
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#DCDCDC"
android:orientation="vertical" >
<LinearLayout
android:
android:layout_width="fill_parent"
android:layout_height="45dp"
android:layout_alignParentTop="true"
android:background="#FFFAF0"
android:orientation="horizontal" >
<TextView
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="Cancel"
android:textColor="#000000"
android:textSize="16dp" />
<TextView
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="Submit"
android:textColor="#000000"
android:textSize="16dp" />
</LinearLayout>
<LinearLayout
android:
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_above="@+id/letter_newtext_deliver"
android:layout_below="@+id/letter_newtext_toplayout"
android:orientation="vertical"
>
<EditText
android:
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:background="@drawable/corners_bg"
android:gravity="top"
android:inputType="textMultiLine"
android:textColor="#000000" />
</LinearLayout>
<View
android:
android:layout_above="@+id/letter_newtext__bottomlayout"
android:layout_width="fill_parent"
android:layout_height="0.5dp"
android:background="#00BFFF" />
<LinearLayout
android:
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:gravity="bottom"
android:orientation="horizontal" >
<ImageView
android:
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="5dp"
android:background="@drawable/letter_new_ico_maintag" />
<TextView
android:
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:textColor="#000000"
android:textSize="15dp" />
</LinearLayout>
</RelativeLayout>
當這種情況中間的控件是一個ScrollView時，也使用這種辦法。就能實現ScrollView充滿上下兩個控件中間的區域。Reference：
https://blog.csdn.net/geeklei/article/details/38968735
最後更新：2017-04-03 05:40:10