android - 如何实现可缩放的图像布局？

标签 android android-constraintlayout

我想在图像的右上角显示一个图标。另外，它应该稍微偏移。最后，两者的组合应该是可缩放的，因此总宽度加倍会导致图像和图标的宽度是原始宽度的两倍。当然，应保持长宽比，使高度也加倍。

由于这个实际上简单的问题的描述相当复杂，所以这里有一张巧妙的图画来说明这个主题:)

enter image description here

所以，假设我有一个带有 GridLayout 的 RecyclerView，其中每个图像图 block 的宽度为 200dp。然后，灰色区域的宽度和高度应为 200dp，橙色图标的宽度和高度为 50dp，图标到蓝色图像边框的偏移量为 25dp，依此类推。

如果我决定将 GridLayout 中的列数加倍，灰色区域的宽度和高度将为 100dp 等。

这是我迄今为止尝试过的:

我从一个 FrameLayout 开始，它在最简单的情况下工作得很好，但一旦你想用百分比指定尺寸，就会出现问题。

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="50dp"
        android:adjustViewBounds="true"
        app:srcCompat="@drawable/blueShip200x200" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|end"
        android:layout_marginRight="25dp"
        android:layout_marginTop="25dp"
        app:srcCompat="@drawable/new50x50" />
</FrameLayout>

然后，我了解了最近随支持库引入的 PercentFrameLayout - 并且已被弃用:https://developer.android.com/reference/android/support/percent/PercentFrameLayout.html

因此，现在建议改用 ConstraintLayout(请参阅上面的链接)，您可以使用辅助指南来使用百分比定义其位置。

幸运的是，文档给出了如何替换 PercentFrameLayout 的示例，如果灰色框具有固定的宽度和高度，该示例效果很好:

<android.support.constraint.ConstraintLayout
    android:layout_width="200dp"
    android:layout_height="200dp">

    <android.support.constraint.Guideline
        android:id="@+id/left_image_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".25" />

    <android.support.constraint.Guideline
        android:id="@+id/right_image_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".75" />

    <android.support.constraint.Guideline
        android:id="@+id/top_image_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".25" />

    <android.support.constraint.Guideline
        android:id="@+id/bottom_image_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".75" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@+id/bottom_image_guideline"
        app:layout_constraintLeft_toLeftOf="@+id/left_image_guideline"
        app:layout_constraintRight_toRightOf="@+id/right_image_guideline"
        app:layout_constraintTop_toTopOf="@+id/top_image_guideline"
        app:srcCompat="@drawable/blueShip200x200" />

    <android.support.constraint.Guideline
        android:id="@+id/left_icon_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".625" />

    <android.support.constraint.Guideline
        android:id="@+id/right_icon_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent=".875" />

    <android.support.constraint.Guideline
        android:id="@+id/top_icon_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".125" />

    <android.support.constraint.Guideline
        android:id="@+id/bottom_icon_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent=".375" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@+id/bottom_icon_guideline"
        app:layout_constraintLeft_toLeftOf="@+id/left_icon_guideline"
        app:layout_constraintRight_toRightOf="@+id/right_icon_guideline"
        app:layout_constraintTop_toTopOf="@+id/top_icon_guideline"
        app:srcCompat="@drawable/new50x50" />
</android.support.constraint.ConstraintLayout>

但是如果您不指定固定尺寸...则不会。

调整 FrameLayout 示例中的以下几行(layout_width、layout_height、adjustViewBounds)会产生 ConstraintLayout 高度为 0。

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<ImageView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:adjustViewBounds="true"
    app:layout_constraintBottom_toBottomOf="@+id/bottom_image_guideline"
    app:layout_constraintLeft_toLeftOf="@+id/left_image_guideline"
    app:layout_constraintRight_toRightOf="@+id/right_image_guideline"
    app:layout_constraintTop_toTopOf="@+id/top_image_guideline"
    app:srcCompat="@drawable/blueShip200x200" />

我希望可以通过对布局文件进行一些更改来以非编程方式解决此问题。基本上，只是 adjustViewBounds 无法将 ImageView 的宽度和高度设置为 match_constraint (0dp)。

