相对布局中的百分比宽度

Question

我正在为我的 Android 应用程序中的登录Activity设计表单布局。 下图是我想要的样子：

我能够使用以下XML实现此布局。 问题是，它有点hackish。 我不得不硬编码主机 EditText 的宽度。 具体来说，我必须指定：

android:layout_width="172dp" 

我真的很想给主机和端口 EditText 的百分比宽度。 （主机占 80%，端口占 20%。）这可能吗？ 以下 XML 适用于我的 Droid，但似乎不适用于所有屏幕。 我真的想要一个更强大的解决方案。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/home"
        android:paddingLeft="15dp"
        android:paddingTop="0dp"
        android:text="host"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/home"
        android:layout_toRightOf="@+id/host_input"
        android:paddingTop="0dp"
        android:text="port"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="172dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/host_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/host_label"
        android:layout_marginTop="4dp"
        android:layout_toRightOf="@id/host_input"
        android:background="@android:drawable/editbox_background"
        android:inputType="number" />

    <TextView
        android:id="@+id/username_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/host_input"
        android:paddingLeft="15dp"
        android:paddingTop="15dp"
        android:text="username"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/username_input"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/username_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textEmailAddress" />

    <TextView
        android:id="@+id/password_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/username_input"
        android:paddingLeft="15dp"
        android:paddingTop="15dp"
        android:text="password"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/password_input"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/password_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textPassword" />

    <ImageView
        android:id="@+id/home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="false"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:paddingTop="15dp"
        android:scaleType="fitStart"
        android:src="@drawable/home" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/password_input"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:text="   login   "
        android:textSize="18sp" >
    </Button>

</RelativeLayout>

Answer 1

您正在寻找android:layout_weight属性。 它将允许您使用百分比来定义您的布局。

在以下示例中，左按钮使用 70% 的空间，而右按钮使用 30%。

<LinearLayout
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:text="left" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".70" /> 

    <Button
        android:text="right" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".30" />

</LinearLayout>

它适用于任何类型的视图，您可以用一些 EditText 替换按钮以满足您的需要。

请务必将layout_width设置为0dp ，否则您的视图可能无法正确缩放。

请注意，权重总和不必等于 1，我只是觉得这样更容易阅读。 您可以将第一个权重设置为 7，将第二个权重设置为 3，它会给出相同的结果。

Answer 2

这并不能完全回答最初的问题，即 70/30 拆分，但在组件之间 50/50 拆分的特殊情况下，有一种方法：在中心放置一个不可见的支柱并使用它来定位两个感兴趣的组件。

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <View android:id="@+id/strut"
        android:layout_width="0dp"
        android:layout_height="0dp" 
        android:layout_centerHorizontal="true"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/strut"
        android:layout_alignParentLeft="true"
        android:text="Left"/> 
    <Button 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/strut"
        android:layout_alignParentRight="true"
        android:text="Right"/>
</RelativeLayout>

由于这是一种非常常见的情况，因此该解决方案不仅仅是一种好奇心。 这有点小技巧，但很有效，因为空的、零尺寸的支柱应该花费很少。

不过，总的来说，最好不要对现有的 Android 布局抱有太多期望……

Answer 3

更新 1

正如@EmJiHash PercentRelativeLayout 所指出的， API 级别 26.0.0 已弃用

下面引用谷歌评论：

此类在 API 级别 26.0.0 中已弃用。 考虑改用 ConstraintLayout 和相关的布局。 下面展示了如何使用 ConstraintLayout 复制百分比布局的功能

---

谷歌推出了名为android.support.percent的新 API

然后你可以指定百分比来查看

添加编译依赖，如

implementation 'com.android.support:percent:22.2.0

在那， PercentRelativeLayout是我们可以做的百分比布局

 <android.support.percent.PercentRelativeLayout
     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
         app:layout_widthPercent="50%"
         app:layout_heightPercent="50%"
         app:layout_marginTopPercent="25%"
         app:layout_marginLeftPercent="25%"/>
 </android.support.percent.PercentRelativeLayout>

