如何创建标准的无边框按钮(如提到的设计指南)？

Question

我只是检查设计指南并想知道无边框按钮.我瞪着眼睛,试图在源头找到但不能自己把它整合在一起.这是普通的Button小部件,但是您添加了自定义(Android默认)样式吗？如何制作这些无边框按钮(当然你可以将背景设置为空,但后来我没有分隔线)？

这里链接到设计指南:

• http://developer.android.com/design/building-blocks/buttons.html
• http://developer.android.com/guide/topics/ui/controls/button.html#Borderless

Answer 1

澄清一些困惑:

这是通过两个步骤完成的:将按钮背景属性设置为android:attr/selectableItemBackground会创建一个带反馈但没有背景的按钮.

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

将无边框按钮与其余布局分开的线由一个带有背景的视图完成:android:attr/dividerVertical

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

为了更好地理解,这里是屏幕底部的OK/Cancel无边框按钮组合的布局(如上图右图所示).

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

Answer 2

只需在Button标记中添加以下样式属性:

    style="?android:attr/borderlessButtonStyle"

来源:http://developer.android.com/guide/topics/ui/controls/button.html#Borderless

然后你可以像Karl的回答一样添加分隔符.

Answer 3

迟到的答案,但很多意见.由于API <11还没有死,对于那些感兴趣的人来说这是一个绝招.

让您的容器具有所需的颜色(可能是透明的).然后给你的按钮一个选择器,默认透明色,按下时有一些颜色.这样你就会有一个透明的按钮,但是在按下时会改变颜色(比如holo).您还可以添加一些动画(如holo).选择器应该是这样的:

res/drawable/selector_transparent_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" 
          android:exitFadeDuration="@android:integer/config_shortAnimTime">
     <item android:state_pressed="true"
         android:drawable="@color/blue" />

   <item android:drawable="@color/transparent" />
</selector>

按钮应该有 android:background="@drawable/selector_transparent_button"

PS:让容器有分隔器(android:divider='@android:drawable/...API <11)

PS [新手]:您应该在values/colors.xml中定义这些颜色

Answer 4

对于想要无边框按钮但在点击时仍然是动画的人.在按钮中添加此项.

style="?android:attr/borderlessButtonStyle"

如果你想要它们之间的分隔线/线.在线性布局中添加它.

style="?android:buttonBarStyle"

摘要

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   style="?android:buttonBarStyle">

    <Button
        android:id="@+id/add"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add_dialog" 
        style="?android:attr/borderlessButtonStyle"
        />

    <Button
        android:id="@+id/cancel"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/cancel_dialog" 
        style="?android:attr/borderlessButtonStyle"
        />

</LinearLayout>

Answer 5

对于style="@style/Widget.AppCompat.Button.Borderless"使用AppCompat库时添加的材质样式.

Answer 6

从iosched应​​用程序源我想出了这个ButtonBar类:

/**
 * An extremely simple {@link LinearLayout} descendant that simply reverses the 
 * order of its child views on Android 4.0+. The reason for this is that on 
 * Android 4.0+, negative buttons should be shown to the left of positive buttons.
 */
public class ButtonBar extends LinearLayout {

    public ButtonBar(Context context) {
        super(context);
    }

    public ButtonBar(Context context, AttributeSet attributes) {
        super(context, attributes);
    }

    public ButtonBar(Context context, AttributeSet attributes, int def_style) {
        super(context, attributes, def_style);
    }

    @Override
    public View getChildAt(int index) {
        if (_has_ics)
            // Flip the buttons so that "OK | Cancel" becomes "Cancel | OK" on ICS
            return super.getChildAt(getChildCount() - 1 - index);

        return super.getChildAt(index);
    }

    private final static boolean _has_ics = Build.VERSION.SDK_INT >= 
                                        Build.VERSION_CODES.ICE_CREAM_SANDWICH;
}

这将是LinearLayout"确定"和"取消"按钮进入,并将处理它们以适当的顺序.然后将其放在您想要按钮的布局中:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:divider="?android:attr/dividerHorizontal"
          android:orientation="vertical"
          android:showDividers="middle">
    <!--- A view, this approach only works with a single view here -->
    <your.package.ButtonBar style="?android:attr/buttonBarStyle"
        android:id="@+id/buttons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="1.0">
        <Button style="?android:attr/buttonBarButtonStyle"
            android:id="@+id/ok_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:text="@string/ok_button" />
        <Button style="?android:attr/buttonBarButtonStyle"
            android:id="@+id/cancel_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:text="@string/cancel_button" />
    </your.package.ButtonBar>
</LinearLayout>

这使您可以看到带有无边框按钮的对话框.您可以在框架中的res中找到这些属性.buttonBarStyle做垂直分隔和填充.buttonBarButtonStyle设置borderlessButtonStyle为Holo主题,但我相信这应该是显示它的最强大的方式,因为框架想要显示它.