如何在Android中设置按钮样式

Question

普通按钮的外观如下所示：

现在，请告诉我，如何制作一个与附加的图像按钮相同的简单按钮（即按钮角形是圆形的，两个按钮之间也没有间隙）。

- Paresh Mayani

---

以下是一些漂亮的渐变按钮示例，包括预览：http://www.dibbus.com/2011/02/gradient-buttons-for-android/ - Bachi

Answer 1

1- 创建按下和释放状态的形状（并设置所需的颜色）

为了创建这些形状，我建议使用这个很棒的网站，它可以为您完成：http://angrytools.com/android/button/

drawable\botton_shape_pressed.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/pressed_button_background"
        android:endColor="@color/pressed_button_background"
        android:angle="45"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />
</shape>

drawable\botton_shape_released.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/released_button_background"
        android:endColor="@color/released_button_background"
        android:angle="45"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />
</shape>

2- 为这两个形状创建一个选择器

drawable\botton_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/botton_shape_pressed"
          android:state_pressed="true" />
    <item android:drawable="@drawable/botton_shape_pressed"
          android:state_selected="true" />
    <item android:drawable="@drawable/botton_shape_released" />
</selector>

3- 使用按钮的选择器

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/test"
    android:textColor="@color/blue_text"
    android:onClick="testOnClickListener"
    android:background="@drawable/botton_selector" />

- Asaf Pinhassi

Answer 2

这里可以使用九宫格图片（9-patch），但我尽量避免使用它们，因为我不太擅长制作 :(

你可以尝试使用selector 并为每个状态使用一个形状：

形状应该像这样：

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle">

    <solid android:color="#AAFFFFFF"/>

    <corners android:bottomRightRadius="7dp"
        android:bottomLeftRadius="7dp" 
        android:topLeftRadius="7dp"
        android:topRightRadius="7dp"/>
</shape>

- Macarse

---

是的，Macarse，你说得对，要使用9-patch图像，请查看我下面的答案：https://dev59.com/f2855IYBdhLWcg3wMBLV#6659516 - Paresh Mayani

对于圆角，如果所有的角都相同，您可以使用以下小技巧：android:radius="Xdp"。否则，他的代码很好，只需添加即可。 - Nemka

Answer 3

您需要创建一个9-patch可绘制对象。为了使按钮之间没有空隙（边距），您需要在XML中创建适当的布局并将边距设置为0。

- kgiannakakis

---

+1，谢谢支持，这也帮助我理解了重点。 - Paresh Mayani

Answer 4

请查找Foursquared源代码并查找SegmentedButton.java文件，这个文件实现了图像中显示的这些按钮。

- Thiago

---

+1 Thiago 感谢你指出，我已经解决并实现了比这更好的方式 :) 不过我还会检查一下它是否好用。 :) - Paresh Mayani

Answer 5

要为文本添加样式，您可以将以下内容添加到strings.xml中

    <style name="ButtonText">
    <item name="android:layout_width">fill_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">#ffffff</item>
    <item name="android:gravity">center</item>
    <item name="android:layout_margin">3dp</item>
    <item name="android:textSize">30dp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:shadowColor">#000000</item>
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">2</item>
    </style>

并在main.xml按钮中调用它。

 style="@style/ButtonText"

另一种可供尝试的方法是创建在@drawable/btn_black中，具体操作如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#343434" />
            <stroke
                android:width="1dp"
                android:color="#171717" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#343434"
                android:endColor="#171717"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#171717" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

- droopie

Answer 6

创建一个 Nine patch drawable 很容易，使用 draw9patch（android/tools 的一部分），然后应用样式和主题... 这个链接 (Androgames.net) 上的教程可以帮助你入门。

- Mike

Answer 7

button_primary.xml

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

        <gradient
            android:angle="270"
            android:endColor="@color/background"
            android:startColor="@color/background" />

        <corners android:radius="1dp" />

        <stroke
            android:width="2px"
            android:color="@color/colorPrimary3" />

    </shape>

调用 style="@style/button_primary"

- Samet ÖZTOPRAK

Answer 8

你也可以在xml文件中使用ImageView，然后将onClickable和onFocusable设置为true，接着在后端代码中创建onClick事件方法，并在xml中给出该方法的名称，这样就不必处理所有形状或按钮问题，只需将ImageView放置在那里并使其像一个按钮一样工作。以下是示例代码：

<ImageView
            android:id="@+id/test"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:focusable="true"
            android:onClick="testClickEvent"
            android:paddingRight="8dip"
            android:paddingBottom="8dip"
            android:src="@drawable/testImg"/>

正如我在后端所说，创建一个带有此标志的方法就可以完成任务

public void testClickEvent(View v){}

然后在这个方法中实现你想做的事情。

- Burak Dede