android - 如何创建标准的无边框按钮（如提到的设计指南中）？

Question

我只是在查看设计指南并想知道无边框按钮。我凝视并试图在源中找到，但不能自己将其组合在一起。这是普通的 Button 小部件，但您添加了自定义（Android 默认）样式？如何制作这些无边框按钮（当然你可以将背景设置为空，但是我没有分隔线）？

这里链接到设计指南：

在此处输入图像描述

score 165 · Accepted Answer

为了消除一些混乱：

这分两步完成：将按钮背景属性设置为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>

score 50 · Accepted Answer

Button只需在标签中添加以下样式属性：

    style="?android:attr/borderlessButtonStyle"

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

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

score 22 · Accepted Answer

迟到的答案，但很多意见。由于 APIs < 11 还没有死，对于那些感兴趣的人来说这是一个技巧。

让您的容器具有所需的颜色（可能是透明的）。然后给你的按钮一个默认透明颜色的选择器，按下时有一些颜色。这样，您将拥有一个透明按钮，但在按下时会改变颜色（如全息）。您还可以添加一些动画（如全息）。选择器应该是这样的：

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 中定义这些颜色

score 18 · Accepted Answer

对于那些想要无边框按钮但单击时仍然动画的人。在按钮中添加这个。

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>

score 7 · Accepted Answer

7

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

于 2016-03-11T14:57:54.577 回答

score 5 · Accepted Answer

从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 主题，但我相信这应该是显示它的最强大的方式，因为框架想要显示它。

score 4 · Accepted Answer

4

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

于 2012-01-26T17:39:23.400 回答

score 4 · Accepted Answer

您也可以通过代码使按钮无边框：

TypedValue value= new TypedValue();
getApplicationContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
 myButton.setBackgroundResource(value.resourceId);

score 2 · Accepted Answer

对于那些想要以编程方式为 API >= 8 创建无边框按钮的人

ImageButton smsImgBtn = new ImageButton(this);
//Sets a drawable as the content of this button
smsImgBtn.setImageResource(R.drawable.message_icon);    
//Set to 0 to remove the background or for bordeless button
smsImgBtn.setBackgroundResource(0);

score 2 · Accepted Answer

应该在较旧和较新的android平台上都可以使用的另一种解决方案是使用

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

按钮视图的属性。但是添加上面的线路按钮后将不会提供触摸反馈。

要提供触摸反馈，请将以下代码添加到 Activity 类

button.setOnTouchListener(new View.OnTouchListener() {          
    @Override
    public boolean onTouch(View view, MotionEvent event) {
        switch (event.getAction())
        {
            case MotionEvent.ACTION_DOWN:    
                ((Button)view).setBackgroundColor(Color.LTGRAY);
                break;
            case MotionEvent.ACTION_UP:
                ((Button)view).setBackgroundColor(Color.TRANSPARENT);
        }
        return false;
    }
});

它对我来说工作正常。

score 2 · Accepted Answer

对于仍在搜索的任何人：

继承您自己的 Holo 按钮栏样式：

<style name="yourStyle" parent="@android:style/Holo.ButtonBar">
  ...
</style>

或全息灯：

<style name="yourStyle" parent="@android:style/Holo.Light.ButtonBar">
  ...
</style>

对于无边框 Holo 按钮：

<style name="yourStyle" parent="@android:style/Widget.Holo.Button.Borderless.Small">
  ...
</style>

或全息灯：

<style name="yourStyle" parent="@android:style/Widget.Holo.Light.Button.Borderless.Small">
  ...
</style>

score 2 · Accepted Answer

这是您在不使用 XML 的情况下以编程方式创建无边框（平面）按钮的方式

ContextThemeWrapper myContext = new ContextThemeWrapper(this.getActivity(), 
   R.style.Widget_AppCompat_Button_Borderless_Colored);

Button myButton = new Button(myContext, null, 
   R.style.Widget_AppCompat_Button_Borderless_Colored);

score 1 · Accepted Answer

在您的 xml 文件中使用以下代码。使用 android:background="#00000000" 获得透明色。

<Button
   android:id="@+id/btnLocation"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="#00000000"
   android:text="@string/menu_location"
   android:paddingRight="7dp"
/>

score 1 · Accepted Answer

您可以将AppCompat 支持库用于无边框按钮。

您可以像这样制作无边框按钮：

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp" 
    android:text="@string/borderless_button"/>

您可以像这样制作无边框彩色按钮：

<Button
    style="@style/Widget.AppCompat.Button.Borderless.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp" 
    android:text="@string/borderless_colored_button"/>

score 1 · Accepted Answer

如果您想以编程方式实现相同的目标：

（这是 C#，但很容易转换为 Java）

Button button = new Button(new ContextThemeWrapper(Context, Resource.Style.Widget_AppCompat_Button_Borderless_Colored), null, Resource.Style.Widget_AppCompat_Button_Borderless_Colored);

匹配

    <Button
       style="@style/Widget.AppCompat.Button.Borderless.Colored"
    .../>

score 1 · Accepted Answer

试试这段代码，以编程方式删除背景可绘制对象（@drawable/bg），我们只需要提供 null 作为参数。

Button btn= new Button(this);
btn.setText("HI");
btn.setBackground(null);

score 0 · Accepted Answer

出于某种原因，既不适合我，style="Widget.Holo.Button.Borderless"也不android:background="?android:attr/selectableItemBackground"适合我。更准确地说Widget.Holo.Button.Borderless，在 Android 4.0 上完成了这项工作，但在 Android 2.3.3 上却没有。在这两个版本上对我来说的诀窍是android:background="@drawable/transparent"res/drawable/transparent.xml 中的这个 XML：

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" >
</shape>

平头穿墙进场。

score 0 · Accepted Answer

关于如何从 Google 的 Nick Butcher 获得所需效果的精彩幻灯片（从幻灯片 20 开始）。他使用标准的 android@attr来设置按钮和分隔线的样式。

score 0 · Accepted Answer

添加到最佳答案，您还可以像这样在线性布局中使用具有深灰色背景颜色的视图。

<View
    android:layout_width="match_parent"
    android:layout_height="1dip"
    android:layout_marginBottom="4dip"
    android:layout_marginLeft="4dip"
    android:layout_marginRight="4dip"
    android:layout_marginTop="4dip"
    android:background="@android:color/darker_gray"/>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="4dip"
    android:orientation="horizontal"
    android:weightSum="1">

    <Button
        android:id="@+id/button_decline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_weight="0.50"
        android:background="?android:attr/selectableItemBackground"
        android:padding="10dip"
        android:text="@string/decline"/>

    <View
        android:layout_width="1dip"
        android:layout_height="match_parent"
        android:layout_marginLeft="4dip"
        android:layout_marginRight="4dip"
        android:background="@android:color/darker_gray"/>

    <Button
        android:id="@+id/button_accept"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_weight="0.50"
        android:background="?android:attr/selectableItemBackground"
        android:padding="10dip"
        android:text="@string/accept"/>
</LinearLayout>

如果您的线是水平的，您需要将高度设置为 1dip，将宽度设置为与父级匹配，反之亦然，如果您的线是垂直的。

android - 如何创建标准的无边框按钮（如提到的设计指南中）？

19 回答 19

Related

Reference