Answer 4

您不能使用百分比来定义相对布局中视图的尺寸。 最好的方法是使用 LinearLayout 和权重，或自定义布局。

Answer 5

您可以查看新的百分比支持库。

compile 'com.android.support:percent:22.2.0'

文档

样本

Answer 6

您可以使用PercentRelativeLayout ，它是最近对设计支持库的无证补充，不仅可以指定元素之间的相对关系，还可以指定可用空间的总百分比。

支持基于百分比的尺寸和边距的 RelativeLayout 的子类。 您可以使用带有“百分比”后缀的属性来指定尺寸或子级边距。

<android.support.percent.PercentRelativeLayout
     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:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_widthPercent="50%"
      app:layout_heightPercent="50%"
      app:layout_marginTopPercent="25%"
      app:layout_marginLeftPercent="25%"/>
</android.support.percent.PercentFrameLayout>

Percent 包提供API 以支持在您的应用程序中添加和管理基于百分比的维度。

要使用，您需要将此库添加到 Gradle 依赖项列表中：

dependencies {
    compile 'com.android.support:percent:22.2.0'//23.1.1
}

Answer 7

由于 PercentRelativeLayout 在 26.0.0 中已弃用，并且 RelativeLayout 内的 LinearLayout 等嵌套布局对性能有负面影响（ 了解 ConstraintLayout 的性能优势），实现百分比宽度的最佳选择是用 ConstraintLayout 替换 RelativeLayout。

这可以通过两种方式解决。

解决方案 #1 使用带有百分比偏移的指南

<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">

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Host"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/host_input" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Port"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="textEmailAddress"
        app:layout_constraintTop_toBottomOf="@+id/host_label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/guideline" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="number"
        app:layout_constraintTop_toBottomOf="@+id/port_label"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintRight_toRightOf="parent" />

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

</android.support.constraint.ConstraintLayout>

解决方案#2 为 EditText 使用带加权宽度的链

<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">

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Host"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/host_input" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Port"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="textEmailAddress"
        app:layout_constraintHorizontal_weight="0.8"
        app:layout_constraintTop_toBottomOf="@+id/host_label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="number"
        app:layout_constraintHorizontal_weight="0.2"
        app:layout_constraintTop_toBottomOf="@+id/port_label"
        app:layout_constraintLeft_toRightOf="@+id/host_input"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

在这两种情况下，你都会得到这样的东西

Answer 8

我已经解决了这个创建自定义视图的问题：

public class FractionalSizeView extends View {
  public FractionalSizeView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public FractionalSizeView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = MeasureSpec.getSize(widthMeasureSpec);
    setMeasuredDimension(width * 70 / 100, 0);
  }
}

这是不可见的支柱，我可以使用它来对齐 RelativeLayout 中的其他视图。

Answer 9

更新

正如@EmJiHash PercentRelativeLayout 所指出的，PercentFrameLayout 在 API 级别 26.0.0 中已弃用

考虑使用 ConstraintLayout

谷歌推出了名为android.support.percent的新 API

1)百分比相对布局

2）百分比框架布局

添加编译依赖，如

compile 'com.android.support:percent:23.1.1'

您可以以百分比指定尺寸，以便同时获得RelativeLayout和百分比的好处

 <android.support.percent.PercentRelativeLayout
         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"/>
     <TextView
         app:layout_widthPercent="40%"
         app:layout_heightPercent="40%"
         app:layout_marginTopPercent="15%"
         app:layout_marginLeftPercent="15%"/>
 </android.support.percent.PercentRelativeLayout/>

Answer 10

PercentRelativeLayout已从支持库的修订版 26.0.0 中弃用。

Google 引入了名为ConstraintLayout的新布局。

在模块级 build.gradle 文件中添加库作为依赖项：

     dependencies {
        compile 'com.android.support.constraint:constraint-layout:1.0.1'
      }

只需添加一个布局文件：

<?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.support.constraint.ConstraintLayout>

约束

