Android 布局，有 4 个正方形，每个正方形内有一个按钮

Posted 2023-02-22

【中文标题】Android 布局，有 4 个正方形，每个正方形内有一个按钮

【英文标题】：Android layout with 4 squares and a button inside each square

【发布时间】：2012-09-15 07:50:48

【问题描述】：

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

我知道如何将 4 个按钮创建为正方形，但我不知道如何在每个正方形周围创建边框。但我想独立于大小，现在按钮非常大......

我的例子

<?xml version="1.0" encoding="utf-8"?>
<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_ android:layout_>
    <RelativeLayout android:id="@+id/magaLoginLayout"
        android:layout_ android:layout_>
        <Button android:text="@+id/Button01" android:id="@+id/Button01"
            android:layout_ android:layout_ 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_ android:layout_></Button>
        <Button android:text="@+id/Button04" android:layout_below="@+id/Button01" android:id="@+id/Button04"
            android:layout_toRightOf="@+id/Button03" android:layout_ android:layout_></Button>
        <Button android:text="@+id/Button02" android:id="@+id/Button02" android:layout_
            android:layout_toRightOf="@+id/Button01" android:layout_alignTop="@+id/Button01" android:layout_alignParentRight="true" android:layout_></Button>


</RelativeLayout>

【问题讨论】：

查看此链接：***.com/questions/7690416/android-border-for-button

【参考方案1】：

你想创建像这个截图一样的布局吗？

此布局的代码：

main_screen.xml

 <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_
       android:layout_
       android:background="@drawable/bgimage2" >

   <TextView
     android:id="@+id/textView1"
     android:layout_
     android:layout_
     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_ 
   android:layout_
   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_ 
  android:layout_
  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_ 
     android:layout_ 
     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_ 
     android:layout_ 
     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_ 
  android:layout_ 
  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_ 
    android:layout_ 
    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_ 
  android:layout_ 
  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_ 
 android:layout_ 
 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>

按钮效果代码（xml文件布局）：

    <Selector>
        <item android:drawable="@drawable/blockedsms"><shape>
        <solid android:color="#fff" />

        <stroke android: 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......

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

【讨论】：

不是答案，你至少可以提供一些文字，而不是用另一个问题来回答一个问题。

抱歉，我只是想确认一下，要求是否与此屏幕截图匹配？如果是，那么我将提供有关此布局的完整代码。

@Manish Android 是的，如果你能给出代码示例，那就太好了。谢谢

那又如何在当前主题中找不到样式“textViewStyle”在当前主题中找不到样式“buttonStyle”在当前主题中找不到样式“imageButtonStyle”失败

您可以删除这一行：style="?android:attr/buttonStyleSmall" 当我将 ImageButton 从布局面板拖动到我的源代码时使用它。它是那个图像按钮的样式。

【参考方案2】：

由于对您问题的评论似乎回答了边框部分，因此这里是布局部分的答案：

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

    <TableRow
        android:id="@+id/TableRow01"
        android:layout_
        android:layout_
        android:layout_weight="1" >

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

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

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_
        android:layout_
        android:layout_weight="1" >

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

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

</TableLayout>

此布局将独立于屏幕大小以及是横向还是纵向模式。在按钮周围定义自己的边距；-)

要使用评论中的边框，只需添加：

android:background="@drawable/back"

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