Поиск по сайту:

Дизайн кнопки Android, пользовательская кнопка, круглая кнопка, цвет

В этом уроке мы будем настраивать кнопки в нашем приложении для Android. Если вы не знакомы с кнопками Android, ознакомьтесь с этим руководством, прежде чем продолжить. Мы будем устанавливать селекторы и формы для наших кнопок в xml.

Дизайн кнопки Android

Селектор используется для определения различного поведения для разных состояний кнопки. Что такое рисуемые состояния? Каждое из следующих событий представления (кнопки или любого другого вида) является типом состояния:

  • состояние_нажато
  • состояние_выбрано
  • с фокусом на состоянии
  • состояние_включено

state_focused — это когда вы наводите курсор на виджет. Обычно работает только на эмуляторах. state_selected предназначен для выбора представления. Не работает с кнопками. Работает с RadioButtons. Обычно у кнопки есть только три важных состояния: обычное, нажатое и включенное. Для каждого из состояний селектора мы можем установить для нашей кнопки другой объект рисования/цвет/форму. Давайте начнем с реализации каждого из них в новом проекте Android Studio.

Структура проекта пользовательской кнопки Android

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@color/red"/>
    <item android:state_focused="true" android:drawable="@color/yellow"/>
    <item android:drawable="@color/green"/>
</selector>

В приведенном выше коде каждое из состояний представлено с помощью тега элемента. Тег селектора в некоторой степени ведет себя как оператор if-else if. Он проверяет каждое условие сверху вниз. Всякий раз, когда условие соответствует, оно устанавливает соответствующие вещи на кнопку и прекращает обработку тегов следующего элемента. Третий тег элемента является тегом по умолчанию. Важно, чтобы мы сохранили его в последнюю очередь. Сохранение его наверху не позволит двум другим тегам элементов выполняться когда-либо. Мы устанавливаем приведенный выше файл селектора для нашей кнопки в activity_main.xml как:

<Button
            android:id="@+id/btnBgSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector"
            android:padding="8dp"
            android:text="Colored Selector" />

Селектор устанавливается на атрибут фона кнопки.

Селектор для отключенной кнопки

Следующий селектор btn_bg_selector_disabled.xml используется для неактивной кнопки.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@color/yellow"/>
    <item android:state_pressed="true" android:drawable="@color/red"/>
    <item android:drawable="@color/green"/>
</selector>

Чтобы приведенный выше селектор работал, нам нужно указать android:enabled как false.

<Button
            android:id="@+id/btnBgSelectorDisabled"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector_disabled"
            android:enabled="false"
            android:padding="8dp"
            android:text="Color Selector Disabled" />

Селектор с различными чертежами

Мы можем установить другое отображаемое изображение, которое будет отображаться в зависимости от состояния кнопки. Код селектора, который делает это, находится в файле btn_drawable_selector.xml.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    
    <item android:drawable="@drawable/sad" android:state_pressed="true"/>
    <item android:drawable="@drawable/happy" android:state_focused="true"/>
    <item android:drawable="@drawable/happy"/>

</selector>

Примечание. Состояние фокусировки не работает на смартфонах. Теперь рисуемые изображения, установленные в качестве фона кнопки, могут растягиваться, если их ширина/высота больше, чем у кнопки. Поэтому нам нужно установить ширину/высоту кнопки в соответствии с нарисованным изображением. Мы можем сделать это либо путем жесткого кодирования в xml, либо программно получив размеры, которые можно рисовать, и установив их над кнопкой. Для удобства мы сделали первое здесь:

<Button
            android:id="@+id/btnDrawableSelector"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_margin="8dp"
            android:background="@drawable/btn_drawable_selector"
            android:padding="16dp" />

ImageButton — это идеальное представление, которое следует использовать, когда вам нужно отобразить рисуемый объект в качестве фона кнопки только потому, что он подходит для рисования соответствующим образом. ImageButton поставляется с атрибутом android:scale для изменения размера рисуемого изображения.

<ImageButton
            android:id="@+id/imgButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@color/green"
            android:padding="8dp"
            android:scaleType="center"
            android:src="@drawable/btn_drawable_selector" />

Цвет кнопки Android

Мы можем изменить цвет текста на кнопке в зависимости от состояния селектора. Следующий код из btn_txt_selector.xml делает это. Нам нужно использовать здесь android:color вместо android:drawable.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/red"/>
    <item android:state_focused="true" android:color="@color/yellow"/>
    <item android:color="@color/green"/>
</selector>

Кнопка в макете:

