如何创build标准的无边界button(如提到的devise指导)?

我只是检查devise指南,想知道无边界button。 我瞪着眼睛,试图寻找来源,但不能自己把它放在一起。 这是正常的button小部件,但你添加一个自定义(Android的默认)风格? 如何使这些无边界button(当然你可以设置背景为空,但是我没有分频器)?

这里链接到devise指南:

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

在这里输入图像描述

为了澄清一些混淆:

这是分两步完成的:将button背景属性设置为android:attr / selectableItemBackground为您创build一个带有反馈但没有背景的button。

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

将无边框button从其余布局划分的行由背景android:attr / dividerVertical

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

为了更好地理解,在屏幕底部的确定/取消无边框button组合的布局(如上面的右图)。

 <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="?android:attr/borderlessButtonStyle" 

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

那么你可以像卡尔的答案一样添加分隔符。

迟到的答案,但许多意见。 由于API <11还没有死,对于这里感兴趣的人来说是一个窍门。

让您的容器具有所需的颜色(可能是透明的)。 然后给你的button一个select器默认透明颜色,并按下一些颜色。 这样你会有一个透明的button,但按下时会改变颜色(如holo的)。 你也可以添加一些animation(如holo的)。 select器应该是这样的:

 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> 

而button应该有android:background="@drawable/selector_transparent_button"

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

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

对于想要无边界button但点击时仍然animation的人。 在button中添加这个。

 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> 

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

从iOS应用程序源代码中,我想出了这个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; } 

这将是“OK”和“Cancel”button进入的LinearLayout ,并将按照适当的顺序进行处理。 然后把它放在你想要的button的布局中:

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

这使您看到带有无边界button的对话框。 你可以在框架的res中find这些属性。 buttonBarStyle执行垂直分隔符和填充。 buttonBarButtonStyle被设置为Holo主题的borderlessButtonStyle ,但是我相信这应该是框架要显示它的最稳健的方式。

查看主题属性buttonBarStylebuttonBarButtonStyleborderlessButtonStyle

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

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

对于那些想以编程方式为API> = 8创build无边框button的用户

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

另一个解决scheme,应该在旧的和较新的android平台上使用

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

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

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

它为我工作很好。

对于任何仍在search的人:

inheritance你自己的Holo buttonbars风格:

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

或者Holo Light:

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

和无边框的Holobutton:

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

或者Holo Light:

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

在你的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" /> 

您可以使用AppCompat支持库无边界button。

你可以像这样做一个无边界button:

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

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

由于某种原因,既不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" ,这个XML在res / drawable / transparent.xml中:

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

平头穿墙的方法。

一个伟大的幻灯片显示如何实现从谷歌尼克·布彻 (从幻灯片20开始) 的预期效果 。 他使用标准的android @attr来devisebutton和分隔线。

添加到顶部的答案,你也可以在一个线性布局使用深灰色的背景颜色的意见,像这样。

 <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,宽度要匹配父母,反之亦然,如果你的线是垂直的。

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

(这是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的情况下以编程方式创build无边界(平面)button

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