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

Android 设计指南说使用无边框按钮(见下图) ，但没有真正解释如何使用。几个星期前有人在这里问了同样的问题: 如何创建标准的无边框按钮(如设计指南中提到的) ？，有一个答案标记为“的”答案，但我仍然迷路，我没有看到一个已经“关闭”的问题添加评论的方法

回答者说

”查看主题属性 buttonBarStyle, buttonBarButtonStyle和 borderlessButtonStyle”

但我还是不知道怎么用这些东西。我用谷歌搜索了一下，什么也没找到，所以我想我还是再问一遍这个问题，希望有人能提供一些关于这个工作原理的更多细节。

enter image description here

97093 次浏览
小开 
android:background="@android:color/transparent"
小开

You should also set margins and padding of the picture to 0. Also look at the second, not marked answer at How to create standard Borderless buttons (like in the design guidline mentioned)?

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

I thought I had this solved when I looked here a few weeks ago and noticed the answer about using a transparent background but it isn't quite good enough because it prevents the button from being highlighted when pressed.

Also, setting the style to Widget.Holo.Button.Borderless isn't appropriate because it makes the button boundaries to big.

To figure this out once and for all, I check the android source code for the standard Calendar app and found that it uses the following:

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

Doing it this way ensures the button is borderless and the correct size.

小开

Look at this: http://developer.android.com/guide/topics/ui/controls/button.html#Borderless

The attribute on your Button or ImageButton tag:

    style="?android:attr/borderlessButtonStyle"
小开

Some days ago a stumbeled over this again.

Here my solution:

This is done in 2 steps: Setting the button background attribute to android:attr/selectableItemBackground creates you a button with feedback but no background.

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

The line to divide the borderless button from the rest of you layout is done by a view with the background android:attr/dividerVertical

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

For a better understanding here is a layout for a OK / Cancel borderless button combination at the bottom of your screen (like in the right picture above).

<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>
小开

If you use ActionbarSherlock...

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

This code works for me:

<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>

I show 3 buttons at the bottom


提交答案