另外，如果可能的话，我想坚持使用ConstraintLayout。也许可以使用 LinearLayout 与 Space 和 layout_weight 来解决这个问题 - 我还没有尝试过。

谢谢!

最佳答案

您可以使用约束布局创建布局。

首先，使用一些 View 作为指导将布局拆分为 5x5。 关键是使用水平和垂直权重。

enter image description here 

<!--GUIDE LINE-->
<TextView
    android:id="@+id/guide_1"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/primary_light"
    android:text="25%"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_weight="25"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/guide_2"
    app:layout_constraintTop_toBottomOf="@+id/guide_2"
    app:layout_constraintVertical_weight="25" />

<TextView
    android:id="@+id/guide_2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/primary_light"
    android:text="37.5%"
    app:layout_constraintBottom_toTopOf="@id/guide_1"
    app:layout_constraintHorizontal_weight="37.5"
    app:layout_constraintLeft_toRightOf="@id/guide_1"
    app:layout_constraintRight_toLeftOf="@id/guide_3"
    app:layout_constraintTop_toBottomOf="@id/guide_3"
    app:layout_constraintVertical_weight="37.5" />

<TextView
    android:id="@+id/guide_3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/primary_light"
    android:text="12.5%"
    app:layout_constraintBottom_toTopOf="@id/guide_2"
    app:layout_constraintHorizontal_weight="12.5"
    app:layout_constraintLeft_toRightOf="@id/guide_2"
    app:layout_constraintRight_toLeftOf="@id/guide_4"
    app:layout_constraintTop_toBottomOf="@id/guide_4"
    app:layout_constraintVertical_weight="12.5" />
<TextView
    android:id="@+id/guide_4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/primary_light"
    android:text="12.5%"
    app:layout_constraintBottom_toTopOf="@id/guide_3"
    app:layout_constraintHorizontal_weight="12.5"
    app:layout_constraintLeft_toRightOf="@id/guide_3"
    app:layout_constraintRight_toLeftOf="@id/guide_5"
    app:layout_constraintTop_toBottomOf="@id/guide_5"
    app:layout_constraintVertical_weight="12.5" />

<TextView
    android:id="@+id/guide_5"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/primary_light"
    android:text="12.5%"
    app:layout_constraintBottom_toTopOf="@id/guide_4"
    app:layout_constraintHorizontal_weight="12.5"
    app:layout_constraintLeft_toRightOf="@id/guide_4"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_weight="12.5" />

创建指南后，您可以将所需的图像与指南一起放置...

enter image description here

这两个 View 如下所示。

<TextView
    android:text="MAIN ICON"
    android:textColor="@color/icons"
    android:gravity="center"
    android:textSize="60sp"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintLeft_toLeftOf="@id/guide_2"
    app:layout_constraintBottom_toBottomOf="@id/guide_2"
    app:layout_constraintTop_toTopOf="@id/guide_3"
    app:layout_constraintRight_toRightOf="@id/guide_3"
    android:background="@color/primary"/>
<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="@id/guide_4"
    app:layout_constraintRight_toRightOf="@id/guide_4"
    app:layout_constraintBottom_toBottomOf="@id/guide_3"
    app:layout_constraintLeft_toLeftOf="@id/guide_3"
    android:background="@color/accent"
    android:text="NEW"
    android:gravity="center"
    android:textSize="40sp"
    android:textColor="@color/icons"/>

关于android - 如何实现可缩放的图像布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46914837/

上一篇：android - 无法识别端点客户端库

下一篇：android - 圆形 ImageButton 全宽背景图像

相关文章：

android - 从 Asynctask 的 onPostExecute() 方法调用 onResume() 方法

java - Java中->是什么意思

android - 为什么我的 TextView 在 ConstraintLayout 中提前换行？

android - 使用嵌套约束布局的多个 View 单击事件(2.0.0 beta 2)

android - 如何在 Android Studio 中将我的 Android 测试库与我的应用程序库分开？

Android Google Maps V2 更改我的位置图标

android - 在使用 alignParentBottom 的相对布局中，如何在我的代码中的约束布局中使用相同的布局？

android - MotionLayout 组可见性问题

android-toolbar - 将约束布局折叠到 SmallerView

Android:如何获取设备的真实屏幕尺寸？

©2024 IT工具网  联系我们