约束可帮助您保持小部件对齐。 您可以使用锚点（例如下面显示的约束手柄）来确定各种小部件之间的对齐规则。

1. Wrap Content ：视图根据需要扩展以适应其内容。
2. Match Constraints ：视图在考虑边距后根据需要扩展以满足其约束的定义。 但是，如果给定维度只有一个约束，则视图会扩展以适应其内容。 在高度或宽度上使用此模式还允许您设置大小比例。
3. Fixed ：您在下面的文本框中或通过在编辑器中调整视图大小来指定特定尺寸。
4. Spread ：视图均匀分布（在考虑边距之后）。 这是默认设置。
5. Spread inside ：第一个和最后一个视图被附加到链的每一端的约束上，其余的均匀分布。
6. Weighted ：当链设置为展开或展开内部时，您可以通过将一个或多个视图设置为“匹配约束”（0dp）来填充剩余空间。 默认情况下，空间在设置为“匹配约束”的每个视图之间均匀分布，但您可以使用 layout_constraintHorizo​​ntal_weight 和 layout_constraintVertical_weight 属性为每个视图分配重要权重。 如果您熟悉线性布局中的 layout_weight，则其工作方式相同。 所以权重值最高的视图获得了最多的空间； 具有相同权重的视图获得相同数量的空间。
7. Packed ：视图被打包在一起（在考虑边距之后）。 然后，您可以通过更改链条的头部视图偏差来调整整个链条的偏差（左/右或上/下）。
8. Center Horizontally or Center Vertically ：要快速创建视图链，请全部选中它们，右键单击其中一个视图，然后选择水平居中或垂直居中，以创建水平或垂直链
9. Baseline alignment ：将一个视图的文本基线与另一个视图的文本基线对齐。
10. Constrain to a guideline ：您可以添加可以约束视图的垂直或水平指南，并且该指南将对应用用户不可见。 您可以根据相对于布局边缘的 dp 单位或百分比在布局内定位指南。
11. Adjust the constraint bias ：当您向视图的两侧添加约束时（并且相同维度的视图大小是“固定”或“包装内容”），视图将在两个约束之间居中，偏差为 50 ％ 默认。 您可以通过在“属性”窗口中拖动偏差滑块来调整偏差
12. Set size as a ratio ：如果至少有一个视图尺寸设置为“匹配约束”(0dp)，您可以将视图大小设置为一个比率，例如 16:9。

您可以从官方文档中了解更多信息。

Answer 11

有趣的是，基于@olefevre 的答案，一个人不仅可以使用“隐形支柱”进行 50/50 布局，还可以进行各种涉及 2 次方的布局。

例如，这是一个将宽度分成四个相等部分的布局（实际上是三个，权重为 1、1、2）：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <View
        android:id="@+id/strut"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:background="#000000" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/strut" >

        <View
            android:id="@+id/left_strut"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@+id/strut"
            android:layout_centerHorizontal="true"
            android:background="#000000" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignRight="@+id/left_strut"
            android:text="Far Left" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_toRightOf="@+id/left_strut"
            android:text="Near Left" />
    </RelativeLayout>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/strut"
            android:layout_alignParentRight="true"
            android:text="Right" />

</RelativeLayout>

Answer 12

只需将您的两个 textviews 主机和端口放在一个独立的线性布局中，然后使用 android:layout_weight 来制作百分比

Answer 13

您可以通过布局权重来完成此操作。 权重决定了屏幕上无人认领的部分是如何划分的。 给每个 EditText 一个 0 的 layout_width 和一些比例权重。 即，如果您希望第一个占用两倍的空间，则给一个权重为 2，另一个权重为 1。

Answer 14

检查https://github.com/mmin18/FlexLayout ，您可以直接在布局 xml 中使用百分比或 java 表达式。

<EditText
    app:layout_left="0%"
    app:layout_right="60%"
    app:layout_height="wrap_content"/>
<EditText
    app:layout_left="prev.right+10dp"
    app:layout_right="100%"
    app:layout_height="wrap_content"/>