<Button
            android:id="@+id/btnTxtSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="Text Selector"
            android:textColor="@drawable/btn_txt_selector" />

Формы кнопок Android

Мы можем установить пользовательские формы для нашей кнопки, используя xml-тег <shape>. Эти xml-файлы также создаются в папке с возможностью рисования. shape можно использовать внутри селекторов. Можно задать следующие формы: прямоугольник (по умолчанию), овал, кольцо, линия. Наиболее часто используемые теги внутри тега формы:

  •  – установка начального и конечного цветов градиента, а также его типа (радиус, линейный, развертка).
  •  – установка цвета и ширины границы.
  •  – установка сплошного цвета на кнопке.
  • – Настройка радиуса

Android-кнопка с круглым углом

Код xml для файла btn_shape_round.xml приведен ниже:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:padding="16dp"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="@android:color/black" />
    <corners android:radius="10dp" />
</shape>

Как и в случае с селекторами, мы можем установить это в теге android:background на кнопке в нашем XML-макете.

Форма кнопки Android с градиентом

В следующем файле btn_shape_gradient.xml мы установили градиент как radial. Мы также должны установить атрибут градиента_радиуса.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:endColor="@color/green"
        android:gradientRadius="30dp"
        android:type="radial"
        android:startColor="@color/yellow" />

    <corners android:radius="@dimen/btn_corner_radius" />

    <stroke
        android:width="4dp"
        android:color="@android:color/black" />

</shape>

Форма кнопки Android и селектор вместе

btn_selector_shape.xml содержит селектор. Каждый из предметов имеет заданную форму.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">

        <shape android:shape="oval">
            <gradient android:angle="135" android:endColor="@color/jd_red" android:startColor="@color/green" />
            <corners android:radius="20dp" />
            <stroke android:width="2dp" android:color="@android:color/black" />
        </shape>

    </item>

    <item>
        <shape android:shape="rectangle">
            <gradient android:angle="225" android:endColor="@color/green" android:startColor="@color/jd_red" />
            <corners android:radius="@dimen/btn_corner_radius" />
            <stroke android:width="4dp" android:color="@android:color/black" />
        </shape>

    </item>
</selector>

Установите это на кнопке, и форма изменится с прямоугольной на овальную при нажатии кнопки. Линейный градиент должен иметь угол, кратный 45, иначе произойдет сбой. Установка формы кнопки в виде капсулы btn_shape_capsule.xml — это место, где мы устанавливаем форму внутри селекторов в виде капсулы.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape android:shape="rectangle">

            <solid android:color="@color/colorAccent" />
            <corners android:radius="10dp" />

        </shape>

    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/yellow" />
            <corners android:radius="10dp" />
        </shape>

    </item>

</selector>

Ниже приведен код класса MainActivity.java, в котором размещены все приведенные выше примеры кнопок.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:weightSum="2">


    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Selectors"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="bold|italic" />


        <Button
            android:id="@+id/btnBgSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector"
            android:padding="8dp"
            android:text="Colored Selector" />

        <Button
            android:id="@+id/btnBgSelectorDisabled"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector_disabled"
            android:enabled="false"
            android:padding="8dp"
            android:text="Color Selector Disabled" />

        <Button
            android:id="@+id/btnDrawableSelector"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_margin="8dp"
            android:background="@drawable/btn_drawable_selector"
            android:padding="16dp" />

        <ImageButton
            android:id="@+id/imgButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@color/green"
            android:padding="8dp"
            android:scaleType="center"
            android:src="@drawable/btn_drawable_selector" />

        <Button
            android:id="@+id/btnTxtSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="Text Selector"
            android:textColor="@drawable/btn_txt_selector" />


    </LinearLayout>


    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Shapes+Selectors"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="bold|italic" />

        <Button
            android:id="@+id/btnRoundShape"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_shape_round"
            android:padding="8dp"
            android:text="ROUND SHAPE" />

        <Button
            android:id="@+id/btnBgShape"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_shape_gradient"
            android:padding="8dp"
            android:text="SHAPE WITH GRADIENT" />


        <Button
            android:id="@+id/btnSelectorShape"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_selector_shape"
            android:padding="8dp"
            android:text="SELECTOR SHAPE" />


        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_shape_gradient"
            android:padding="8dp"
            android:scaleType="center"
            android:src="@drawable/btn_drawable_selector" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_shape_capsule"
            android:padding="8dp"
            android:text="Text Selector"
            android:textColor="@drawable/btn_txt_selector" />


    </LinearLayout>


</LinearLayout>

Вывод приложения Android Custom Button Design

Скачать проект Android Button Design