相对布局中宽度的百分比

我正在为我的Android应用程序中的登录活动做一个表单布局。下图是我想让它看起来的样子:

我能够使用以下XML实现这种布局。问题是，这有点粗俗。我必须为主机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>

当前回答

更新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>

2015-08-23 15:38:43

其他回答

只是把你的两个textviews主机和端口在一个独立的线性布局水平和使用android:layout_weight使百分比

2015-12-19 17:45:57

这并没有完全回答最初的问题，即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布局抱有太多期望……

2011-10-16 12:16:59

你正在寻找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，结果是一样的。

2011-02-10 19:06:35

你可以使用PercentRelativeLayout，它是最近添加到设计支持库(Design Support Library)的一个没有文档的功能，它不仅可以指定元素之间的相对关系，还可以指定可用空间的总百分比。

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
}

2015-08-27 06:31:46

更新1