Как создать стандартные кнопки без полей (как в упомянутой директиве по дизайну)? - PullRequest
110 голосов
/ 13 января 2012

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

Здесь приведены ссылки на рекомендации по проектированию:

enter image description here

Ответы [ 19 ]

162 голосов
/ 01 июля 2012

Чтобы устранить путаницу:

Это делается в 2 этапа: установка атрибута фона кнопки на android: attr / selectableItemBackground создает кнопку с обратной связью, но без фона.

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

Линия для отделения кнопки без рамки от макета остальной части выполняется с помощью фона android: attr / dividerVertical

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

Для лучшего понимания здесь приведена раскладка для комбинации кнопок OK / Отмена без полей в нижней части экрана (как на правом рисунке выше).

<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>
48 голосов
/ 18 августа 2012

Просто добавьте следующий атрибут стиля в тег Button:

    style="?android:attr/borderlessButtonStyle"

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

Затем вы можете добавить делители, как в Ответ Карла .

22 голосов
/ 02 февраля 2013

Поздний ответ, но много просмотров.Поскольку API <11 еще не умерли, для тех, кто заинтересован, это хитрость.</p>

Пусть ваш контейнер имеет желаемый цвет (может быть прозрачным).Затем дайте кнопкам селектор с прозрачным цветом по умолчанию и немного цвета при нажатии.Таким образом, у вас будет прозрачная кнопка, но при нажатии она изменит цвет (как и у 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/... для API <11) </p>

PS [Новички]: вы должны определить эти цвета в values ​​/ colors.xml

18 голосов
/ 01 сентября 2014

Для тех, кто хочет кнопки без полей, но все еще анимированные при нажатии. Добавьте это в кнопку.

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>
7 голосов
/ 11 марта 2016

Для стиля материала добавьте style="@style/Widget.AppCompat.Button.Borderless" при использовании библиотеки AppCompat.

5 голосов
/ 19 сентября 2012

Из источника приложения 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, но я считаю, что это должен быть самый надежный способ его отображения, так как фреймворк хочет его отобразить.

4 голосов
/ 31 августа 2015

Вы также можете сделать кнопки без полей с помощью кода:

TypedValue value= new TypedValue();
getApplicationContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
 myButton.setBackgroundResource(value.resourceId);
4 голосов
/ 26 января 2012

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

2 голосов
/ 21 июня 2014

Другое решение, которое должно работать как на старой, так и на новой платформе 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;
    }
});

Это нормально работает для меня.

2 голосов
/ 22 апреля 2014

Для тех, кто хочет создать кнопку без полей программно для 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);
...