Checklist layout with a fixed part
I'm trying to make the layout of a checklist, which has this type of row:
Where:
- A is a CheckBox (it's fixed size)
- B is a TextView (it should stretch all available space)
- C is a TextView (it should stretch all available space)
- D is a TextView (it's fixed size)
- E is the parent, the row of the list
This is my layout.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizo开发者_JAVA百科ntal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical">
<CheckBox android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
android:paddingRight="6dp"
android:gravity="center_vertical">
<TextView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="6dp"
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceMedium"
android:singleLine="true" />
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceSmall"
android:singleLine="true" />
</LinearLayout>
<TextView android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="2"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:gravity="center_vertical|right"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#2B78E4" />
</LinearLayout>
And I'm getting this result:
The first row has very long content on B and C, and so D is not appearing at all.
The second row has long content, but shorter than first's, and so D is shrinked.
The third row has short content, and D is displayed correctly.
How could I modify my layout so D is always displayed correctly, and B&C will be filling only the available space?
You should use RelativeLayout, as main container,
first put A, then put D, after them put B and C.
So your new layout would look like:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="center_vertical">
<CheckBox android:id="@+id/checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:id="@+id/textView" android:layout_alignParentRight="true"
android:layout_width="wrap_content" android:layout_height="60dp"
android:layout_marginLeft="6dp" android:layout_marginRight="6dp"
android:gravity="center_vertical|right" android:layout_weight="2"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#2B78E4" />
<TextView android:id="@+id/txt1"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_marginLeft="6dp" android:layout_marginTop="6dp"
android:layout_toRightOf="@id/checkbox" android:layout_toLeftOf="@id/textView"
android:gravity="center_vertical" android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView android:id="@+id/txt2" android:layout_below="@id/txt1"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_marginLeft="6dp" android:layout_marginTop="3dp"
android:layout_toRightOf="@id/checkbox" android:layout_toLeftOf="@id/textView"
android:gravity="center_vertical" android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
You should of course change the ids of the checkbox and textview for your preference.
This way your output will look consistent in both landscape and portrait mode:
andUpdated layout and screenshots (to match the provided output).
I have changes to your XML
Here it is
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="@+id/ckb"
android:gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" />
<RelativeLayout
android:layout_centerInParent="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/ckb"
android:layout_toLeftOf="@+id/txt">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
android:paddingRight="6dp"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceMedium"
android:singleLine="true" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceSmall"
android:singleLine="true" />
</LinearLayout>
</RelativeLayout>
<TextView
android:id="@+id/txt"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="2"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:gravity="center_vertical"
android:layout_alignParentRight="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#2B78E4" />
</RelativeLayout>
Even though the above answer works I'd suggest to replace the LinearLayout and change the alignment of the 2 TextViews in the middle, since you are already in a RelativeLayout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="60dp">
<CheckBox android:layout_alignParentLeft="true"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:id="@+id/checkBox1" android:layout_centerVertical="true" />
<TextView android:lines="1" android:id="@+id/textView1"
android:text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. "
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_toRightOf="@+id/checkBox1"
android:layout_alignTop="@+id/checkBox1"
android:layout_toLeftOf="@+id/textView3"
android:layout_marginLeft="6dp" />
<TextView android:id="@+id/textView2"
android:text="Lorem ipsum dolor sit amet, consetetur sadip"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:layout_below="@+id/textView1" android:layout_alignLeft="@+id/textView1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:lines="1" android:layout_toLeftOf="@+id/textView3" />
<TextView android:id="@+id/textView3" android:text="TextView"
android:layout_height="match_parent" android:layout_width="wrap_content"
android:layout_alignParentRight="true" android:gravity="center_vertical|right"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#2B78E4" android:layout_marginLeft="6dp" />
In general it's good practice to save the amount of Layouts, especiallay as this is a layout for your list items, but I think Romain Guy is better in explaining this here ;)
精彩评论