在保持纵横比的同时将可绘制的比例缩放到高度的一半答案

【问题标题】：Scale drawable to be half of the height while maintaining the aspect ratio在保持纵横比的同时将可绘制的比例缩放到高度的一半
【发布时间】：2016-03-31 00:34:57
【问题描述】：

我想垂直放置两个圆圈，我希望它们的大小是父高度的一半。总之，请看下图。

我希望根据x（TextView 的高度）对圆圈进行缩放，并且可以根据系统偏好而有所不同。我在下面创建了一个布局，但它不起作用。这可以实现吗？

更新

根据答案，我为圆分配了一些任意宽度和高度，并将“fitXY”更改为“centerInside”（因为我发现 fitXY 不保持纵横比）。为了模拟不同的系统设置，我为 TextView 设置了任意高度。我将 ImageViews 的背景颜色设置为red 以查看它们的边界。

问题是，如果圆圈的宽度/高度小于 TextView 高度的 1/2（例如，圆圈宽度/高度=10dp，TextView 高度=100dp），则圆圈不会按比例放大。

如果圆圈的宽度/高度大于 TextView 高度的 1/2（例如，圆圈宽度/高度=200dp，TextView 高度=100dp），则圆圈会正确缩放，但不知何故有一些奇怪的空白边距圆圈的左/右侧。

更新结束

我创建了如下布局，但它不起作用。

item.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="wrap_content"
    android:orientation="horizontal"
    >
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">
        <ImageView
            android:src="@drawable/circle"
            android:scaleType="fitXY"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="0dp"/>
        <ImageView
            android:src="@drawable/circle"
            android:scaleType="fitXY"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="0dp"/>
    </LinearLayout>
    <TextView
        android:textAppearance="@android:style/TextAppearance.Large"
        android:text= "If he's so smart, how come he's dead?"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:gravity="center_vertical"
        android:layout_height="wrap_content"/>
</LinearLayout>

circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#0000FF"/>
</shape>

【问题讨论】：

您尝试过的代码到底遇到了什么问题？（我的意思是，发生了什么事？）
似乎drawable的高度变成了我想要的高度的1/2，但是drawable的宽度似乎没有自动缩放，所以drawable没有显示为一个完美的圆形.

标签： android android-layout android-drawable

【解决方案1】：

我通过创建自定义 ImageView 解决了这个问题。基本上，如果宽度和高度不同，这个 ImageView 将宽度设置为高度。

使用这种方式，圆形drawable不需要<Size>。

public class SquareImageView extends ImageView
{
    public SquareImageView(Context context)
    {
        super(context);
    }

    public SquareImageView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom)
    {
        int width = right - left;
        int height = bottom - top;
        if(width!=height)
        {
            post(new Runnable()
            {
                @Override
                public void run()
                {
                    setMinimumWidth(height);
                }
            });
        }
    }
}

【讨论】：

【解决方案2】：

试试下面..

<?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="wrap_content"
android:orientation="horizontal" >

<LinearLayout
    android:id="@+id/ll"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:src="@drawable/circle" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:src="@drawable/circle" />
</LinearLayout>

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/ll"
    android:layout_centerVertical="true"
    android:text="If he&apos;s so smart, how come he&apos;s dead?"
    android:textAppearance="@android:style/TextAppearance.Large" />

还有circle.xml

<?xml version="1.0" encoding="utf-8"?>

<solid android:color="#0000FF" />

<stroke
    android:width="2dp"
    android:color="#fff" />

<size
    android:height="80dp"
    android:width="80dp" />

【讨论】：

圆圈没有缩放。我希望圆圈的高度是 TextView 的一半，无论 TextView 的高度是多少（可能因系统设置而异）。

【解决方案3】：

以下布局部分解决了您的问题。要完成它，您需要在运行时（以编程方式）获取 layout_height 的准确值，并将 LinearLayout 的 layout_width（将替换硬编码值 100dp）设置为 layout_height 值的一半。

<?xml version="1.0" encoding="utf-8"?>

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="2"
    android:columnCount="2"
    >

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="match_parent"
    android:weightSum="2"
    android:orientation="vertical"
    android:layout_column="0"
    android:layout_row="0"
    >

    <ImageView
        android:src="@drawable/circle"
        android:scaleType="fitXY"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

    <ImageView
        android:src="@drawable/circle"
        android:scaleType="fitXY"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
</LinearLayout>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:text= "If he's so smart, how come he's dead?"
    android:layout_column="1"
    android:layout_row="0"
    android:gravity="center_vertical"
    />

【讨论】：

【解决方案4】：

把圆圈换成这个。它应该可以工作。

 <?xml version="1.0" encoding="utf-8"?>
 <shape
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="oval">
      <solid
          android:color="#0000FF"/>
      <size
        android:height="someHeight in dp"
        android:width="sameWidth in dp" />
 </shape>

【讨论】：