了解Android线性布局

时间:2015-12-11 02:21:36

标签: android xml android-layout android-linearlayout

在对线性布局进行广泛搜索以及如何使用线性布局完成位置任务后,我发现了大量问题,其中流行的答案是“使用相对布局”。

我想深入了解线性布局,并且无法找到解释任务的解释,我觉得应该很简单。一个有意义的解决方案似乎也是合理的。

如果我认为屏幕是一个tic tac toe board并想在每个位置放置一个按钮,我怎么能不依赖前一个按钮的宽度进行堆叠或边距。

例如,如果我想跳过广场上的一个位置,我跳过的位置将保持空白。

{1} {2} {3}
{4} {5} {6}
{7} {8} {9}

根据我的阅读,我的XML应该将我的按钮放在1 3 5 7 9中 但那不是那个结果。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:id="@+id/myLayout" >

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

        <Button
            android:id="@+id/Button1"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_gravity="top|left"
            android:text="@string/btn1" />

        <Button
            android:id="@+id/Button2"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_gravity="top|right"
            android:text="@string/btn2" />
</LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <Button
            android:id="@+id/Button3"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/btn3" />

</LinearLayout>

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

        <Button
            android:id="@+id/Button4"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|left"
            android:text="@string/btn4" />

        <Button
            android:id="@+id/Button5"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:text="@string/btn5" />
    </LinearLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/background"
        android:background="@drawable/background"/>

</LinearLayout>

我的结果是,

{1} {2} { }
{ } {5} { }
{7} {8} { }

我非常接近这个! (我想......)

我错过了将2和8移动到正确的空间?我没有按指示使用线性布局吗?

这是我的目标。

{1} { } {2}
{ } { } { }
{ } { } { }
{ } {3} { }
{ } { } { }
{ } { } { }
{4} { } {5}

4 个答案:

答案 0 :(得分:1)

您之所以没有直截了当地回答这个问题的原因是因为LinearLayout并不是您做某事的好方法。

由于您的目标是了解LinearLayout而不是真正关于实现最终结果,我将对我已经注意到的一些事情发表评论。

这里的关键点是使用layout_gravity。它不会做你想要的。在LinearLayout中,layout_gravity一次只能在一个方向上运行。在水平LinearLayout中,layout_gravity仅影响元素垂直的位置,而在垂直LinearLayout中,layout_gravity仅影响元素水平位置。因此,你不能制作一个水平的LinearLayout,在其中放入两个按钮,并使用layout_gravity使一个留下,另一个保持正确。

在LinearLayout中,子项始终按照在xml布局中输入的顺序一个接一个地(从左到右或从上到下)放置。那么你如何创造差距?

有两种主要方式让人想起:

您可以使用layout_margin。这定义了在特定元素外部保持清晰的空间量,如按钮。因此,如果您希望按钮1和按钮2之间的间距为100dp,则可以将android:layout_marginRight="100dp"添加到按钮1,或者可以在按钮1的右侧添加50dp,在按钮2的左侧添加50dp。

另一种方法是包括一个宽度为100dp的空白视图以留下该空间。 这里修改了你的布局,以便在实践中展示这两种方法:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/myLayout" >

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

    <Button
        android:id="@+id/Button1"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="@string/btn1" 
        android:layout_marginRight="100dp"/>

    <Button
        android:id="@+id/Button2"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="@string/btn2" />
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <View
        android:layout_width="100dp"
        android:layout_height="0dp"/>
    <Button
        android:id="@+id/Button3"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="@string/btn3" />

</LinearLayout>

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

    <Button
        android:id="@+id/Button4"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="@string/btn4" />
    <View
        android:layout_width="100dp"
        android:layout_height="0dp"/>

    <Button
        android:id="@+id/Button5"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="@string/btn5" />
</LinearLayout>

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/background"
    android:background="@drawable/background"/>

</LinearLayout>

最后,ImageView。它没有特别提及,所以我可能错了,但由于可绘制的名称是背景,我猜测它可能意味着这些按钮显示在ImageView前面。如果是这种情况,那么值得一提的是LinearLayouts 中的孩子不会重叠。 ImageView将始终位于带按钮的布局之后。如果你确实想要按钮背后的背景,你可以通过将android:background="@drawable/background"添加到父LinearLayout的开始标记(虽然它可能被拉伸)来向父LinearLayout本身添加背景,或者你可以使用不同类型的允许重叠的布局。

