相对布局视图对齐

时间:2013-11-06 19:21:16

标签: android android-layout imageview relativelayout

enter image description here

上面的图片有很多问题,首先是图标没有与图像对齐。此外,我希望UserName以图标为中心。

最后,我想让最后一行与左边的图像底部对齐。

我开始使用layout_weight,但我无法使用它。所以,我应用了宽度和高度。

理想情况下,我希望第一个ImageView占据行的30%。 Icon将占用7%,其余的将分配给第一行的textview。

感谢您的建议。

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/custom_shape"
                >

    <ImageView
        android:id="@+id/imgVideo"
        android:src="@drawable/video_default_preview"
        android:layout_width = "150dp"
        android:layout_height= "150dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"/>

    <ImageView
        android:id="@+id/imgOwner"
        android:layout_width = "35dp"
        android:layout_height= "35dp"
        android:src="@drawable/icon_default_avator"
        android:layout_marginBottom="10dp"
        android:layout_alignTop="@+id/imgVideo"
        android:layout_marginRight="10dp"
        android:layout_toRightOf="@id/imgVideo"/>

    <TextView
        android:id="@+id/txtUserName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Plus"
        android:layout_marginBottom="10dp"
        android:layout_toRightOf="@id/imgOwner"/>

    <TextView
        android:id="@+id/txtVideoTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Mercedes SL 55"
        android:textSize="10sp"
        android:layout_marginBottom="10dp"
        android:layout_alignLeft="@+id/imgOwner"
        android:layout_below="@id/imgOwner"/>

    <TextView
        android:id="@+id/txtVideoName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="European Car ..."
        android:textSize="10sp"
        android:layout_alignLeft="@+id/txtVideoTitle"
        android:layout_below="@+id/txtVideoTitle"
        />
</RelativeLayout>

2 个答案:

答案 0 :(得分:2)

我按照你的描述修改了你的xml。

  

理想情况下,我想让第一个ImageView占据30%的份额   行。 Icon将占据7%,其余的将分配给   第一行的textview。

要做到这一点,你应该使用具有权重attr的linearlayouts。 (第一张图片为30%,其他图片为70%。而70%的7%等于图标内的%10)

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

    <ImageView
        android:id="@+id/imgVideo"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_weight="3"
        android:scaleType="centerInside"
        android:src="@drawable/ic_launcher" />

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/imgOwner"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerInside"
                android:src="@drawable/ic_launcher" />

            <TextView
                android:id="@+id/txtVideoTitle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="10"
                android:text="Mercedes SL 55"
                android:textSize="10sp" />
        </LinearLayout>

        <TextView
            android:id="@+id/txtVideoName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="European Car ..."
            android:textSize="10sp" />

        <TextView
            android:id="@+id/txtUserName"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="Plus" />
    </LinearLayout>

</LinearLayout>

答案 1 :(得分:0)

// try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:layout_width="match_parent">

    <ImageView
        android:layout_height="150dp"
        android:layout_width="150dp"
        android:src="@drawable/ic_launcher"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"/>

    <LinearLayout
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_marginLeft="5dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:gravity="center_vertical">

            <ImageView
                android:layout_height="35dp"
                android:layout_width="35dp"
                android:src="@drawable/ic_launcher"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"/>

            <TextView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:textSize="10sp"
                android:layout_marginLeft="5dp"
                android:text="Plus"/>
        </LinearLayout>

        <TextView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:textSize="10sp"
            android:layout_marginTop="5dp"
            android:text="Mercedes SL 55"/>

        <TextView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:textSize="10sp"
            android:layout_marginTop="5dp"
            android:text="European Car ..."/>

    </LinearLayout>
</LinearLayout>