Android相对布局与按钮宽度使用权重

Posted 2023-03-06

【中文标题】Android相对布局与按钮宽度使用权重

【英文标题】：Android relative layout with button width using weight

【发布时间】：2011-12-12 09:28:59

【问题描述】：

我已使用layout_weight 参数将按钮的宽度设置为总布局宽度的 70%，但为了使其正常工作，我似乎遗漏了一些重要细节。

（另一种解决方案是以编程方式使用display.getWidth()，但它也不起作用，因为我不知道我的.xml 应该是什么样子如果我选择使用button.setWidth() 设置宽度）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_ 
    android:layout_
    android:layout_weight="1.0">
    <TextView
        android:layout_
        android:layout_
        android:textSize="15px"  
        android:id="@+id/userVersionTextViewNew"
        android:gravity="center"
        android:layout_centerVertical="true"/>
    <TextView
        android:layout_
        android:layout_
        android:textSize="15px"
        android:gravity="center"
        android:layout_above="@id/userVersionTextViewNew"
        android:id="@+id/userSoftSerialNumberTextView"/>
    <ImageView
        android:layout_
        android:layout_
        android:src="@drawable/logo_200"
        android:layout_above="@id/userSoftSerialNumberTextView"
        android:layout_centerHorizontal="true"/>    
    <TextView
        android:layout_
        android:layout_
        android:textSize="15px"
        android:gravity="center"
        android:layout_below="@id/userVersionTextViewNew"
        android:id="@+id/dummyTextView"/>       
    <Button
        android:layout_
        android:layout_
        android:id="@+id/loginButton"
        android:text="Σύνδεση"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/dummyTextView"
        android:layout_weight="0.7"/>
    <Button
        android:layout_
        android:layout_
        android:id="@+id/demoLoginButton"
        android:text="Δοκιμαστική χρήση"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/loginButton"
        android:layout_weight="0.7"/>
</RelativeLayout>

【问题讨论】：

好像可以帮到你：***.com/questions/4961355/…

附带说明，不建议将 px 与 textsize 一起使用，而应使用 sp

@Ahmed 谢谢。我会记住这一点的！ :)

【参考方案1】：

我认为你不应该在相对布局标签中定义android:layout_weight="1.0"，如果你想设置按钮的长度而不是"wrap_content"

【讨论】：

android:layout_weight 仅适用于 LinearLayout，不适用于 RelativeLayout

【参考方案2】：

layout_weight，作为父级在 LinearLayout 上工作。所以我认为问题出在那儿。你必须混合使用所有线性布局和相对布局来实现你所需要的。

【参考方案3】：

首先，将参数android:weightSum="1.0" 添加到容器中（在本例中，将其添加到RelativeLayout）。

然后，定义每个孩子的体重。例如，如果您向按钮添加此

android:layout_weight="0.5"
android:layout_

按钮将占据总宽度的 50%。

【讨论】：

它不会接受android:layout_，它是“0px”，但是按钮已经消失了。

对不起，它是“0dp”或“0px”或类似...您必须在所有孩子中设置此参数

所有layout_weight之和必须等于layout_weightSum

RelativeLayout 有 android:weightSum 参数吗？

【参考方案4】：

试试这个，

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout  
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_  
    android:layout_ 
    android:orientation="vertical"
    android:layout_weight="10"> 
    <TextView 
        android:layout_ 
        android:layout_ 
        android:textSize="15px"   
        android:id="@+id/userVersionTextViewNew" 
        android:layout_weight="0.75"
    /> 
    <TextView 
        android:layout_ 
        android:layout_ 
        android:textSize="15px" 
        android:layout_weight="0.75"
        android:id="@+id/userSoftSerialNumberTextView"/> 
    <ImageView 
        android:layout_ 
        android:layout_ 
        android:src="@drawable/logo_200" 
        android:layout_weight="0.75"/>     
    <TextView 
        android:layout_ 
        android:layout_ 
        android:textSize="15px" 
        android:layout_weight="0.75"
        android:id="@+id/dummyTextView"/>        
    <Button 
        android:layout_ 
        android:layout_ 
        android:id="@+id/loginButton" 
        android:text="Σύνδεση" 
        android:layout_weight="3.5"/> 
    <Button 
        android:layout_ 
        android:layout_ 
        android:id="@+id/demoLoginButton" 
        android:text="Δοκιμαστική χρήση" 
        android:layout_weight="3.5"/> 
</LinearLayout> 

【讨论】：

我想你的意思是 7.5 而不是 0.75。

不，我的意思是 0.75 ......然后你想要 70% 到你的按钮..这将给最后 2 个按钮 70% 并将 30% 到 4 个以上的文本和图像视图..试试告诉我..

不过，按钮的宽度为 100%，而且它们占据了我整个窗口的一半，超过了标签内容的 50%。

上面的代码是为高度设置权重..不是宽度..如果可能的话，你想如何查看xml 上面的图片

在我的原始帖子中，我写了按钮宽度占总宽度的 70%。而且我的方法不行，所以要解决这个问题。

【参考方案5】：

我不认为layout_weight 在RelativeLayout 中工作。也许你应该在RelativeLayout 中添加一个LinearLayout 并在里面使用layout_weight。

此外，当使用layout_weight 时，您通常必须将对象的宽度或高度定义为0dp，所以在您的情况下是这样的：

android:layout_weight="0.7"
android:layout_

【参考方案6】：

试试这个..

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_ 
    android:layout_>
    <TextView
        android:layout_
        android:layout_
        android:textSize="15px"  
        android:id="@+id/userVersionTextViewNew"
        android:gravity="center"
        android:layout_centerVertical="true"/>
    <TextView
        android:layout_
        android:layout_
        android:textSize="15px"
        android:gravity="center"
        android:layout_above="@id/userVersionTextViewNew"
        android:id="@+id/userSoftSerialNumberTextView"/>
    <ImageView
        android:layout_
        android:layout_
        android:src="@drawable/logo_200"
        android:layout_above="@id/userSoftSerialNumberTextView"
        android:layout_centerHorizontal="true"/>    
    <TextView
        android:layout_
        android:layout_
        android:textSize="15px"
        android:gravity="center"
        android:layout_below="@id/userVersionTextViewNew"
        android:id="@+id/dummyTextView"/>      
    <LinearLayout  
        android:layout_  
        android:layout_ 
        android:gravity = "center_horizontal"
        android:layout_below="@id/dummyTextView"
        android:id="@+id/loginButtonLayout"
        android:weightSum="1.0">  
        <Button
            android:layout_
            android:layout_
            android:id="@+id/loginButton"
            android:text="Σύνδεση"
            android:layout_weight="0.7"/>
    </LinearLayout>
    <LinearLayout  
        android:layout_  
        android:layout_ 
        android:gravity = "center_horizontal"
        android:layout_below="@id/loginButtonLayout"
        android:weightSum="1.0">  
        <Button
            android:layout_
            android:layout_
            android:id="@+id/demoLoginButton"
            android:text="Δοκιμαστική χρήση"
            android:layout_weight="0.7"/>
    </LinearLayout>
</RelativeLayout>

【讨论】：

它工作得几乎完美，第一个按钮比第二个小一点。我怀疑重要的是文本的大小。

要获得完全相同大小的按钮，即屏幕宽度的 70%，只需将按钮的宽度参数更改为 android:layout_

虽然这个答案是有效的，但代码并不能解释自己。请参阅下文以获得更好的整体答案，包括代码和对其工作原理的全面解释。

【参考方案7】：

问题

您不能在 RelativeLayout 上使用 layout_weight 参数。这些是来自 LinearLayout 的参数。我将在下面提供有关差异的更多信息。但首先关于这个问题的解决方案

解决方案

使用 LinearLayout，您可以在其中按权重分布将元素放置在一行中。 在添加 layout_weights 时不要忘记使用 0dp 宽度！ 下面的示例显示了 70/30 的权重分布。

<LinearLayout
android:id="@+id/wrapper"
android:layout_ 
android:layout_
android:weightSum="1.0" >

    <Button
        android:text="left" 
        android:layout_ 
        android:layout_ 
        android:layout_weight=".70" /> 

    <Button
        android:text="right" 
        android:layout_ 
        android:layout_ 
        android:layout_weight=".30" />

</LinearLayout>

所有这些都在您的代码中已有的 RelativeLayout 中。此答案的其余部分是背景信息，有这些问题的每个人都应该阅读这些信息，以了解他们在做什么。

相对布局

每当您从一个包含多个元素的布局开始时，我建议您更喜欢相对布局而不是线性布局。 RelativeLayout 非常强大，可让您相对于彼此定位元素（leftOf、below、...）。在大多数情况下，这超出了您的需要。

来自the android development document 的一个例子（相信我就在那里）：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:paddingLeft="16dp"
    android:paddingRight="16dp" >
    <EditText
        android:id="@+id/name"
        android:layout_
        android:layout_
        android:hint="@string/reminder" />
    <Spinner
        android:id="@+id/dates"
        android:layout_
        android:layout_
        android:layout_below="@id/name"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/times" />
    <Spinner
        android:id="@id/times"
        android:layout_
        android:layout_
        android:layout_below="@id/name"
        android:layout_alignParentRight="true" />
    <Button
        android:layout_
        android:layout_
        android:layout_below="@id/times"
        android:layout_alignParentRight="true"
        android:text="@string/done" />
</RelativeLayout>

线性布局

LinearLayout 可能看起来也很有能力，但为了让所有东西都只使用 Linears 进行排序，您很可能会开始嵌套这些布局。这就是它在性能方面表现不佳的地方。

再来一个来自the android development documentation的例子。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >
    <EditText
        android:layout_
        android:layout_
        android:hint="@string/to" />
    <EditText
        android:layout_
        android:layout_
        android:hint="@string/subject" />
    <EditText
        android:layout_
        android:layout_
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/message" />
    <Button
        android:layout_
        android:layout_
        android:layout_gravity="right"
        android:text="@string/send" />
</LinearLayout>

【参考方案8】：

我知道这个问题很老了，但只是针对寻求解决方案的人：

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

PercentRelativeLayout 正是你的情况：

<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_ 
    android:layout_>

    <!-- Other controls -->

    <Button
        android:layout_
        android:layout_
        android:id="@+id/loginButton"
        android:text="Σύνδεση"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/dummyTextView"
        app:layout_widthPercent="70%"/>

    <!-- Other controls -->

</android.support.percent.PercentRelativeLayout>

【参考方案9】：

正如@hcpl 在他的回答中正确提到的那样：

您不能在 RelativeLayout 上使用 layout_weight 参数。这些是来自 LinearLayout 的参数。

是的，他是对的！但是想想嵌套布局引起的negative impact on performance。

通过引入ConstraintLayout，您可以在没有嵌套LinearLayout 的情况下解决您的问题。您只需粘贴两条边距分别为 15% 和 85% 的垂直线，然后将按钮放在它们之间。

这是布局源代码：

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_>

    <TextView
        android:id="@+id/userVersionTextViewNew"
        android:layout_
        android:layout_
        android:textSize="15sp"
        android:text="userVersionTextViewNew"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/userSoftSerialNumberTextView"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/userSoftSerialNumberTextView"
        android:layout_
        android:layout_
        android:textSize="15sp"
        android:text="userSoftSerialNumberTextView"
        app:layout_constraintTop_toBottomOf="@+id/userVersionTextViewNew"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/imageView" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_
        android:layout_
        android:src="@drawable/logo_200"
        app:layout_constraintTop_toBottomOf="@+id/userSoftSerialNumberTextView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/dummyTextView" />

    <TextView
        android:id="@+id/dummyTextView"
        android:layout_
        android:layout_
        android:textSize="15sp"
        android:text="dummyTextView"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/loginButton" />

    <Button
        android:id="@+id/loginButton"
        android:layout_
        android:layout_
        android:text="Σύνδεση"
        app:layout_constraintTop_toBottomOf="@+id/dummyTextView"
        app:layout_constraintLeft_toLeftOf="@+id/leftGuideline"
        app:layout_constraintRight_toLeftOf="@+id/rightGuideline"
        app:layout_constraintBottom_toTopOf="@+id/demoLoginButton" />

    <Button
        android:id="@+id/demoLoginButton"
        android:layout_
        android:layout_
        android:text="Δοκιμαστική χρήση"
        app:layout_constraintTop_toBottomOf="@+id/loginButton"
        app:layout_constraintLeft_toLeftOf="@+id/leftGuideline"
        app:layout_constraintRight_toLeftOf="@+id/rightGuideline"
        app:layout_constraintBottom_toBottomOf="parent" />

    <android.support.constraint.Guideline
        android:id="@+id/leftGuideline"
        android:layout_
        android:layout_
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.15" />

    <android.support.constraint.Guideline
        android:id="@+id/rightGuideline"
        android:layout_
        android:layout_
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.85" />

</android.support.constraint.ConstraintLayout>

结果你得到这个视图：

您可以在Building interfaces with ConstraintLayout找到更多详细信息。