Задание обработчика OnClickListener
Лабораторная №3
TextView, Button. Взаимодействие с элементами интерфейса из Java-кода.
Сегодня мы рассмотрим два новых View — TextView и Button, а так же научимся базовому взаимодействию с UI из Java-кода.
Создайте новый проект по примеру предыдущих уроков, и приступим к обучению!
TextView
TextView, как должно быть понятно из названия, используется для отображения текста. Это, пожалуй, один из самых популярных View в Android.
Измените лэйаут activity_main.xml, чтобы он выглядел вот так:
activity_main.xml
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:orientation="vertical" android:paddingTop="@dimen/activity_vertical_margin" tools:context="ru.android_school.lesson5.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" /> </LinearLayout> |
Сейчас он будет выглядеть вот так:
Атрибут text
Самый главный атрибут у TextView — android:text. Он отвечает за тот текст, который будет отображен в TextView. Вы можете изменить текст в атрибуте на любой другой, и после сборки проекта он изменится и в приложении.
Атрибут textStyle
Мы можем задать стиль текста, подобно тому, как это делается в текстовом редакторе, с помощью атрибута android:textStyle. Этот атрибут может принимать следующие значения:
|
|
|
· normal — обычный текст, используется по умолчанию, если не указывать атрибут textStyle, то будет использован этот стиль.
· bold — жирный текст, выглядит вот так.
· italic — курсив, выглядит вот так.
bold и italic можно комбинировать, тогда получится жирный курсивный текст. Давайте попробуем на примере. Добавьте к TextView атрибут android:textStyle со значением bold.
activity_main.xml
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="ru.android_school.lesson5.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textStyle="bold" /> </LinearLayout> |
Результат будет вот таким:
А теперь давайте сделаем жирный курсивный текст. Замените bold на bold|italic:
activity_main.xml
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="ru.android_school.lesson5.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textStyle="bold|italic" /> </LinearLayout> |
Результат:
|
|
|
Атрибут textColor
Третий часто используемый атрибут — android:textColor. Как и следует из названия, задает цвет текста.
Может принимать значения в следующих форматах:
· #RGB
· #ARGB
· #AARRGGBB
· #RRGGBB
Чаще всего используют форматы #RRGGBB и #AARRGGBB
К примеру, чтобы сделать текст красным, нужно добавить атрибут android:textColor со значением #ff0000.
activity_main.xml
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="ru.android_school.lesson5.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textColor="#ff0000"/> </LinearLayout> |
Результат:
|
|
|
Атрибут textSize
Опять же, как следует из названия, этот атрибут отвечает за размер текста. При установке размера текста используется не уже видимый вами ранее юнит dp, а sp. Что такое dp и sp мы узнаем в одном из следующих уроков, сейчас лишь запомните, что при задании текста нужно обязательно использовать именно sp.
Пример использования:
activity_main.xml
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="ru.android_school.lesson5.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textSize="25sp" android:textColor="#ff0000"/> </LinearLayout> |
Результат:
Button
Элемент Button, как вы, наверное, уже догадались, отвечает за отображение кнопки.
|
|
|
На самом деле класс Button — всего лишь наследник TextView, и отличается от нее по большей части только внешним видом. Давайте добавим кнопку в нашу разметку, и посмотрим, что получилось:
activity_main.xml
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="ru.android_school.lesson5.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Click me"/> </LinearLayout> |
Если вы сейчас запустите приложение, то кнопка будет давать визуальный отклик на нажатие, но ничего происходить не будет. Так давайте заставим ее выполнять какое-то действие :)
Обработка нажатия
Для начала сформулируем задачу: при нажатии на кнопку изменить текст в TextView на «Hi!».
Теперь немного теории. В Java для обработки каких-либо событий обычно используют интерфейсы, изредка — абстрактные классы. Android — не исключение. Сейчас мы хотим обработать событие нажатия на кнопку. Для этого нам понадобится интерфейс OnClickListener.
Сначала нам нужно создать инстанс этого интерфейса. Для этого есть несколько способов. Рассмотрим два из них:
· Реализовать интерфейс в нашей activity
· Создать объект, реализующий этот интерфейс
В первом случае нужно дописать implements OnClickListener к нашей Activity и добавить метод onClick:
MainActivity.java
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | package ru.android_school.lesson5; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; public class MainActivity extends AppCompatActivity implements View.OnClickListener { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @Override public void onClick(View v) { } } |
Обратите внимание, что помимо View.OnClickListener существует еще DialogInterface.OnClickListener. Нам нужен именно первый интерфейс (это очень частая ошибка у новичков!).
Такой подход бывает оправдан в некоторых случаях, но считается дурным тоном, лучше выделить обработчик в отдельный объект:
MainActivity.java
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | package ru.android_school.lesson5; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } private final View.OnClickListener onClickListener = new View.OnClickListener() { @Override public void onClick(View v) { } }; } |
Обработчики лучше размещать в конце класса, и присваивать им модификатор final.
И так, обработчик мы создали. Но он, естественно, не будет работать, пока мы не присвоили его к нашей кнопке. Как же это сделать?
Использование findViewById
Помните, в одном из предыдущих уроков мы упоминали атрибут android:id? Пришло время вернуться к нему. Напомним, что он используется для идентификации конкретных View внутри Activity (и других элементов, но об этом потом). В XML-разметке присвоим id к нашим элементам Button и TextView:
activity_main.xml
| 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 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="ru.android_school.lesson5.MainActivity"> <TextView android:id="@+id/hello_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" /> <Button android:id="@+id/hello_btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Click me"/> </LinearLayout> |
Теперь мы можем обращаться к ним из кода. Чтобы работать с элементами интерфейса в коде, нужно «присвоить» их некоторому объекту. А чтобы сделать это, нужно их найти. Для этого и существует метод findViewById, которому передается id элемента, а он возвращает нам объект View (либо null, если такого объекта нет). Поскольку возвращается View, нам нужно скастовать его в конкретный тип. Давайте для примера найдем наш TextView:
MainActivity.java
| 1 2 3 4 5 6 7 | @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TextView helloTv = (TextView) findViewById(R.id.hello_tv); } |
Будьте внимательны при приведении типов — если ошибетесь, то вылетит ClassCastException.
Вы, конечно же, заметили знакомый id — R.id.hello_tv, но, вероятно, недоумеваете — что это за «R.id.»? Без паники, мы обязательно рассмотрим класс R в следующем уроке, а пока вам нужно лишь знать, что это автоматически генерируемый класс для id и многих других ресурсов, чтобы мы могли работать с ними из Java-кода.
Задание обработчика OnClickListener
Мы научились «находить» нужные нам View. Давайте теперь найдем нашу кнопку:
MainActivity.java
| 1 2 3 4 5 6 7 8 | @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TextView helloTv = (TextView) findViewById(R.id.hello_tv); Button helloBtn = (Button) findViewById(R.id.hello_btn); } |
Как видите, процедура аналогична нашему предыдущему «поиску». А теперь поговорим о том, как назначить ей обработчик клика.
Первый способ — это использовать атрибут android:onClick в XML-разметке. Второй способ — задать обработчик из Java-кода. На нем мы как раз и остановимся.
У класса View и всех его подклассов есть метод setOnClickListener. В него передается инстанс интерфейса OnClickListener. Мы с вами уже создали такой, поэтому давайте назначим обработчик нашей кнопке:
MainActivity.java
| 1 2 3 4 5 6 7 8 9 10 | @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TextView helloTv = (TextView) findViewById(R.id.hello_tv); Button helloBtn = (Button) findViewById(R.id.hello_btn); helloBtn.setOnClickListener(onClickListener); // Обработчик } |
Есть еще один способ, более быстрый — с использованием анонимных классов:
MainActivity.java
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TextView helloTv = (TextView) findViewById(R.id.hello_tv); Button helloBtn = (Button) findViewById(R.id.hello_btn); helloBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { } }); } |
Но мы пока что остановимся на предыдущем способе.
Итак, мы создали обработчик и назначили его кнопке. Но при нажатии на нее по-прежнему ничего не происходит. Теперь нужно добавить в нее какой-то код.
Мы хотели изменить текст в TextView, однако, наш обработчик находится за пределами метода onCreate, и поэтому объект helloTv ему недоступен. Чтобы сделать TextViewдоступным из обработчика, нужно сделать его членом класса. Измените код Activity, чтобы он выглядел так:
MainActivity.java
| 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 32 | package ru.android_school.lesson5; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.TextView; public class MainActivity extends AppCompatActivity { private TextView helloTv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); helloTv = (TextView) findViewById(R.id.hello_tv); Button helloBtn = (Button) findViewById(R.id.hello_btn); helloBtn.setOnClickListener(onClickListener); } private final View.OnClickListener onClickListener = new View.OnClickListener() { @Override public void onClick(View v) { } }; } |
Отлично, теперь мы можем обращаться к helloTv в пределах всего кода внутри MainActivity.
Остался последний шаг — задать текст. Программно задать текст в TextView можно при помощи метода setText(). Давайте сделаем это:
MainActivity.java
| 1 2 3 4 5 6 | private final View.OnClickListener onClickListener = new View.OnClickListener() { @Override public void onClick(View v) { helloTv.setText("Hi!"); } }; |
Если теперь вы запустите приложение и нажмете на кнопку, текст волшебным образом изменится на «Hi!».
Дата добавления: 2019-01-14; просмотров: 167; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!