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



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



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




Введите описание изображения здесь

668   19  

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

Посмотрите на атрибуты темы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"

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

Для обеспечения сенсорной обратной связи добавьте следующий код в класс 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

    Ничего не найдено.