Блог

Главная - Вопросы по программированию - Макет контрольного списка с фиксированной частью

Макет контрольного списка с фиксированной частью

#android

#Android

Вопрос:

Я пытаюсь создать макет контрольного списка, в котором есть строки такого типа: введите описание изображения здесь

Где:

  • A — это флажок (его фиксированный размер)
  • B — это TextView (он должен растягивать все доступное пространство)
  • C — это TextView (он должен растягивать все доступное пространство)
  • D — это TextView (это фиксированный размер)
  • E является родительским элементом, строкой списка

Это мой layout.xml:

 <LinearLayout 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: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>

И я получаю такой результат:

введите описание изображения здесь

Первая строка содержит очень длинное содержимое для B и C, и поэтому D вообще не отображается.

Вторая строка содержит длинное содержимое, но короче первой, и поэтому D сокращается.

Третья строка содержит краткое содержимое, и D отображается правильно.

Как я мог бы изменить свой макет, чтобы D всегда отображался правильно, а B amp; C будут заполнять только доступное пространство?

Комментарии:

1. 1 за хороший, сформулированный вопрос со структурой макета!

Ответ №1:

Вы должны использовать RelativeLayout в качестве основного контейнера,
сначала поместите A, затем поместите D, после них поместите B и C.

Таким образом, ваш новый макет будет выглядеть следующим образом:

 <?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>

Вы, конечно, должны изменить идентификаторы флажка и textview в соответствии с вашими предпочтениями.

Таким образом, ваш вывод будет выглядеть согласованным как в альбомном, так и в портретном режиме:

прообраз списка и ландшафт списка

Обновленный макет и скриншоты (в соответствии с предоставленным результатом).

Ответ №2:

У меня есть изменения в вашем XML

Вот оно

 <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>

Ответ №3:

Несмотря на то, что приведенный выше ответ работает, я бы предложил заменить LinearLayout и изменить выравнивание двух TextViews в середине, поскольку вы уже находитесь в 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" />

В целом рекомендуется экономить количество макетов, особенно потому, что это макет для элементов вашего списка, но я думаю, что Ромен Гай лучше объяснит это здесь 😉