开发者

Checklist layout with a fixed part

I'm trying to make the layout of a checklist, which has this type of row:

Checklist layout with a fixed part

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:

Checklist layout with a fixed part

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:

Checklist layout with a fixed part

and

Checklist layout with a fixed part

Updated 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 ;)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