Как создать стандартные кнопки без границ (например, в указанном руководстве по проектированию)?

Question

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

Здесь ссылки на руководящие принципы проектирования:

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

Answer 1

Чтобы прояснить некоторую путаницу:

Это делается в 2 шагах: настройка атрибута фона кнопки на Android: attr/selectabletembackground Создает вам кнопку с обратной связью, но без фона.

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>

Answer 2

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

    style="?android:attr/borderlessButtonStyle"

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

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

Answer 3

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

Пусть ваш контейнер имеет желаемый цвет (может быть прозрачным). Затем дайте вашим кнопкам селектор с прозрачным цветом по умолчанию и некоторым цветом при нажатии. Таким образом, у вас будет прозрачная кнопка, но при нажатии (как Холо) изменится цвет (как Холо). Вы также можете добавить анимацию (например, Холо). Селектор должен быть чем -то вроде этого:

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)

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

Answer 4

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

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>

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

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

Answer 9

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

Answer 10

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

Для меня это работает нормально.

Answer 11

Для любого, кто все еще ищет:

Унаследовать свой собственный стиль для голово

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

или Holo Light:

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

и для безграничных кнопок Холо:

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

Answer 12

Используйте приведенный ниже код в вашем XML -файле. Используйте Android: founal = "#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"
/>

Answer 13

Вы можете использовать Библиотека поддержки 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"/>

Answer 14

Вот как вы создаете безграничную (плоскую) кнопку программно без использования 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);

Answer 15

По какой -то причине ни один 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>

Простая голова через стену подходит.

Answer 16

Отличное слайд -шоу на Как добиться желаемого эффекта от Googles Ник Мясник (Начните с слайда 20). Он использует стандартный Android @attr Чтобы укрепить кнопку и разделитель.

Answer 17

Добавление в верхний ответ вы также можете использовать виды с темно -серым цветом фона в линейной макете, как SO.

<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 и ширину, чтобы соответствовать родителям и наоборот, если ваша линия вертикальна.

Answer 18

Если вы хотите достичь того же программно:

(Это 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"
    .../>

Answer 19

Попробуйте этот код, чтобы программно удалить фон, который можно нарисовать (@Drawable/BG), просто нам нужно предоставить NULL в качестве параметра.

Button btn= new Button(this);
btn.setText("HI");
btn.setBackground(null);