Как я могу сделать мою строку ListView похожей на приложение Twitter [Скриншот]?

1

Я создаю клиент типа Twitter. Вот что моя строка ListView выглядит как Изображение 174551

Я хочу, чтобы он больше напоминал:

Изображение 174551

Как я могу получить правильное заполнение и позиционирование аватара? Вот мой XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/RelativeLayout01" xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content">

     <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:id="@+id/avatarImageView">
     </ImageView>
    <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:id="@+id/usernameTextView" 
        android:textStyle="bold"
        android:layout_toRightOf="@+id/avatarImageView"
        android:layout_alignParentTop="true" android:textColor="#636363">
    </TextView>

    <TextView 
        android:id="@+id/bodyTextView" 
        android:layout_below="@+id/usernameTextView" 
        android:layout_toRightOf="@+id/avatarImageView"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" android:textColor="#636363">
    </TextView>
    <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_toRightOf="@+id/usernameTextView" 
        android:id="@+id/dateTextView" 
        android:text="date" android:textColor="#636363">
    </TextView>
</RelativeLayout>
  • 0
    Я скопировал ваш файл макета и наполнил его фиктивными данными, и у меня не было никаких проблем. Как вы тестировали свое приложение? Кстати ... хотя я и сам не нашел ответа, я бы не советовал использовать столько LinearLayouts как предлагают другие ответы. Вот объяснение Ромена Гая, одного из разработчиков android в Google ... РЕДАКТИРОВАТЬ: может быть, вы могли бы опубликовать код вашего адаптера для ListView, что облегчит его тестирование ... слишком ленив, чтобы сделать это сам ;)
Теги:
relativelayout
listview
twitter

2 ответа

3
Лучший ответ
<ListView android:id="@android:id/list"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:layout_weight="1.0"
        android:textColor="#444444"
        android:divider="@drawable/list_divider"
        android:dividerHeight="1px"
        android:cacheColorHint="#00000000">
</ListView>

создайте свой собственный разделитель градиента с именем "list_divider", который представляет собой xml файл, который вы выбрали в своей папке с возможностью вырезания. вы просто указываете цвета для левой, центральной и правой стороны:

list_divider.xml

   <?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:startColor="#999999"
                android:centerColor="#555555"
                android:endColor="#999999"
                android:height="1px"
                android:angle="0" />
        </shape>
    </item>
</layer-list>

для каждой строки в списке. Это также делается через XML файл макета, который вы укажете позже в своем коде.

row.xml

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:padding="4px">
        <ImageView android:id="@+id/avatar"
            android:layout_width="48px"
            android:layout_height="48px"/>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="4px">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1"
                android:gravity="center_vertical">
                <TextView android:id="@+id/name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="left"
                    android:textStyle="bold"
                    android:singleLine="true"
                    android:ellipsize="end"
                    android:textColor="#444444"
                    android:padding="0px"/>
                <TextView android:id="@+id/email_url"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="left"
                    android:singleLine="true"
                    android:ellipsize="end"
                    android:padding="0px"
                    android:textSize="10px"/>
                <TextView android:id="@+id/postTitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="left"
                    android:singleLine="true"
                    android:ellipsize="end"
                    android:padding="0px"
                    android:textSize="10px"/>
                <TextView android:id="@+id/comment"
                    android:orientation="vertical"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:singleLine="false"
                    android:textColor="#666666"
                    android:maxLines="5"
                    android:ellipsize="end"/>
            <TextView android:id="@+id/status"
                    android:orientation="vertical"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:singleLine="true"/>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

изменить: удаленный номер строки, потому что я человек добрый

  • 3
    Ой! Эти номера строк, безусловно, заставят ОП выполнить дополнительную работу.
0

Идите: вы просто используете линейную компоновку вместо относительной. и использовать его веса. и последняя важная вещь - обернуть просмотры внутри компонентов компоновки. например ImageView внутри другого linearlayout или relative и т.д., поэтому попробуйте несколько комбинаций с этим, и он будет работать нормально. также для разделителя списка вы можете установить нулевую вытачку или пользовательскую форму и т.д. фон вашей строки также может быть формой или цветом или рисунком.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/LinearLayout01" xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="130dp">
  <LinearLayout android:layout_height="fill_parent" android:id="@+id/linearLayout1" android:layout_width="wrap_content"
    android:orientation="vertical">
    <ImageView android:id="@+id/avatarImageView" android:layout_height="75dp" android:layout_width="75dp"></ImageView>
  </LinearLayout>
  <LinearLayout android:layout_height="fill_parent" android:id="@+id/linearLayout2" android:orientation="vertical"
    android:layout_width="fill_parent">
    <LinearLayout android:id="@+id/linearLayout3" android:layout_width="fill_parent" android:layout_height="wrap_content">
      <TextView android:text="TextView" android:textStyle="bold" android:layout_height="wrap_content"
        android:textColor="#636363" android:id="@+id/usernameTextView" android:layout_weight="1" android:layout_width="fill_parent"></TextView>
      <TextView android:text="date" android:layout_height="wrap_content" android:textColor="#636363"
        android:id="@+id/dateTextView" android:layout_width="wrap_content"></TextView>
    </LinearLayout>
    <LinearLayout android:layout_height="fill_parent" android:id="@+id/linearLayout4" android:layout_width="fill_parent">
      <TextView android:text="TextView" android:layout_height="wrap_content" android:textColor="#636363"
        android:id="@+id/bodyTextView" android:layout_width="fill_parent"></TextView>
    </LinearLayout>
  </LinearLayout>
</LinearLayout>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню