【问题标题】:How to position a Button dead center using LinearLayout如何使用 LinearLayout 定位 Button 死点
【发布时间】:2015-10-24 13:35:54
【问题描述】:

我正在尝试将位于 TextView 下方的按钮设置为屏幕的死点。
目前,我只让它们成为水平中心,而不是垂直中心,所以按钮就在 TextView 的正下方,这不是我想要的。
我什至尝试过使用 layout_gravity 代替重力,但仍然没有运气。

这是我得到的

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context=".MainActivity">

<TextView android:text="CALCULATOR"
    android:id="@+id/appTitle"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dip"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical" >

<Button android:text="BASIC MATH"
    android:id="@+id/basicMath"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal|center"
    />

<Button android:text="BASIC ALGEBRA"
    android:id="@+id/alg"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal|center"
    />

<Button android:text="BASIC CALCULUS"
    android:id="@+id/calc"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal|center"
    />

<Button android:text="INFO"
    android:id="@+id/info"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal|center"
    />
    </LinearLayout>

【问题讨论】:

  • 您可以尝试将按钮包装成&lt;RelativeLayout&gt; 并使用android:layout_centerInParent 属性将它们居中到true
  • 你有什么模型意味着你想要的最终视图应该是什么?
  • 你能定义“死中心”吗?
  • 在你的第一个线性布局设置高度为 match_parent android:layout_height="match_parent"
  • 谢谢大家的投入,我从来不知道应该避免使用嵌套布局——我会在以后的程序中记住这一点。但是,由于这不是我真正的严肃项目,我想我会坚持@L-X 的答案,因为它对我来说是最简单的解决方法。再次感谢!

标签: android button android-linearlayout center


【解决方案1】:

我真的不能忍受嵌套布局,抱歉。
因此我真的不得不提出一个替代方案。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    >
    <TextView
        android:text="CALCULATOR"
        android:id="@+id/appTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
    />
    <!-- All you need is a little trick -->
    <!-- This dummy View is invisible, but it's CENTERED -->
    <!-- The 4 Buttons will be positioned in RELATION to this one -->
    <!-- This is the power of RelativeLayouts -->
    <View
        android:id="@+id/vwDummy"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerInParent"true"
    />
    <!-- These 2 are horizontally centered and go above the dummy -->
    <Button
        android:text="BASIC ALGEBRA"
        android:id="@+id/alg"
        android:layout_above="@id/vwDummy"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
    />
    <Button
        android:text="BASIC MATH"
        android:id="@+id/basicMath"
        android:layout_above="@id/alg"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
    />
    <!-- These 2 are horizontally centered and go below the dummy -->
    <Button
        android:text="BASIC CALCULUS"
        android:id="@+id/calc"
        android:layout_below="@id/vwDummy"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
    />
    <Button
        android:text="INFO"
        android:id="@+id/info"
        android:layout_below="@id/calc"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
    />
</RelativeLayout>

如 cmets 所示,我利用了 RelativeLayout 子级的相对性
您只需要一个小技巧:

  • 在中心创建一个不可见的虚拟视图。
  • 将 RELATION 中的 4 个按钮与这个对齐。

【讨论】:

    【解决方案2】:

    如下更新你的布局:-

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity">
    
    <TextView android:text="CALCULATOR"
    android:id="@+id/appTitle"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    />
    
    <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
     >
    
    <Button android:text="BASIC MATH"
        android:id="@+id/basicMath"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal|center"
        />
    
    <Button android:text="BASIC ALGEBRA"
        android:id="@+id/alg"
        android:layout_below="@+id/basicMath"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal|center"
        />
    
    <Button android:text="BASIC CALCULUS"
        android:id="@+id/calc"
        android:layout_below="@+id/alg"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal|center"
        />
    
    <Button android:text="INFO"
        android:id="@+id/info"
        android:layout_below="@+id/calc"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal|center"
        />
    </RelativeLayout></RelativeLayout>
    

    【讨论】:

    • 你可以摆脱嵌套的RelativeLayout,因为它真的不需要。
    【解决方案3】:

    您可以使用 RelativeLayout 作为父级并将 android:layout_centerInParent="true" 添加到您的 LinearLayout 中,它包装了按钮。 LinearLayout 的宽度和高度也应该设置为wrap_content

    你可以达到以下结果:

    使用了以下xml:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">
    
        <TextView android:text="CALCULATOR"
            android:id="@+id/appTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            />
    
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_centerInParent="true">
    
            <Button android:text="BASIC MATH"
                android:id="@+id/basicMath"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                />
    
            <Button android:text="BASIC ALGEBRA"
                android:id="@+id/alg"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                />
    
            <Button android:text="BASIC CALCULUS"
                android:id="@+id/calc"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                />
    
            <Button android:text="INFO"
                android:id="@+id/info"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                />
        </LinearLayout>
    </RelativeLayout>
    

    最后只是一个建议: 使用 LinearLayout match_parent 而不是 fill_parent,因为它自 API 8 以来已被弃用

    【讨论】:

    • 你可以摆脱嵌套的LinearLayout,因为它真的不需要。
    • 你是对的。由于性能问题,应避免嵌套布局。但我确信这不会导致性能问题。我认为这种方式更容易理解,因为提问者也在 xml 中使用了 LinearLayout。随意发布其他解决方案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-02-07
    • 2014-04-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多