В этой статье мы научимся использовать виджет Button
в Android. Также здесь рассказывается о том, как обрабатывать нажатия, применять стили, работать с xml-макетом кнопки, а также управлять виджетом Button
в коде. Урок будет полезен для начинающих андроид-программистов.
Сегодня мы узнаем как задавать различные расположение для кнопок, менять фоновые изображения и обрабатывать события, связанные с виджетом Button
.
Создаем кнопку в Android
Кнопка представляет собой кликабельный Android виджет, который может принимать различные формы и реагировать на действия пользователя, а именно: обычное нажатие, длительное нажатие и т.д. Виджет
Button
доступен в пакетеandroid.widget.Button
.
Как и любой другой виджет, вы можете объявить Button
в макете вашей активности или фрагмента, также создать кнопку программно.
Давайте создадим первые кнопки и зададим различные свойства каждой:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?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
:
1 2 3 4 5 6 |
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
для срабатывания обратного вызова на нажатие кнопки:
7 8 9 10 11 12 13 14 |
button.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Toast.makeText(this, "Кнопка сверху была нажата!", Toast.LENGTH_LONG).show(); } } } |
Применение стилей к виджету Android Button
К кнопке могут быть применены такие стили, как цвет, шрифт, фон и т.д. Давайте рассмотрим некоторые из атрибуты для стилизации виджетов Button
:
- Атрибут
android:background
устанавливает фон кнопки. Это может быть шестнадцатеричный цвет в формате#RRGGBBAA
или это может быть объектdrawable
. - Атрибут a
ndroid:textColor
позволяет установить цвет текста виджетаButton
.
Подробнее о стилях и темах в Android.
Давайте уберем неиспользуемые кнопки и немного поэкспериментируем с нашей topButton кнопкой:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?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.