具有多个ImageView和TextView的自定义ListView布局

时间:2015-07-30 13:02:07

标签: android xml android-layout listview

我的ListView有以下XML布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_gravity="center"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/image"/>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_gravity="left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:text="Hello"/>

        <TextView
            android:id="@+id/textView2"
            android:layout_gravity="left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:text="Hello"/>
    </LinearLayout>

    <ImageView
        android:id="@+id/imageView2"
        android:layout_gravity="center"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/image"/>

</LinearLayout>

这是我想用这个XML代码实现的(左/右方的空框是图像): What I want

到目前为止,这是我上面的代码所做的: Current

我希望第二张图片出现在视图的最右侧,让它看起来像我的第一个例子。

修改

我已经解决了我的问题,我的最终工作代码是:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_gravity="center"
        android:layout_width="48dp"
        android:layout_height="48dp" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_gravity="left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:text="Hello"/>

        <TextView
            android:id="@+id/textView2"
            android:layout_gravity="left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:text="Hello"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView3"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:text="Hello"/>

        <TextView
            android:id="@+id/textView4"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:text="Hello"/>
    </LinearLayout>

    <ImageView
        android:id="@+id/imageView2"
        android:layout_gravity="center"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/image"/>

</LinearLayout>

7 个答案:

答案 0 :(得分:1)

您可以使用属性android:layout_weight

两个ImageView的宽度均为48dp,其余部分将在两个LinearLayouts之间平均分配。完全像你的照片。您可以在第二个LinearLayout中对齐文本。

<ImageView
    android:id="@+id/imageView1"
    android:layout_gravity="center"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@drawable/image"/>

<LinearLayout 
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_gravity="left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:text="Hello"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_gravity="left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:text="Hello"/>
</LinearLayout>

<LinearLayout 
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView3"
        android:layout_gravity="left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:text="Hello"/>

    <TextView
        android:id="@+id/textView4"
        android:layout_gravity="left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:text="Hello"/>
</LinearLayout>

<ImageView
    android:id="@+id/imageView2"
    android:layout_gravity="center"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@drawable/image"/>

答案 1 :(得分:1)

我认为您应该使用Relative Layout,因为它涵盖了不同设备的各种屏幕。

OUTPUT

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >

  <ImageView
    android:id="@+id/imageView1"
    android:layout_gravity="center"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@drawable/image1"
    android:layout_alignParentLeft="true"/>

  <LinearLayout
    android:id="@+id/l1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_toRightOf="@+id/imageView1"
    android:layout_toEndOf="@+id/imageView1" >

      <TextView
        android:id="@+id/textView1"
        android:layout_gravity="left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:text="Hello"/>

      <TextView
        android:id="@+id/textView2"
        android:layout_gravity="left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:text="Hello"/>
  </LinearLayout>
  <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_toLeftOf="@+id/imageView2"
    android:layout_toStartOf="@+id/imageView2" >

      <TextView
        android:id="@+id/textView3"
        android:layout_gravity="left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:text="Hello"/>

      <TextView
        android:id="@+id/textView4"
        android:layout_gravity="left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:text="Hello"/>
  </LinearLayout>

  <ImageView
    android:id="@+id/imageView2"
    android:layout_gravity="center"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@drawable/image1"
    android:layout_alignParentRight="true"/>
</RelativeLayout>

答案 2 :(得分:0)

你可以像这样将内部LinearLayout的宽度和高度设置为wrap_content。

<LinearLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_gravity="left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:text="Hello"/>

        <TextView
            android:id="@+id/textView2"
            android:layout_gravity="left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:text="Hello"/>
    </LinearLayout>

答案 3 :(得分:0)

那么在这种情况下,你必须使用framelayout。我不会给你直接的代码,因为它没有必要。使用这些步骤:

使用framelayout作为容器。在framelayout中,使用另外三种布局,例如framelayout或线性布局。如下所示,为它们添加重力:

1. android:layout_gravity="center_vertical|left"
2. android:layout_gravity="center_vertical|center_horizontal"
3. android:layout_gravity="center_vertical|right"

答案 4 :(得分:0)

你可以查看这段代码。根据图像大小更改layout_weight属性值。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_gravity="center"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_weight="0.15"
        android:src="@drawable/image"/>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="0.70">

        <TextView
            android:id="@+id/textView1"
            android:layout_gravity="left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:text="Hello"/>

        <TextView
            android:id="@+id/textView2"
            android:layout_gravity="left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:text="Hello"/>
    </LinearLayout>

    <ImageView
        android:id="@+id/imageView2"
        android:layout_weight="0.15"
        android:layout_gravity="center"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/image"/>

</LinearLayout>

答案 5 :(得分:0)

使用相对布局如下:

<?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="match_parent"
   >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_gravity="center"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/image"
        android:layout_alignParentLeft="true"
        />

    <RelativeLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_toRightOf="@id/imageView1" >

        <TextView
            android:id="@+id/textView1"
            android:layout_gravity="left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:text="Hello"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true">

        </TextView>
        <TextView
            android:id="@+id/textView2"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:text="Hello"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"/>
         <TextView
            android:id="@+id/textView3"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:text="Hello"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true">

        </TextView>
        <TextView
            android:id="@+id/textView4"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:text="Hello"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"/>
    </RelativeLayout>

    <ImageView
        android:id="@+id/imageView4"
        android:layout_gravity="center"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/image"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

答案 6 :(得分:0)

使用相对布局以获得更大的灵活性,并使用以下代码更新当前布局: -

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
 >

<ImageView
    android:id="@+id/imageView1"
    android:scaleType="centerCrop"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@drawable/image"/>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_marginLeft="20dp"
    android:layout_toRightOf="@+id/imageView1">

    <TextView
        android:id="@+id/textView1"
        android:layout_gravity="left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:text="Hello"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_gravity="left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:layout_marginTop="10dp"
        android:text="Hello"/>
</LinearLayout>

<ImageView
    android:id="@+id/imageView2"
    android:scaleType="centerCrop"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_alignParentRight="true"
    android:src="@drawable/image"/>