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

我只是在检查设计指南，想知道关于无边框按钮。 我瞪大眼睛，试图找到源头，但不能把它带到一起，我自己。 Is this the normal Button widget but you add a custom (Android default) style? 如何使这些无边框按钮(当然你可以设置背景为空，但我没有分隔符) ？

这里链接到设计指南:

enter image description here

121695 次浏览
小开

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

小开

由于某种原因，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/draable/Transparent.XML 中的这个 XML:

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

Plain head through the wall approach.

小开
最佳答案

为了澄清一些疑惑:

这是在两个步骤完成: 设置按钮背景属性为 Android: attr/selectableItemBack创建一个按钮与反馈，但没有背景。

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

将无边框按钮与其他布局分开的线是通过背景 Android: attr/diver竖直视图完成的

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

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

    style="?android:attr/borderlessButtonStyle"

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

然后您可以像在 卡尔的回答中那样添加分隔符。

小开

从 Iosching 应用程序源码我想出了这个 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进行垂直分隔和填充。对于 Holo 主题，buttonBarButtonStyle被设置为 borderlessButtonStyle，但是我相信这应该是最健壮的方式来显示它，因为框架想要显示它。

小开

Late answer, but many views. As APIs < 11 ain't dead yet, for those interested here is a trick.

Let your container have the desired color (may be transparent). Then give your buttons a selector with default transparent color, and some color when pressed. That way you'll have a transparent button, but will change color when pressed (like holo's). You can also add some animation (like holo's). The selector should be something like this:

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: 让您的容器有分隔符(对于 API < 11，android:divider='@android:drawable/...)

PS [Newbies]: you should define those colors in values/colors.xml

小开

一个很棒的 如何达到预期的效果从谷歌尼克屠夫幻灯片放映(从幻灯片20开始)。 他使用标准的机器人 @attr来设计按钮和分隔符。

小开

对于那些想要以编程方式为 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);
小开

另一个可以在老的和新的 android 平台上使用的解决方案是使用

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

attribute for Button view. But after adding above line button will not provide touch feedback.

要提供触摸反馈，请将以下代码添加到 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;
}
});

我觉得挺好的。

小开

For anybody who's still searching:

继承你自己的全息纽扣风格:

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

或全息光:

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

以及无边全息图按钮:

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

or Holo Light:

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

对于一个谁想要无边框按钮，但仍然单击动画。添加到按钮这一点。

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

在 xml 文件中使用以下代码。 使用 android: behind = “ # 0000000”来获得透明颜色。

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

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

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

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

小开

添加到顶部的答案，您也可以使用视图与深灰色的背景颜色在线性布局像这样。

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

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

小开

You can use AppCompat 支持库 for Borderless Button.

You can make a Borderless Button like this:

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

如果希望以编程方式实现相同的目标:

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

这就是如何在不使用 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);
小开

尝试使用这段代码，以编程方式删除背景可绘制(@draable/bg) ，只需要提供 null 作为参数。

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

提交答案