Как создать стандартные кнопки без полей (как в упомянутом руководстве по дизайну)?
Я просто проверял рекомендации по дизайну и задавался вопросом о кнопках без полей.
Я вытаращил глаза и попытался найти источник, но не смог собрать его сам.
Это обычный виджет кнопки, но вы добавляете пользовательский стиль (Android default)?
Как сделать эти кнопки без полей (конечно, вы можете установить фон пустым, но тогда у меня нет разделителя)?
Здесь ссылки на дизайн руководящие принципы:
http://developer.android.com/design/building-blocks/buttons.html
http://developer.android.com/guide/topics/ui/controls/button.html#Borderless

19 ответов:
Чтобы устранить некоторую путаницу:
Это делается в 2 этапа: Установка атрибута фона кнопки в android: attr / selectableItemBackground создает кнопку с обратной связью, но без фона.
android:background="?android:attr/selectableItemBackground"Линия для разделения кнопки без границ от остальной части макета выполняется видом с фоном android: attr / dividerVertical
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="?android:attr/borderlessButtonStyle"Источник: http://developer.android.com/guide/topics/ui/controls/button.html#Borderless
Затем вы можете добавить делители, как в ответе Карла .
Поздний ответ, но много мнений. Поскольку APIs
Пусть ваш контейнер имеет желаемый цвет (может быть прозрачным). Затем дайте вашим кнопкам селектор с прозрачным цветом по умолчанию и некоторым цветом при нажатии. Таким образом, у вас будет прозрачная кнопка, но при нажатии она будет менять цвет (как у holo). Вы также можете добавить некоторую анимацию (например, Холо). Селектор должен быть примерно таким:
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/...для APIPS [новички]: вы должны определить эти цвета в значениях/цветах.xml
Для тех, кто хочет кнопки без полей, но все еще анимированные при нажатии. Добавьте это в кнопку.
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>
Для стиля материала добавьте
style="@style/Widget.AppCompat.Button.Borderless"при использовании библиотеки AppCompat.
Из 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_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, но я считаю, что это должен быть самый надежный способ отображения его так, как его хочет отобразить фреймворк.
Вы также можете сделать кнопки без полей через код:
TypedValue value= new TypedValue(); getApplicationContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true); myButton.setBackgroundResource(value.resourceId);
Для тех, кто хочет создать кнопку без полей программно для 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"Атрибут для представления кнопок. Но после добавления выше линии кнопка не будет обеспечивать обратную связь касания.
Для обеспечения сенсорной обратной связи добавьте следующий код в класс 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; } });Для меня это работает нормально.
Для тех, кто все еще ищет:
Унаследуйте свой собственный стиль для кнопок Holo:
<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>Или Голографический Свет:
<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 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"/>
Вот как вы создаете кнопку без границ (плоскую) программно без использования 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);
Почему-то ни
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>Простая голова через стену приближается.
Отличное слайд-шоу о том, как достичь желаемого эффекта от Googles Nick Butcher (Начните со слайда 20). Он использует стандартный android
@attrдля стилизации кнопки и разделителя.
Добавление к верхнему ответу вы также можете использовать Виды с темно-серым фоновым цветом в линейной компоновке, например.
<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 и ширину, чтобы соответствовать родительской и наоборот, если ваша линия вертикальная.
Если вы хотите достичь того же программно:
(это 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" .../>
Попробуйте этот код, чтобы удалить фон drawable (@drawable/bg) программно, просто нам нужно предоставить null в качестве параметра.
Button btn= new Button(this); btn.setText("HI"); btn.setBackground(null);
Comments