缩放 ImageButton答案

【问题标题】：Scale a ImageButton缩放 ImageButton
【发布时间】：2020-05-15 13:24:57
【问题描述】：

我有一个应用程序，它有一个带有 3 个图像按钮和一个横幅广告的活动。像这样的...

ImageButton 布局大小是包装内容，每个来源都是我制作的 png。现在，当我在小屏幕上进行测试时，底部的屏幕位于横幅广告的后面。我想根据屏幕的大小（主要是高度）来缩放 ImageButtons。

谁能告诉我正确的做法？

我必须制作适合小屏幕的小型 png 源，然后使用最小的屏幕宽度限定符制作更多可绘制对象？ 320dpi 和 480dpi 的差距很大，我必须在两者之间制作更多文件夹。

提前谢谢大家！！！

【问题讨论】：

ImageButtons 基本上只是ImageViews，所以只需为 ImageView 做你想做的事情。目前尚不清楚您想要的行为与当前的行为。
我目前拥有的是 3 个具有 png 源大小的图像视图（宽度和高度的包装内容）。在这种情况下，当屏幕较小时，底部按钮位于横幅广告的后面。当屏幕对于所有 4 个项目（3 个按钮和横幅）都太小时，我希望 Imageview 选择一个较小的源（我将不得不创建 png）。
他们应该只是调整大小而不是需要新的来源吗？
就是这样，如果调整大小正确，我该怎么做？我可以以编程方式获取屏幕高度吗？要知道我什么时候必须这样做。

标签： android layout screen scale imagebutton

【解决方案1】：

如果您不使用约束布局，也许您可以尝试在主布局中使用带有权重的 LinearLayout 来划分屏幕......如下所示，它可能会起作用：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" 
android:layout_height="match_parent">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="4"
    android:padding="10dp">

    <ImageButton
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/..."/>

    <ImageButton
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/..."/>

    <ImageButton
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/..."/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/..."/>


</LinearLayout>
</RelativeLayout>

随心所欲地调整它......希望这个工作:)

【讨论】：

【解决方案2】：

您不需要创建单独的图像，您可以使用ConstraintLayout，它会自动为您管理尺寸。我已经测试了下面的代码，它似乎工作正常。试一试：

your_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/imageButton2"
        android:background="@color/white"
        android:src="@drawable/image_1"/>

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageButton1"
        app:layout_constraintBottom_toTopOf="@id/imageButton3"
        android:background="@color/white"
        android:src="@drawable/image_2"/>

    <ImageButton
        android:id="@+id/imageButton3"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageButton2"
        app:layout_constraintBottom_toTopOf="@id/bannerContainer"
        android:background="@color/white"
        android:src="@drawable/image_3"/>

    <!-- Whatever container your banner is in -->
    <RelativeLayout
        android:id="@+id/bannerContainer"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#000"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

注意： 我添加了背景颜色只是为了测试。您需要关注的重点是ImageButton 的高度全部为0dp，并且约束自动管理高度。

ConstraintLayout 的好处是您不需要像在 LinearLayout 中那样指定不同的权重，因此您可以拥有不同高度的图像，它会正常工作。

【讨论】：

【解决方案3】：

如果您使用 css，您可以使用属性单位 vh（视口高度）。测量值是视口/屏幕高度的百分比。例如height: 10vh; width: auto; 会将元素高度渲染为屏幕高度的 10%，而不会扭曲您的 png。如果您对显示的四个元素使用此测量值，如果它们的值加起来为 100，它们将同时出现在屏幕上。

https://www.sitepoint.com/css-viewport-units-quick-start/

【讨论】：