Создаем кнопку в Android. Пример работы с виджетом Button в Android

В этой статье мы научимся использовать виджет Button в Android. Также здесь рассказывается о том, как обрабатывать нажатия, применять стили, работать с xml-макетом кнопки, а также управлять виджетом Button в коде. Урок будет полезен для начинающих андроид-программистов.

Сегодня мы узнаем как задавать различные расположение для кнопок, менять фоновые изображения и обрабатывать события, связанные с виджетом Button.

Создаем кнопку в Android

Кнопка представляет собой кликабельный Android виджет, который может принимать различные формы и реагировать на действия пользователя, а именно: обычное нажатие, длительное нажатие и т.д. Виджет Button доступен в пакете android.widget.Button.

Как и любой другой виджет, вы можете объявить Button в макете вашей активности или фрагмента, также создать кнопку программно.

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <Button
        android:id="@+id/topButton"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Кнопка сверху" />

    <Button
        android:id="@+id/leftButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Кнопка слева" />

    <Button
        android:id="@+id/horizontalButton"
        android:layout_width="250dp"
        android:layout_height="50dp"
        android:text="Кнопка размером 200х50 dp" />

    <Button
        android:id="@+id/largeButton"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:gravity="center_horizontal"
        android:text="Большая кнопка" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<Button

android:id="@+id/topButton"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="Кнопка сверху" />

<Button

android:id="@+id/leftButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Кнопка слева" />

<Button

android:id="@+id/horizontalButton"

android:layout_width="250dp"

android:layout_height="50dp"

android:text="Кнопка размером 200х50 dp" />

<Button

android:id="@+id/largeButton"

android:layout_width="300dp"

android:layout_height="200dp"

android:gravity="center_horizontal"

android:text="Большая кнопка" />

</LinearLayout>

Как работают кнопки? Что происходит в каждом виджете Button?

Android отрендерит приведенный выше XML-код макета следующим образом:

Android увидит тип макета LinearLayout установит его в вертикальное положение.
Параметр layout_width укажет ширину макета, а layout_height — высоту. Если в каком-то из значений будет match_parent, то кнопка растянется на весь экран; wrap_content укажет, что размеры кнопки должны быть достаточными, чтобы вместить вложенный контент (текст, картинка).
android:layout_gravity определит позиционирование виджета Button относительно родительского компонента.
android:gravity определит выравнивание содержимого Button. Она задается одной из констант left, right, center_vertical, center_horizontal, center.

Как выглядит макет после рендеринга (прорисовки макета после анализа):

Инициализация кнопки в Android

Теперь, когда у нас уже есть готовый макет с четырьмя разными по форме и размеру кнопками, давайте инициализируем их в коде нашей Activity:

protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.layout_main);

	Button topButton = (Button) findViewById(R.id.topButton);	
}

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.layout_main);

Button topButton = (Button) findViewById(R.id.topButton);

}

Пояснение: в методе onCreate() мы по идентификатору находим view в макете — findViewById(R.id.topButton) и с помощью приведения типов указываем, что это виджет Button.

Обработка событий (нажатий) на кнопку

Для того, чтобы наша кнопка могла обрабатывать события, нам нужно вызвать метод setOnClickListener() интерфейса View.OnClickListener для срабатывания обратного вызова на нажатие кнопки:

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_main);

        Button topButton = (Button) findViewById(R.id.topButton);
        button.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                Toast.makeText(this, "Кнопка сверху была нажата!", Toast.LENGTH_LONG).show();
            }
        }
    }

button.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(this, "Кнопка сверху была нажата!", Toast.LENGTH_LONG).show();

}

Применение стилей к виджету Android Button

К кнопке могут быть применены такие стили, как цвет, шрифт, фон и т.д. Давайте рассмотрим некоторые из атрибуты для стилизации виджетов Button:

Атрибут android:background устанавливает фон кнопки. Это может быть шестнадцатеричный цвет в формате #RRGGBBAA или это может быть объект drawable.
Атрибут android:textColor позволяет установить цвет текста виджета Button.

Подробнее о стилях и темах в Android.

Давайте уберем неиспользуемые кнопки и немного поэкспериментируем с нашей topButton кнопкой:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <Button
        android:id="@+id/topButton"
        android:layout_width="220dp"
        android:layout_height="90dp"
        android:layout_marginTop="10dp"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/facebook_prologistic"/>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<Button

android:id="@+id/topButton"

android:layout_width="220dp"

android:layout_height="90dp"

android:layout_marginTop="10dp"

android:layout_gravity="center_horizontal"

android:background="@drawable/facebook_prologistic"/>

</LinearLayout>

Как видно с макета, мы вручную задали размеры виджета layout_width и layout_height, а также добавили верхний отступ android:layout_marginTop. Также мы использовали атрибут android:background для задания фона виджета Button. Обратите внимание, что картинку facebook_prologistic.jpg мы предварительно скопировали в папку drawable Android-проекта.

Если вам не понятны какие-то части xml-макета или кода, то это нормально. С каждым уроком мы будем узнавать все больше и понемногу будет складывать общая картина. А пока, следите за обновлениями раздела Разработка под Android.