2012-07-19 82 views
1

我有一个示例布局,我试图在android中使用xml创建。我能够创建类似的布局,但我觉得我的方法可能是错误的。android如何设计此布局

在这些情况下,我一直在做的是将相对布局嵌套为“行”。下面的图片展示了我会做什么。

layout

如何将你们创建一个类似的布局?我觉得如果嵌套相对布局是过度杀伤,但我不知道如果我不这样做,我怎么能保持所有的东西。

当我没有嵌套布局我用

android:layout_toRightOf="..." 
android:layout_below="@+id/t1" 

上T5,T6和T7(从图像)。结果看起来不正确。 t1,t2,t3和t4不再水平居中。

有没有一种方法可以告诉相对布局,这个点之后的所有内容都应该出现在新行上?或者相对布局是否是这样的错误方式?我不认为表布局会正常工作,因为每行不一定需要有相同数量的视图,并且它们需要居中。

任何建议表示赞赏!

+1

我不知道为什么有人下来投我的问题。评论让我知道为什么,我会很乐意解决这个问题... – Mick 2012-07-19 09:28:27

回答

3

您可以在垂直LinearLayout内嵌套两个水平线LinearLayouts。也许效率不如RelativeLayout,但更容易得到你想要的居中行为。

<?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="fill_parent" 
android:orientation="vertical" > 
<TextView 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello" /> 
<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:gravity="center_horizontal" 
    android:orientation="horizontal" > 
    <Button 
     android:id="@+id/button1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="A" /> 
    <Button 
     android:id="@+id/button2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="B" /> 
    <Button 
     android:id="@+id/button3" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="C" /> 
    <Button 
     android:id="@+id/button4" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="D" /> 
</LinearLayout> 
<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:gravity="center_horizontal" 
    android:orientation="horizontal" > 
    <Button 
     android:id="@+id/button5" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="E" /> 
    <Button 
     android:id="@+id/button6" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="F" /> 
    <Button 
     android:id="@+id/button7" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="G" /> 
</LinearLayout> 
</LinearLayout> 

下面是使用RelativeLayout的相同布局的另一个版本。我从上面嵌套的LinearLayouts开始,选中“重构> Android>更改布局...”,选择RelativeLayout,然后调整结果布局,直到我将事情集中。

我使用了一些技巧来让它正确。我开始时将居中按钮置于父母身上,然后在左右两侧建立。在最上面一行,中间有一个按钮和空间的数量是偶数,我用一个居中的0宽度的TextView来固定按钮。我想,这有点冒险,但它完成了工作。 :-)

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/RelativeLayout1" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:gravity="center_horizontal" 
android:orientation="vertical" > 
<TextView 
    android:id="@+id/TextView1" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentLeft="true" 
    android:layout_alignParentTop="true" 
    android:text="@string/hello" /> 
<TextView 
    android:id="@+id/Dummy" 
    android:layout_width="0dp" 
    android:layout_height="48dp" 
    android:layout_centerInParent="true" 
    android:layout_below="@+id/TextView1" /> 
<Button 
    android:id="@+id/button2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignTop="@+id/Dummy" 
    android:layout_toLeftOf="@+id/Dummy" 
    android:text="B" /> 
<Button 
    android:id="@+id/button1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignBaseline="@+id/button2" 
    android:layout_alignTop="@+id/Dummy" 
    android:layout_toLeftOf="@+id/button2" 
    android:text="A" /> 
<Button 
    android:id="@+id/button3" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignBaseline="@+id/button2" 
    android:layout_alignTop="@+id/Dummy" 
    android:layout_toRightOf="@+id/Dummy" 
    android:text="C" /> 
<Button 
    android:id="@+id/button4" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignBaseline="@+id/button2" 
    android:layout_alignTop="@+id/Dummy" 
    android:layout_toRightOf="@+id/button3" 
    android:text="D" /> 
<Button 
    android:id="@+id/button6" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_centerInParent="true" 
    android:layout_below="@+id/Dummy" 
    android:text="F" /> 
<Button 
    android:id="@+id/button5" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignTop="@+id/button6" 
    android:layout_alignBaseline="@+id/button6" 
    android:layout_toLeftOf="@+id/button6" 
    android:text="E" /> 
<Button 
    android:id="@+id/button7" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignBaseline="@+id/button6" 
    android:layout_alignTop="@+id/button6" 
    android:layout_toRightOf="@+id/button6" 
    android:text="G" /> 
</RelativeLayout> 
+0

