Как создать стандартные кнопки без полей (как в упомянутом руководстве по дизайну)?

Я просто проверял рекомендации по дизайну и задавался вопросом о кнопках без полей. Я вытаращил глаза и попытался найти источник, но не смог собрать его сам. Это обычный виджет кнопки, но вы добавляете пользовательский (Android по умолчанию) стиль? Как сделать эти кнопки без полей (конечно, вы можете установить фон пустым, но тогда у меня нет разделителя)?

здесь Ссылки на дизайн рекомендации:

enter image description here

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

    style="?android:attr/borderlessButtonStyle"

источник:http://developer.android.com/guide/topics/ui/controls/button.html#Borderless

затем вы можете добавить разделители в Карл!--6-->.


поздний ответ, но много просмотров. Поскольку 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 [новички]: вы должны определить эти цвета в значениях/цветах.в 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 источник приложения Я придумал это 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, но я считаю, что это должен быть самый надежный способ отображения его, поскольку структура хочет отобразить его.


посмотрите на атрибуты темы buttonBarStyle, buttonBarButtonStyle и borderlessButtonStyle.


вы также можете сделать кнопки без полей через код:

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"

атрибут для просмотра. Но после добавления над линией кнопка не обеспечит обратную связь касания.

чтобы обеспечить сенсорную обратную связь, добавьте следующий код в класс активности

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

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

используйте приведенный ниже код в 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"/>

Вы можете сделать Borderless цветную кнопку, как это:

<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/прозрачный.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#, но легко transatable с 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);