调整图像大小以适合父布局的高度和宽度

Question

我想根据我的 RelativeLayout 的 Height 和 width 安装一个 Imageview 而不影响其比例。我正在使用 LinearLayout 和 weightSum 并添加另外两个布局，即 RelativeLayout 和 weight 20 以及 LinearLayout 和 weight 80。我是将 imageview 添加到 RelativeLayout 以占用 weight 20 但目前，我的图像占用其内容的宽度并且不遵循父级的宽度，从而导致推动其他布局。

我的布局如下：

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/order_detail_container"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_marginLeft="4dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="16dp"
    android:clickable="true"
    android:foreground="?android:attr/selectableItemBackground"
    card_view:cardCornerRadius="2dp"
    card_view:cardElevation="1dp">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:weightSum="100"
        android:orientation="horizontal">
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="20">
            <Droid.CenterFitImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:adjustViewBounds="true"
                android:id="@+id/imgArticleThumb"
                android:src="@drawable/Icon" />
        </RelativeLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="80"
            android:padding="5dp"
            android:orientation="vertical">
            <Droid.CustomTextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/txtCategory"
                card_view:customFont="Fonts/Roboto-Bold.ttf"
                android:textColor="@color/CatTitle"
                android:textSize="12sp"
                android:text="Category" />
            <Droid.CustomTextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/txtTitle"
                   android:ellipsize="end"
                android:singleLine="true"
                card_view:customFont="Fonts/Roboto-Bold.ttf"
                android:textColor="#000000"
                android:textSize="16sp"
                android:text="Title" />

        </LinearLayout>
    </LinearLayout>
</android.support.v7.widget.CardView>

CenterFitImageView.cs

protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
{    
    try
    {    
        if (Drawable != null)
        {
            int w = MeasureSpec.GetSize(widthMeasureSpec);
            int h = (int)Math.Ceiling((float)w * (float)Drawable.IntrinsicHeight / (float)Drawable.IntrinsicWidth);

            SetMeasuredDimension(w, h);
        }
        else
            base.OnMeasure(widthMeasureSpec, heightMeasureSpec);

    }
    catch (Exception e)
    {
        base.OnMeasure(widthMeasureSpec, heightMeasureSpec);
    }    
}

预期输出：

我的输出：

Answer 1

将图片的 layout_width="0" 替换为 maxwidth。

Answer 2

刚刚使用 android:layout_height="wrap_content" 而不是 ImageView 的 match_parent 并且还设置了文本视图的高度和宽度 wrap_content。

Answer 3

首先为什么你没有使用Linearlayout 而不是RelativeLayout。当您使用所有 LinearLayout 时。

我会这样做。

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/order_detail_container"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_marginLeft="4dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="16dp"
    android:clickable="true"
    android:foreground="?android:attr/selectableItemBackground"
    card_view:cardCornerRadius="2dp"
    card_view:cardElevation="1dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="100"
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="40"
            android:gravity="center">
            <Droid.CenterFitImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:id="@+id/imgArticleThumb"
                android:src="@drawable/Icon" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="60"
            android:orientation="vertical"
            android:layout_marginLeft="5dp">
            <Droid.CustomTextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/txtCategory"
                card_view:customFont="Fonts/Roboto-Bold.ttf"
                android:textColor="@color/CatTitle"
                android:textSize="12sp"
                android:text="Category" />
            <Droid.CustomTextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/txtTitle"
                android:ellipsize="end"
                android:singleLine="true"
                card_view:customFont="Fonts/Roboto-Bold.ttf"
                android:textColor="#000000"
                android:textSize="16sp"
                android:text="Title" />

        </LinearLayout>
    </LinearLayout>
</android.support.v7.widget.CardView>

Answer 4

layout_width="wrap_content" 在你的根 LinaerLayout 上，是你出错的地方。如果您需要根据权重正确对齐视图，则必须使用 match_parent。

请记住，如果您使用 layout_weights 和 weightSum，则必须根据排列方式给出根布局和特定宽度或高度。 wrap_content 表示根据 child 的大小显示您的布局。

因此生成的代码将是

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="100"
    android:orientation="horizontal">
    ....
    ....
</LinearLayout>

这是我得到的输出

第一个带 ImageView 的 RelativeLayout 占用 20，另一个带 TextView 的 RelativeLayout 占用 80。

调整图像大小以适合父布局的高度和宽度

Resize Image to fit Parent layout height and width

android

android-layout

imageview

scaletype