答案 1 :(得分:0)

对于tic-tac-toe,您需要为每个按钮保留空间,但文本将具有X或O或空格。这将解决格式化方面的任何问题。

我不清楚你的目标是什么。

你是否想为X by X网格做一个tic-tac-toe?如果是这样,我的观点仍然适用。

答案 2 :(得分:0)

如您所知,您可以使用水平和垂直线性布局。此外,您可以应用布局权重来制作相同大小的布局以覆盖全屏。对于这种情况,您可以使用3个垂直线性布局,全高和相同的重量来覆盖屏幕。然后你可以根据你想要的数字用相同重量的全宽按钮填充它们的内部。

答案 3 :(得分:0)

试试这个:

for ur 7 x 3 matrix style button arragement

它的xml:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:layout_width="@dimen/btnwidth"
            android:layout_height="wrap_content"
            android:text="{1}"
            android:layout_weight="1"
            android:id="@+id/b1" />

        <Button
            android:layout_width="@dimen/btnwidth"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/b2"
            android:visibility="invisible"/>

        <Button
            android:layout_width="@dimen/btnwidth"
            android:layout_height="wrap_content"
            android:text="{2}"
            android:layout_weight="1"
            android:id="@+id/b3" />

    </LinearLayout>
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/b4"
        android:visibility="invisible"/>

    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:visibility="invisible"
        android:id="@+id/b5" />

    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:visibility="invisible"
        android:id="@+id/b6" />

</LinearLayout><LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:visibility="invisible"
    android:id="@+id/b7" />

<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:visibility="invisible"
    android:id="@+id/b8" />

<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:visibility="invisible"
    android:id="@+id/b9" />
</LinearLayout><LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:visibility="invisible"
    android:id="@+id/b10" />
<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="{3}"
    android:id="@+id/b11" />
<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:visibility="invisible"
    android:id="@+id/b12" />   </LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:visibility="invisible"
    android:id="@+id/b13" />
<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:clickable="false"
    android:visibility="invisible"
    android:id="@+id/b14" />
<Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:visibility="invisible"
    android:id="@+id/b15" /></LinearLayout>
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:visibility="invisible"
        android:id="@+id/b16" />
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:visibility="invisible"
        android:id="@+id/b17" />
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:visibility="invisible"
        android:id="@+id/b18" />
</LinearLayout>
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="{4}"
        android:id="@+id/b19" />
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:visibility="invisible"
        android:id="@+id/b20" />
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="{5}"
        android:id="@+id/b21" /> </LinearLayout></LinearLayout>

并且:

enter image description here

对于它的xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:layout_width="@dimen/btnwidth"
            android:layout_height="wrap_content"
            android:text="{1}"
            android:layout_weight="1"
            android:id="@+id/b1" />
       <android.support.v4.widget.Space
           android:layout_width="@dimen/btnwidth"
           android:layout_height="wrap_content" />

        <Button
            android:layout_width="@dimen/btnwidth"
            android:layout_height="wrap_content"
            android:text="{2}"
            android:layout_weight="1"
            android:id="@+id/b3" />
    </LinearLayout>  <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
  <android.support.v4.widget.Space
      android:layout_width="@dimen/btnwidth"
      android:layout_height="wrap_content" />
  <Button
    android:layout_width="@dimen/btnwidth"
    android:layout_height="wrap_content"
    android:text="{3}"
    android:id="@+id/b11" />
  <android.support.v4.widget.Space
      android:layout_width="@dimen/btnwidth"
      android:layout_height="wrap_content" />  </LinearLayout>
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="{4}"
        android:id="@+id/b19" />
    <android.support.v4.widget.Space
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content" />
    <Button
        android:layout_width="@dimen/btnwidth"
        android:layout_height="wrap_content"
        android:text="{5}"
        android:id="@+id/b21" />
</LinearLayout>

差异第1和第2个是: 在第一,我们使用具有不可见性的按钮.. 在第二我们使用空间...... 在第一,我们不能使用空间的整行(所有3个按钮的方法不能由空间重复..如果我们这样做那么它将堆栈在页面的末尾与空白的spce ..它将不会在空格中放置空间两行。