如何在XML中为视图指定宽度和高度的百分比？

Posted 2021-04-02

可以在XML LinearLayout中添加一个ImageView，其宽度为屏幕宽度的15％，并且高度完全相同？

我尝试使用此对话框代码，当用户单击地图上的标记时，该对话框代码将显示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_info_bubble"
    android:orientation="vertical">
.
. [some more content here]
.
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="100">
        <ImageView
            android:id="@+id/favorite"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:adjustViewBounds="true"
            android:layout_gravity="center_horizontal"
            android:layout_weight="15"
            android:layout_marginEnd="5dp" />
    </LinearLayout>
</LinearLayout>

但是有两个问题：

问题1：android：layout_weight =“15”占据了对话框的15％，而不是屏幕的宽度，这是一个很大的问题，因为对话框的宽度或多或少取决于它的内容。

问题2：宽度为15％，但高度是图像的实际高度。我不知道如何使它具有与其宽度完全相同的高度。它是一个方形图像，所以我试着让它尊重它的比例，把wrap_content放在高度上，并调整ViewBounds = true，但它不起作用。

问题3：ImageView没有居中，与左边对齐......我需要它居中。

如何使用XML而不是Java代码实现这一目标？

谢谢

答案

这就是我在XML中的做法，通过这种方式我的图像高度等于屏幕宽度的15％：

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

    <ImageView
        android:id="@+id/favorite"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_launcher_background"
        app:layout_constraintDimensionRatio="H, 100:15"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

看看结果：

另一答案

不，AFAIK通过XML无法实现。但是您可以通过编程方式轻松实现它：如果您需要，可以使用所需参数创建自定义视图，并将其放入XML中。查看https://stackoverflow.com/a/20427215/1159507以供参考。

另一答案

如何使它占据屏幕宽度的15％：

//Get 15% of screen width:
myWidth = getWindow().getDecorView().getWidth() * .15;

myImageView = findViewById(R.id.favorite);

myView.setWidth(myWidth);

//Height should be the same as the width
myView.setHeight(myWidth);

另一答案

以下两行表示图像视图的宽度将以百分比确定，并且它将相对于父级。

app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.15"

以下行表示imageview的宽度和高度将相同。比例是宽度：高度。

app:layout_constraintDimensionRatio="1:1"

使用Guidelines，您可以在约束布局下设置视图中的％宽度/高度。以下说该指南是其父母的20％。然后，您可以将具有约束集的视图放置到本指南中。

app:layout_constraintGuide_percent="0.2"

以下是您可以尝试的完整示例xml。

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

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

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#423dfe"

        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.15"
        app:layout_constraintDimensionRatio="1:1"

        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"

        app:layout_constraintBottom_toTopOf="@+id/guideline" />

</android.support.constraint.ConstraintLayout>

您只能使用ConstraintLayout的beta版本执行此操作：

compile 'com.android.support.constraint:constraint-layout:1.1.0-beta1'

相关SO帖子：1 2 3

进一步阅读：Constraint Layout