如何创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
,但是我相信这应该是框架要显示它的最稳健的方式。
查看主题属性buttonBarStyle
, buttonBarButtonStyle
和borderlessButtonStyle
。
您也可以通过代码使边框无边框:
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);