时间戳

首页 > 解决方案 > 缩放与父元素相同的子布局元素

android - 缩放与父元素相同的子布局元素

问题描述

我正在构建一个 Android 应用程序，它将具有一个显示太阳方位角位置的罗盘面。罗盘面是一个 100x100 dp 的可绘制矢量，我match_parent在两个维度上进行缩放以填充可用的屏幕区域。太阳图像是一个 10x10 dp 矢量可绘制对象，它覆盖在适当位置的罗盘图像上。它们都在 a 内ConstraintLayout，也使用match_parent缩放。

我的问题是我找不到任何方法使太阳可绘制比例与指南针可绘制的因子相同。如果我使用match_parent，它会扩展以填充其父布局。如果我使用wrap_content，它根本不会按比例放大，并且显示为远小于罗盘面大小的 1/10。

下面是我的布局文件的摘录。是否有任何直接的方法，无论是在布局中还是在关联的 Activity 中以声明方式，使较小的可绘制对象按与其兄弟罗盘面可绘制相同的因子进行放大？

脚注：我app:layout_constraintCircle*用来定位太阳可绘制对象。app:layout_constraintCircleRadius根据我能找到的少量信息，我已经让自己不得不在应用程序代码中进行扩展。但是，如果有一种方法可以使罗盘面的比例也可绘制，那就太好了。

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/compass_composite"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="false">

        <ImageView
            android:id="@+id/compass_face"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/content_compass_display"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_compass_face"
            android:tint="@android:color/darker_gray" />

        <ImageView
            android:id="@+id/sun"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintCircle="@+id/compass_face"
            app:layout_constraintCircleRadius="45dp"
            app:layout_constraintCircleAngle="210"
            android:src="@drawable/ic_sun"
            android:tint="@color/bg_noon"
            android:visibility="visible" />

    </androidx.constraintlayout.widget.ConstraintLayout>

标签： androidandroid-layout

解决方案

我找到了一个解决方案：使用基于百分比的布局宽度和高度属性。它们需要大量的 xml 样板文件，但是一旦你把它制作出来，一切都会很好地工作。不过，我仍然必须通过蛮力来缩放圆约束半径。我希望我能找到更好的解决方案，或者未来的 Android 版本提供更好的方法来做到这一点。

顺便说一句，这些所谓的“百分比”值实际上是小数——例如 1/10 是 0.1，而不是 10。我对此感到非常恼火。:)

这是我的布局的摘录，展示了这个技巧：

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/compass_rotating"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentTop="false">

            <ImageView
                android:id="@+id/compass_face"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:contentDescription="@string/content_compass_display"
                android:scaleType="fitCenter"
                android:src="@drawable/ic_compass_face"
                android:tint="@android:color/darker_gray" />

            <ImageView
                android:id="@+id/sun"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:contentDescription="@string/content_sun_position"
                android:tooltipText="@string/content_sun_position"
                android:src="@drawable/ic_solid_dot"
                android:tint="@color/sun_yellow"
                app:layout_constraintCircle="@+id/compass_face"
                app:layout_constraintCircleAngle="0"
                app:layout_constraintCircleRadius="45dp"
                app:layout_constraintHeight_default="percent"
                app:layout_constraintHeight_percent="0.1"
                app:layout_constraintWidth_default="percent"
                app:layout_constraintWidth_percent="0.1"
                tools:ignore="MissingConstraints" />

推荐阅读