具有按比例缩放的图像和图像右侧的 TextView 的加权垂直 LinearLayout答案

【问题标题】：weighted vertical LinearLayout with proportionally scaled image and TextView to the right of image具有按比例缩放的图像和图像右侧的 TextView 的加权垂直 LinearLayout
【发布时间】：2013-01-29 06:05:18
【问题描述】：

如何在具有权重的 LinearLayout 中根据比例缩放图像，然后在图像右侧放置标签？下面的示例显示了 3 行等高，每行都需要将 TextView 定位在它们的右侧。简而言之：左边是图片，右边是文字。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <ImageView
            android:id="@+id/a1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#33B5E5"
            android:contentDescription="@string/app_name"
            android:scaleType="fitStart"
            android:src="@android:drawable/star_big_on" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/a1"
            android:text="@string/app_name" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <ImageView
            android:id="@+id/a2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#AA66CC"
            android:contentDescription="@string/app_name"
            android:scaleType="fitXY"
            android:src="@android:drawable/star_big_on" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/a2"
            android:text="@string/app_name" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <ImageView
            android:id="@+id/a3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#FF4444"
            android:contentDescription="@string/app_name"
            android:scaleType="fitStart"
            android:src="@android:drawable/star_big_on" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/a3"
            android:text="@string/app_name" />
    </RelativeLayout>

</LinearLayout>

【问题讨论】：

上述布局目前有什么问题？你能发布你现在拥有的和你想要的吗？

标签： android android-layout android-linearlayout android-imageview textview

【解决方案1】：

ImageViews 的宽度和高度大多不适合您想要实现的目标。

试试这个，然后比较两者以找出问题所在：

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#33B5E5" >

        <ImageView
            android:id="@+id/a1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:background="#33B5E5"
            android:contentDescription="@string/app_name"
            android:scaleType="fitStart"
            android:src="@android:drawable/star_big_on" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@id/a1"
            android:text="@string/app_name" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#AA66CC" >

        <ImageView
            android:id="@+id/a2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:scaleType="fitXY"
            android:src="@android:drawable/star_big_on" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/a2"
            android:text="@string/app_name" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#FF4444" >

        <ImageView
            android:id="@+id/a3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:scaleType="fitStart"
            android:src="@android:drawable/star_big_on" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/a3"
            android:text="@string/app_name" />
    </RelativeLayout>

</LinearLayout>

请注意，这在 ADT 工具图形布局中无法正确显示 - 但在设备上可以。

【讨论】：

【解决方案2】：

对于您要查找的内容，我建议您使用水平线性布局而不是相对布局。这使您可以使用权重进行水平放置，从而满足您的需求：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" >

    <ImageView
        android:id="@+id/ImageView03"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#FF4444"
        android:contentDescription="@string/app_name"
        android:scaleType="fitStart"
        android:src="@android:drawable/star_big_on" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:text="@string/app_name" />

</LinearLayout>

这将使您的 TextView 仅占用它需要的空间（在右侧），而图像将占用水平布局的所有剩余空间（在左侧）。水平布局将均匀地占用垂直布局内的可用空间。

注意：这会给你一个“嵌套权重不利于性能”的警告，但是因为这是一个简单的布局，并且嵌套权重对于垂直和水平是分开的，所以它不应该对性能有任何明显的影响。如果您在重复视图上使用它或布局复杂得多，我会推荐其他东西。

【讨论】：