Android布局有4个方块,每个方块内有一个按钮

时间:2012-09-23 18:35:02

标签: android android-layout

我想创建4个正方形,在每个正方形中我想创建一个小按钮。广场必须是可见的,并且必须有边框。

我知道如何创建4个按钮作为正方形,但我不知道如何在每个正方形周围创建边框。但我想要与尺寸无关,现在按钮非常大......

我的例子

<?xml version="1.0" encoding="utf-8"?>
<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent" android:layout_width="fill_parent">
    <RelativeLayout android:id="@+id/magaLoginLayout"
        android:layout_height="fill_parent" android:layout_width="fill_parent">
        <Button android:text="@+id/Button01" android:id="@+id/Button01"
            android:layout_width="160dip" android:layout_height="160dip" android:layout_marginTop="20dip"></Button>
        <Button android:text="@+id/Button03" android:layout_below="@+id/Button01" android:id="@+id/Button03"
            android:layout_alignLeft="@+id/Button01" android:layout_height="160dip" android:layout_width="160dip"></Button>
        <Button android:text="@+id/Button04" android:layout_below="@+id/Button01" android:id="@+id/Button04"
            android:layout_toRightOf="@+id/Button03" android:layout_height="160dip" android:layout_width="160dip"></Button>
        <Button android:text="@+id/Button02" android:id="@+id/Button02" android:layout_width="wrap_content"
            android:layout_toRightOf="@+id/Button01" android:layout_alignTop="@+id/Button01" android:layout_alignParentRight="true" android:layout_height="160dip"></Button>


</RelativeLayout>

enter image description here     

2 个答案:

答案 0 :(得分:7)

你想创建布局看起来像这个截图吗?

This is layout for my apps named Call & Sms Blocker.

此布局的代码:

  1. main_screen.xml

     <?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"
           android:background="@drawable/bgimage2" >
    
       <TextView
         android:id="@+id/textView1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentTop="true"
         android:layout_centerHorizontal="true"
         android:layout_marginTop="29dp"
         android:text="Call & SMS Blocker" 
         android:textAppearance="?android:attr/textAppearanceLarge"
         android:textSize="40dp"
         android:textStyle="bold" /> 
    
      <Button 
       android:id="@+id/blocked_sms"
       android:layout_width="162dp" 
       android:layout_height="162dp"
       android:layout_marginLeft="50dp"
       android:layout_marginTop="120dp"
       android:background="@drawable/buttoneffects" 
       android:focusable="true" 
       android:textColor="#000000" 
       android:textStyle="bold" /> 
    
     <ImageButton
      android:id="@+id/imagebutton1" 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="50dp" 
      android:layout_height="50dp"
      android:layout_alignTop="@+id/blocked_sms" 
      android:layout_centerHorizontal="true" 
      android:layout_marginTop="136dp" 
      android:background="@drawable/buttoneffectpower" /> 
    
      <Button 
         android:id="@+id/blocked_calls"
         android:layout_width="162dp" 
         android:layout_height="162dp" 
         android:layout_alignBaseline="@+id/blocked_sms"
         android:layout_alignBottom="@+id/blocked_sms"
         android:layout_alignParentRight="true" 
         android:layout_marginRight="50dp"
         android:background="@drawable/buttoneffectssecond" 
         android:focusable="true" android:text="Blocked Calls"
         android:textColor="#000000" 
         android:textStyle="bold" /> 
    
      <Button 
         android:id="@+id/settings" 
         android:layout_width="162dp" 
         android:layout_height="162dp" 
         android:layout_alignLeft="@+id/blocked_calls"
         android:layout_below="@+id/imagebutton1" 
         android:layout_marginRight="50dp"
         android:background="@drawable/buttoneffectfourth" 
         android:focusable="true" android:text="Settings" 
         android:textColor="#000000" android:textStyle="bold" /> 
    
     <Button 
      android:id="@+id/blacklist" 
      android:layout_width="162dp" 
      android:layout_height="162dp" 
      android:layout_alignBaseline="@+id/settings"
       android:layout_alignBottom="@+id/settings" 
      android:layout_marginLeft="50dp" 
       android:layout_toLeftOf="@+id/imagebutton1"
      android:background="@drawable/buttoneffectthird" 
      android:focusable="true" 
      android:text="Blacklist" 
      android:textColor="#000000" 
      android:textStyle="bold" /> 
    
      <Button 
        android:id="@+id/help" 
        android:layout_width="150dp" 
        android:layout_height="70dp" 
        android:layout_alignLeft="@+id/blocked_sms"
     android:layout_alignParentBottom="true" 
     android:layout_marginBottom="69dp"
     android:background="@drawable/buttoneffectsimple" 
     android:focusable="true" 
     android:text="Help" 
     android:textColor="#000000" 
     android:textStyle="bold" /> 
    
       <Button 
      android:id="@+id/block_last_number" 
      android:layout_width="330dp" 
      android:layout_height="70dp" 
      android:layout_above="@+id/help" 
      android:layout_alignLeft="@+id/help" 
      android:layout_alignRight="@+id/settings" 
      android:layout_marginBottom="27dp"
      android:background="@drawable/buttoneffectsimple" 
      android:focusable="true" 
      android:text="Block Last Number" 
      android:textColor="#000000" 
      android:textStyle="bold" /> 
    
       <Button 
     android:id="@+id/aboutus" 
     android:layout_width="150dp" 
     android:layout_height="70dp" 
     android:layout_alignBaseline="@+id/help" 
     android:layout_alignBottom="@+id/help"
     android:layout_alignRight="@+id/block_last_number"
     android:background="@drawable/buttoneffectsimple" 
     android:focusable="true" 
     android:text="About Us" 
     android:textColor="#000000" 
     android:textStyle="bold" /> 
    
    </RelativeLayout>
    
  2. 按钮效果代码(xml文件布局):

        <Selector>
            <item android:drawable="@drawable/blockedsms"><shape>
            <solid android:color="#fff" />
    
            <stroke android:width="1px" android:color="#444" />
    
            <corners android:radius="6dp" />
    
            <gradient android:angle="270" android:endColor="#10000000"
               android:startColor="#10FFFFFF" />
    
            <corners android:bottomRightRadius="50dp" />
        </shape></item>
    
           </selector>
    

    现在在其他xml按钮效果布局中,您必须更改

          <corners android:bottomLeftRadius 
          <corners android:topRightRadius
          <corners android:topLeftRadius
    
          and so on......
    

    希望!这会有所帮助。 干杯!!!

答案 1 :(得分:6)

由于边框部分似乎是通过您的问题的评论来回答,所以这是布局部分的答案:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TableRow
        android:id="@+id/TableRow01"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <Button
            android:id="@+id/Button02"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/Button01"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:layout_weight="1"
            android:text="Button" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1" >

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

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:layout_weight="1"
            android:text="Button" />
    </TableRow>

</TableLayout>

此布局将与屏幕大小无关,无论是横向还是纵向模式。在按钮周围定义自己的边距; - )

要使用评论中的边框,只需添加:

android:background="@drawable/back"

按钮。 back是您创建的形状的名称。