如何在Android中创建无边框按钮

Question

Android设计准则建议使用无边框按钮（如下图），但并没有真正解释如何实现。有人几周前在这里问了同样的问题：如何创建标准的无边框按钮（如设计指南中所述）?，并且有一个被标记为“the”的答案，但我仍然摸不着头脑，也看不到如何在已经“关闭”的问题中添加评论。

回答者说：

“查看主题属性buttonBarStyle、buttonBarButtonStyle和borderlessButtonStyle”。

但我仍然无法弄清楚如何实际使用这些属性。我在谷歌上搜了一下，但找不到任何信息，所以我想再次提出问题，希望有人能够提供更多关于如何使用这些属性的细节。

- demarcmj

Answer 1

几周前我在这里看到一个关于使用透明背景的答案，以为问题解决了，但实际上不够好，因为它会防止按钮在被按下时高亮。

另外，将样式设置为Widget.Holo.Button.Borderless并不合适，因为它会使按钮边界过大。

为了彻底解决这个问题，我查看了标准日历应用程序的安卓源代码，并发现它使用以下内容：

android:background="?android:attr/selectableItemBackground"

这样做可以确保按钮没有边框，并且具有正确的尺寸。

- Paul Drummond

---

这是做这件事的正确方式。 - user766650

我已经寻找这个有一段时间了。谢谢！ - Sandra

如何在Java代码中实现这一点而不是使用XML？我正在使用代码创建一个ImageButton，并希望它没有边框，但是在被触摸时也有高亮颜色。 - dsample

selectableItemBackground 只支持 API 等级 11 及以上版本，对于旧版本有解决方案吗？ - alexandroid

@alexandroid 你需要为较低版本创建自己的<selector>。 - Sudarshan Bhat

Answer 2

看这个：http://developer.android.com/guide/topics/ui/controls/button.html#Borderless

Button 或 ImageButton 标签上的属性：

    style="?android:attr/borderlessButtonStyle"

- Dalc

---

那种会产生波纹效果并且超出视图范围一点点的样式怎么样？例如，在Lollipop的联系人应用中，当您搜索联系人，然后单击“向上”按钮（箭头）时？就好像按钮本身是圆形的，但具有透明背景... - android developer

@Dalc，干得好！ - Hiren Patel

@Dalc 我如何在程序中应用它呢？ - Moinkhan

这适用于按钮，但是当你对ImageButton这样做时，虽然边框消失了，但它失去了仅包裹所提供图像的宽度的能力，并开始像普通按钮一样表现，具有最小宽度。因此，对于ImageButton，最好的方法是android:background="?android:attr/selectableItemBackground"。 - Anshu Dwibhashi

Answer 3

如果您使用ActionbarSherlock...

<Button 
  android:id="@+id/my_button" 
  style="@style/Widget.Sherlock.ActionButton" />

- WindRider

---

如果您使用HoloEverywhere <Button android:background="?selectableItemBackground" /> - Brais Gabin

在我的设备上，最低SDK版本为9时完美运行。< style="@style/Widget.Sherlock.ActionButton" > - ieselisra

Answer 4

前几天我又偶然发现了这个问题。

我的解决方案如下：

这可以分为两步完成：将按钮背景属性设置为android:attr/selectableItemBackground ，这样就可以创建一个具有反馈但没有背景的按钮。

android:background="?android:attr/selectableItemBackground"

通过具有背景android:attr/dividerVertical的视图来分隔无边框按钮与布局中其余部分的行。

android:background="?android:attr/dividerVertical"

为了更好地理解，在屏幕底部（如上图右侧）可以使用无边框的“确定/取消”按钮组合布局。

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true">
        <View
            android:layout_width="match_parent"
            android:layout_height="1dip"
            android:layout_marginLeft="4dip"
            android:layout_marginRight="4dip"
            android:background="?android:attr/dividerVertical"
            android:layout_alignParentTop="true"/>
        <View
            android:id="@+id/ViewColorPickerHelper"
            android:layout_width="1dip"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="4dip"
            android:layout_marginTop="4dip"
            android:background="?android:attr/dividerVertical" 
            android:layout_centerHorizontal="true"/>
        <Button
            android:id="@+id/BtnColorPickerCancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@id/ViewColorPickerHelper"
            android:background="?android:attr/selectableItemBackground"
            android:text="@android:string/cancel" 
            android:layout_alignParentBottom="true"/>
        <Button
            android:id="@+id/BtnColorPickerOk"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:background="?android:attr/selectableItemBackground"
            android:text="@android:string/ok" 
            android:layout_alignParentBottom="true" 
            android:layout_toRightOf="@id/ViewColorPickerHelper"/>
    </RelativeLayout>

- KarlKarlsom

Answer 5

这段代码对我有效：

<View
    android:layout_width="match_parent"
    android:layout_height="1dip"
    android:background="?android:attr/dividerVertical" />

<LinearLayout
    style="?android:attr/buttonBarStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:measureWithLargestChild="true"
    android:orientation="horizontal"
    android:paddingLeft="2dip"
    android:paddingRight="2dip"
    android:paddingTop="0dip" >

    <Button
        android:id="@+id/cancel"
        style="?android:attr/buttonBarButtonStyle"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:onClick="onClickCancel"
        android:text="@string/cancel" />

     <Button
        android:id="@+id/info"
        style="?android:attr/buttonBarButtonStyle"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:onClick="onClickInfo"
        android:visibility="gone"
        android:text="@string/info" />

    <Button
        android:id="@+id/ok"
        style="?android:attr/buttonBarButtonStyle"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:onClick="onClickSave"
        android:text="@string/save" />
</LinearLayout>

我在底部显示3个按钮

- Paranoid Android

Answer 6

android:background="@android:color/transparent"

- Rich

---

如果图像背景本身不是透明的，那么它并没有多大帮助。 - Gangnus

同时，android:background="@null"也可以起作用。 - david72

Answer 7

<Button android:id="@+id/my_button" style="@android:style/Widget.Holo.Button.Borderless" />

- jgani

Answer 8

你还应将图片的边距和内边距设置为0。 同时查看 如何创建标准无边框按钮（如设计指南中提到的那样） 的第二个未标记答案。

- Gangnus