谢谢Sparky,我猜嵌套布局可能是正确的方式去这种类型的设计!我认为没有嵌套可能是一个更好的方法,但我猜不是!谢谢! – Mick 2012-07-19 09:47:40

+0

我修改了我的答案,以包含没有嵌套的版本。我从嵌套版本开始,并使用自动重构来帮助制作非嵌套版本。 – Sparky 2012-07-19 11:00:26

+0

这正是我希望看到的:)我将对此进行调整以弄清楚它是如何工作的。我想我之后是“layout_alignBaseline”。再次感谢! – Mick 2012-07-19 15:34:57

1

检查了这一点:

<?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="match_parent" 
    > 

    <LinearLayout 
     android:id="@+id/l1" 
     android:layout_width="fill_parent" 
     android:layout_height="50dp"></LinearLayout> 
    <View 
     android:layout_width="fill_parent" 
     android:layout_height="2dp" 
     android:background="@android:color/white" 
     android:layout_below="@+id/l1" 
     android:id="@+id/v1"/> 

    <LinearLayout 
     android:id="@+id/l2" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     android:layout_below="@+id/v1" 
     android:layout_marginTop="10dp" 
     android:layout_marginBottom="10dp"> 
    <Button 
     android:id="@+id/pos" 
     android:layout_width="0dp" 
     android:layout_weight="1" 
     android:layout_height="wrap_content" 
     android:background="@drawable/ic_launcher" 
     /> 
    <Button 
     android:id="@+id/neu" 
     android:layout_width="0dp" 
     android:layout_weight="1" 
     android:layout_height="wrap_content" 
     android:background="@drawable/ic_launcher"/> 
     <Button 
     android:id="@+id/neg" 
     android:layout_width="0dp" 
     android:layout_weight="1" 
     android:layout_height="wrap_content" 
     android:background="@drawable/ic_launcher"/> 
     <Button 
     android:id="@+id/neg" 
     android:layout_width="0dp" 
     android:layout_weight="1" 
     android:layout_height="wrap_content" 
     android:background="@drawable/ic_launcher"/> 
    </LinearLayout> 

    <View 
     android:layout_width="fill_parent" 
     android:layout_height="2dp" 
     android:background="@android:color/white" 
     android:layout_below="@+id/l2" 
     android:id="@+id/v2" 
     /> 
    <LinearLayout 
     android:id="@+id/l3" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     android:layout_below="@+id/v2" 
     android:layout_marginTop="10dp" 
     android:layout_marginBottom="10dp"> 
    <Button 
     android:id="@+id/pos" 
     android:layout_width="0dp" 
     android:layout_weight="1" 
     android:layout_height="wrap_content" 
     android:background="@drawable/ic_launcher" 
     /> 
    <Button 
     android:id="@+id/neu" 
     android:layout_width="0dp" 
     android:layout_weight="1" 
     android:layout_height="wrap_content" 
     android:background="@drawable/ic_launcher"/> 
     <Button 
     android:id="@+id/neg" 
     android:layout_width="0dp" 
     android:layout_weight="1" 
     android:layout_height="wrap_content" 
     android:background="@drawable/ic_launcher"/> 

    </LinearLayout> 
    <View 
     android:layout_width="fill_parent" 
     android:layout_height="2dp" 
     android:background="@android:color/white" 
     android:layout_below="@+id/l3" 
     android:id="@+id/v3" 
     /> 
</RelativeLayout> 
+0

谢谢AkashG。与Sparky相同的评论;) – Mick 2012-07-19 09:48:05

+0

但Sparky提供的内容与我提供给您的内容之间存在很大差异。实现上述代码,您会发现确切的需求。感谢您 – AkashG 2012-07-19 09:54:13

0

您也可以尝试使用线性布局来代替。在第一个线性布局中,将权重设置为4,将布局权重设置为1以使其相等,并将每个视图的重心设置为中心。 在发送线性布局时做同样的事情。

2

你也可以尝试使用重量

<?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" 
    android:weightSum="10" > 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_horizontal" 
     android:layout_weight="2.5" 
     android:gravity="center" 
     android:text="hello" /> 

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

     <Button 
      android:id="@+id/button1" 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="A" /> 

     <Button 
      android:id="@+id/button2" 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="B" /> 

     <Button 
      android:id="@+id/button3" 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="C" /> 

     <Button 
      android:id="@+id/button4" 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="D" /> 
    </LinearLayout> 

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

     <Button 
      android:id="@+id/button5" 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="E" /> 

     <Button 
      android:id="@+id/button6" 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="F" /> 

     <Button 
      android:id="@+id/button7" 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:text="G" /> 
    </LinearLayout> 

</LinearLayout> 

enter image description here