Используем элемент TextWatcher
Главная » Используем элемент TextWatcher

Если вы решите прилепить к своему приложению поле для ввода пароля, ну или просто интересуетесь, как они создаются, то этот урок для вас. Мы сделаем не простой ввод пароля, а такой, что при вводе символов в поле ввода, внизу будут высвечиваться уже введенные символы. Этот функционал реализуется с использованием штуки под названием TextWatcher. Использование TextWatcher довольно широко используется и сильно помогает пользователям при вводе паролей в каких либо программах, будь то архиватор документов, какой нибудь онлайн сервис или еще чего, где нужен ввод пароля. Ведь сразу видеть, что ты там вводишь дает возможность вводить пассы без ошибок, в то время когда отсутствие такой фичи может порядком подпортить нервы. Итак, за дело.

Создаем новый проект, выбираем Blank Activity, минимальную версию Android традиционно 2.2+. Использование TextWatcher на самом деле довольно простое и не требует много усилий. Создадим интерфейс нашего приложения. Оно будет состоять из поля для ввода пароля EditText и элемента TextView, в котором TextWatcher будет отображать вводимые символы пароля. Открываем файл activity_main.xml и добавляем туда упомянутые элементы:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical"
 android:padding="5dp">

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:paddingBottom="10dp"
 android:text="Введите пароль:"
 android:textAppearance="?android:attr/textAppearanceLarge"
 android:textStyle="bold" />

 <EditText
 android:id="@+id/password"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:hint="Пароль"
 android:inputType="textPassword"
 android:padding="15dp">
 <requestFocus />
 </EditText>

 <TextView
 android:id="@+id/watch_password"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_below="@+id/password"
 android:background="#228B22"
 android:padding="5dp"
 android:text="* Ничего не введено"
 android:textColor="#fff" />
</LinearLayout>

В результате у нашего приложения появился вот такой симпатичный вид:

Ввод пароля во всей красе

Теперь нужно в файле java класса реализовать задуманное соответствующим кодом. Реализация Text Watcher происходит довольно просто, благодаря своим 3 методам:

beforeTextChanged () - работает до изменений в тексте;

onTextChanged ()работает во время ввода текста;

afterTextChanged ()работает после ввода текста, уведомляет, что текст был изменен.

Простите за немного размытое описание методов, можете попытаться понять их лучше, почитав описание на developer.android.com. 

Переходим к работе в MainActivity.java. Добавляем в него следующий код:

import android.app.Activity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends Activity {

 private EditText mEditPass;
 private TextView mTextHint;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 //Инициализируем наши элементы:
 mEditPass = (EditText) findViewById(R.id.password);
 mTextHint = (TextView) findViewById(R.id.watch_password);
 mTextHint.setVisibility(View.GONE);

 //Настраиваем для поля ввода слушателя изменений в тексте TextChangedListener:
 mEditPass.addTextChangedListener(passwordWatcher);
 }
 //Создаем экземпляр TextWatcher:
 private final TextWatcher passwordWatcher = new TextWatcher() {
 public void beforeTextChanged(CharSequence s, int start, int count, int after) {
 }

 public void onTextChanged(CharSequence s, int start, int before, int count) {
 mTextHint.setVisibility(View.VISIBLE);
 }

 //Задаем действия для TextView после смены введенных в EditText символов:
 public void afterTextChanged(Editable s) {
 //Если длина введенного текста =0, то видимость TextView исчезает:
 if (s.length() == 0) {
 mTextHint.setVisibility(View.GONE);
 }
 //Иначе, настраиваем для TextView текст из символов, введенных в EditText:
 else{
 mTextHint.setText("Введены символы : " + mEditPass.getText());
 }
 }
 };
}

Как видите, все предельно просто. Мы настроили интерфейс выполнения Text Watcher, в котором методы beforeTextChanged () и onTextChanged () оставили пустыми, а в методе afterTextChanged (), определяющем события после ввода символов, настроили цикл, в котором с помощью оператора if настраиваем исчезание элемента с текстом пароля TextView, если длина введенного пароля равна 0 (то есть он не введен) и в случае если это не так (else), настраиваем элементу TextView значение текста с введенных в EditText символов пароля.

Запускаем приложение и смотрим на результат:

вот оно и заработало

Работает :).

Категория: Уроки программирования | Просмотров: 921 | Добавил: Oleg | Теги: TextWatcher, следим за вводом пароля, ввод пароля, Android программирование | Рейтинг: 0.0/0
Всего комментариев: 0
avatar