В этой статье мы научимся использовать виджет 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>
Как работают кнопки? Что происходит в каждом виджете 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);
}
Пояснение: в методе onCreate() мы по идентификатору находим view в макете — findViewById(R.id.topButton) и с помощью приведения типов указываем, что это виджет Button.
Обработка событий (нажатий) на кнопку
Для того, чтобы наша кнопка могла обрабатывать события, нам нужно вызвать метод setOnClickListener() интерфейса View.OnClickListener для срабатывания обратного вызова на нажатие кнопки:
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>
Как видно с макета, мы вручную задали размеры виджета layout_width и layout_height, а также добавили верхний отступ android:layout_marginTop. Также мы использовали атрибут android:background для задания фона виджета Button. Обратите внимание, что картинку facebook_prologistic.jpg мы предварительно скопировали в папку drawable Android-проекта.