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

Posted

技术标签:

【中文标题】如何创建标准无边框按钮(如提到的设计指南中)?【英文标题】:How to create standard Borderless buttons (like in the design guideline mentioned)? 【发布时间】:2012-02-09 23:09:02 【问题描述】:

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

这里是设计指南的链接:

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

【问题讨论】:

类似***.com/questions/14046232/… 【参考方案1】:

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

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

【讨论】:

感谢您提供此代码 sn-p,它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法,并使其对有其他类似问题的未来读者更有用,从而大大提高其长期价值。请edit您的回答添加一些解释,包括您所做的假设。 有趣的解决方案,而且很有用。做它所承诺的。按钮看起来很棒。请记住,文本颜色也是可设置的。【参考方案2】:

这是您在不使用 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);

【讨论】:

我使用的是:ContextThemeWrapper myContext = new ContextThemeWrapper(this.getActivity(), R.style.Widget_AppCompat_Button_Borderless_Colored); Button myButton = new Button(myContext);,但它不起作用。添加第二个和第三个参数后,它就可以工作了!【参考方案3】:

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

(这是 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"
    .../>

【讨论】:

【参考方案4】:

您可以将AppCompat Support Library 用于无边框按钮。

你可以像这样制作一个无边框按钮:

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

你可以像这样制作无边框彩色按钮:

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

【讨论】:

【参考方案5】:

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

【讨论】:

【参考方案6】:

除了最重要的答案,您还可以像这样在线性布局中使用具有深灰色背景颜色的视图。

<View
    android:layout_
    android:layout_
    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_
    android:layout_
    android:layout_marginBottom="4dip"
    android:orientation="horizontal"
    android:weightSum="1">

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

    <View
        android:layout_
        android:layout_
        android:layout_marginLeft="4dip"
        android:layout_marginRight="4dip"
        android:background="@android:color/darker_gray"/>

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

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

【讨论】:

【参考方案7】:

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

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

【讨论】:

它工作正常,谢谢。但是android.R.attr.selectableItemBackground 需要 API 21。知道如何在早期版本上执行此操作吗? 它不工作。我正在尝试设置 android.R.attr.buttonBarButtonStyle 的资源,它说找不到资源。 使用 android.R.attr.selectableItemBackground【参考方案8】:

迟到的答案,但很多观点。由于 APIs

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

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

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

【讨论】:

这对API Level 10API Level &gt; 10 都非常有效! 这比以编程方式执行要好,即使两者都可以。 属性“exitFadeDuration”仅用于 API 级别 11 及更高级别。 是的@Bevor,不错。读者认为未知的 xml 标签被忽略,因此它将对 api >=11 使用淡入淡出,并且仅适用于 【参考方案9】:

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

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

【讨论】:

【参考方案10】:

适合那些想要无边框按钮但在单击时仍具有动画效果的人。将此添加到按钮中。

style="?android:attr/borderlessButtonStyle"

如果您想要它们之间的分隔线/线。将此添加到线性布局中。

style="?android:buttonBarStyle"

总结

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

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

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

</LinearLayout>

【讨论】:

加上按钮栏样式。顺便说一句,这就是答案。【参考方案11】:

对于仍在搜索的任何人:

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

【讨论】:

【参考方案12】:

另一个适用于新旧 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;
    
);

它对我来说很好用。

【讨论】:

我也会在case MotionEvent.ACTION_UP: 下方添加case MotionEvent.ACTION_CANCEL:【参考方案13】:

how to achieve the desired effect from Googles Nick Butcher 上的精彩幻灯片放映(从幻灯片 20 开始)。 他使用标准的 android @attr 来设置按钮和分隔线的样式。

【讨论】:

请注意,不鼓励link-only answers,所以答案应该是搜索解决方案的终点(与另一个参考文献的中途停留相比,随着时间的推移往往会变得陈旧)。请考虑在此处添加独立的概要,并保留链接作为参考。【参考方案14】:

对于那些希望以编程方式为 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);

【讨论】:

这比 lsj 的解决方案更好,更简单。只需 setBackgroundResource(0)【参考方案15】:

iosched app source 我想出了这个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_
          android:layout_
          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_
        android:layout_
        android:weightSum="1.0">
        <Button style="?android:attr/buttonBarButtonStyle"
            android:id="@+id/ok_button"
            android:layout_
            android:layout_
            android:layout_weight="0.5"
            android:text="@string/ok_button" />
        <Button style="?android:attr/buttonBarButtonStyle"
            android:id="@+id/cancel_button"
            android:layout_
            android:layout_
            android:layout_weight="0.5"
            android:text="@string/cancel_button" />
    </your.package.ButtonBar>
</LinearLayout>

这为您提供了带有无边框按钮的对话框外观。您可以在框架的 res 中找到这些属性。 buttonBarStyle 做垂直分隔线和填充。 buttonBarButtonStyle 设置为 borderlessButtonStyle 用于 Holo 主题,但我相信这应该是显示它的最可靠的方式,因为框架要显示它。

【讨论】:

我怎么能把这个 (?android:attr/buttonBarButtonStyle) 作为样式项放在 styles.xml 中?【参考方案16】:

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

    style="?android:attr/borderlessButtonStyle"

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

然后你可以像Karl's answer一样添加分隔符。

【讨论】:

【参考方案17】:

为了消除一些混乱:

这分两步完成:将按钮背景属性设置为 android:attr/selectableItemBackground 会为您创建一个有反馈但没有背景的按钮。

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

将无边框按钮与其余布局分开的线由背景为 android:attr/dividerVertical

的视图完成
android:background="?android:attr/dividerVertical"

为了更好地理解,这里是屏幕底部的“确定/取消”无边框按钮组合的布局(如上右图所示)。

<RelativeLayout
        android:layout_
        android:layout_
        android:layout_alignParentBottom="true">
        <View
            android:layout_
            android:layout_
            android:layout_marginLeft="4dip"
            android:layout_marginRight="4dip"
            android:background="?android:attr/dividerVertical"
            android:layout_alignParentTop="true"/>
        <View
            android:id="@+id/ViewColorPickerHelper"
            android:layout_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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>

【讨论】:

值得指出:此解决方案仅适用于 API 级别 11+。 如果您使用HoloEverywhere,它适用于 API 级别 7+。您必须将?android:attr/selectableItemBackground 更改为?attr/selectableItemBackground?android:attr/dividerVertical 更改为?attr/dividerVertical ?android:attr/dividerVerticalfor?attr/dividerVertical也适用于 abs【参考方案18】:

由于某种原因,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>

平头穿墙方法。

【讨论】:

将背景设置为 @android:color/transparent 对我有用,不需要额外的 XML 文件。 这里没有包含如何获取分隔符。 @Navarr 根据 Blundell 的回答,分隔符不是“无边框按钮”的一部分。也不应该因为按钮和任何其他视图类不应该被告知周围的 GUI 组件。那是容器的责任。在 Blundell 帖子的 cmets 中,有一个链接指向似乎是 ICS 联系人详细信息项目布局的链接。有用于显示分隔线的额外视图(带有vertical_divider id)。尽管有一个巧妙的android:background="?android:attr/dividerVertical" 技巧,但没有针对自动分隔器的开箱即用解决方案。 OPs 问题涉及 Android UX“无边框按钮”,在所有示例中,它们都有分隔线 - 这显然是 buttonBarStyle 的一部分。虽然您给了我一些非常有用的信息,但还是谢谢您。【参考方案19】:

查看主题属性buttonBarStylebuttonBarButtonStyleborderlessButtonStyle

【讨论】:

如果我使用 buttonBarButtonStyle 我得到一个异常 E/AndroidRuntime(17134): Caused by: java.lang.reflect.InvocationTargetException E/AndroidRuntime(17134): Caused by: android.content.res.Resources$NotFoundException: Resource is not a Drawable (color or path): TypedValuet=0x1/d=0x1030281 a=2 r=0x1030281 不知道为什么,但使用 selectableItemBackground 会产生奇迹。

以上是关于如何创建标准无边框按钮(如提到的设计指南中)?的主要内容,如果未能解决你的问题,请参考以下文章

这种无边框的弹出窗口如何用JS实现?

gnuplot:如何在每个像素上无边距绘制一个2D数组元素

从按钮中删除边框

如何在 Android 中创建无边框按钮 [重复]

无边框窗体和后台创建控件

qt按钮边框的问题