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

Question

是否可以在 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 代码来实现这一点？

Answer 1

这就是我在 XML 中的做法，通过这种方式，我的图像 height 等于屏幕 width 的 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>

看结果：

Answer 2

不，AFAIK 不可能通过 XML。 但是您可以轻松地以编程方式实现它： 如果您愿意，您可以创建一个带有所需参数的自定义视图，然后将其放入 XML 中。 查看https://stackoverflow.com/a/20427215/1159507 以供参考。

Answer 3

如何让它占据屏幕宽度的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);

Answer 4

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

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帖子：123

延伸阅读：Constraint Layout