Урок 4. Создание интерфейса для пересылки сообщений

Урок 4. Создание интерфейса для пересылки сообщений

Сообщение EgorovAD MEPhI » 19 мар 2014, 18:11

Для того, что бы пользователь мог с максимальным комфортом предавать команды необходимо разработать и создать пользовательский интерфейс. Для получения соответствующих навыков поставим следующую задачу:

Необходимо создать приложение, которое содержит несколько кнопок, каждая из которых имеет закрепленный за собой байт информации; При нажатии на любую из кнопок в текстовое поле под кнопками выводится байт, который закреплен за нажатой кнопкой.

Создадим новый проект в среде разработки eclipse. При этом, необходимо отметить пункт “Create Activity” при создании проекта и выбрать “BlinkActivity” в качестве базовой (рисунок 1.1). Название проекта может быть любым, однако в данном случае, было выбрано название “buttonSet”. Важно: в любом месте кода или интерфейса, где встречается название проекта в примерах будет указано “buttonSet”. В случае, если было выбрано другое название, то вместо “buttonSet” будет указано именно оно.

Изображение
Рисунок 1.1. Создание нового проекта.

Таким образом был создан проект с интерфейсом пользователя, который можно посмотреть в файле “buttonSet/res/layout/activity_main”. Пример интерфейса можно видеть на рисунке 1.2.
Изображение
Рисунок 1.2. Автоматически созданный интерфейс.

Сверху в тексте указывается название проекта, в данном случае это “Button Set”. Теперь необходимо разместить необходимые компоненты на интерфейсе. Нам необходимо разместить одну кнопку и одно поле типа “Text view”. Растяните их на всю ширину экрана. А “Text view” растяните по экрану вниз. Сразу после добавления элементов, рядом с ними появится маленький восклицательный знак. Его можно проигнорировать. Он означает, что то, что написано на элементах по умолчанию не вынесено в специальную часть проекта “buttonSet/res/values/strings.xml”, которая хранит все «строки» проекта (текстовые названия различных элементов).
Подключите через usb телефон на базе android к компьютеру, после чего нажмите кнопку “Run/buttonSet”. Программа автоматически установится на телефон. На экране будет виден заголовок с надписью “buttonSet” , сразу под ним кнопка, растянутая на весь экран по ширине. Под ней белое поле. На самом деле там расположен элемент “textView”, однако т.к. он может быть пустым, то его не видно на рисунке 1.3.
Изображение
Рисунок 1.3. Кнопка и текстовое поле, размещенные на форме интерфейса.

Теперь перейдем к написанию кода, который бы позволил реализовать необходимую функциональность. Для этого в первую очередь необходимо обеспечить необходимые импорты, а именно добавить к уже существующим нижеследующие:
Код: выделить все
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
import com.example.buttonset.R;

Особенно важным является последний импорт. Он позволяет нам использовать в коде ресурсы из папки “res” создаваемого проекта, а самое главное созданным интерфейсом. В данном случае com.example.buttonset – пространство имен проекта.
После этого необходимо обеспечить сохранение в глобальных переменных в рамках класса mainActivity необходимой информации о кнопках, текстовом поле. Для этого необходимо объявить переменные соответствующих типов: Button и TextView.

Код: выделить все
private Button mButton1;
   private TextView mTvStatus;


После этого, необходимо что бы в созданные переменные была помещена информация о сгенерированной кнопке и текстовом поле. Для этого необходимо дополнить метод onCreate, который вызывается при создании следующими строками:
Код: выделить все
mButton1 = (Button) findViewById(R.id.button1);
      mButton1.setTag(BUTTON1);
      
      mTvStatus = (TextView) findViewById(R.id.textView1);


Теперь необходимо добавить создаваемой кнопке функционал, который бы позволил реагировать на нажатие, а так же подписать кнопку. Для этого, во-первых создадим специальную переменную, которая будет хранить описание кнопки. В данном случае, описанием будет являться целочисленное значение «1»:
Код: выделить все
private static int BUTTON1 = 1;


После этого необходимо в методе onClick, после сохранения информации о кнопке в переменную дописать следующие команды:
Код: выделить все
mButton1.setOnClickListener(this);
      mButton1.setText(mButton1.getTag().toString());


Теперь, при тестировании можно увидеть, что на кнопке появилась надпись «1».
Теперь необходимо предусмотреть возможность изменения состояния интерфейса приложения по нажатию. Для этого необходимо модифицировать строчку:
Код: выделить все
public class MainActivity extends Activity


Необходимо добавить к ней в конец (но перед фигурной скобкой) implements OnClickListener, что бы подключить специальный интерфейс, который реализует обновление интерфейса по нажатию. Получится так:
Код: выделить все
public class MainActivity extends Activity implements OnClickListener


После этого, необходимо убрать предупреждение, которое указывает на отсутствие необходимых методов. Для этого, либо кликните на предупреждение и выберете необходимую опцию, либо создайте метод:
Код: выделить все
   @Override
   public void onClick(View v) {
      
   }


Теперь в созданный метод необходимо добавить следующий код:
Код: выделить все
      switch (v.getId()) {
      case R.id.button1:
         addStatusMsg("Button pressed: " + v.getTag());
         break;
      }


Кроме того, необходимо создать ещё один метод, ведь именно он использовался в onClick:
Код: выделить все
   private void addStatusMsg(String statusMsg) {
      mTvStatus.setText(statusMsg + "\n" + mTvStatus.getText().toString());
   }


Теперь, запустив программу, при нажатии на кнопку будет происходить отображение в текстовом поле следующей надписи: «Button pressed: 1». Ниже можете видеть целиком код приложения.
Код: выделить все
package com.example.buttonset;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
import com.example.buttonset.R;

public class MainActivity extends Activity implements OnClickListener {
   
   private static int BUTTON1 = 1;
   
   private Button mButton1;
   private TextView mTvStatus;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      
      mButton1 = (Button) findViewById(R.id.button1);
      mButton1.setTag(BUTTON1);
      mButton1.setOnClickListener(this);
      mButton1.setText(mButton1.getTag().toString());

      mTvStatus = (TextView) findViewById(R.id.textView1);
   }

   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
      // Inflate the menu; this adds items to the action bar if it is present.
      getMenuInflater().inflate(R.menu.activity_main, menu);
      return true;
   }

   @Override
   public void onClick(View v) {
      switch (v.getId()) {
      case R.id.button1:
         addStatusMsg("Button pressed: " + v.getTag());
         break;
      }

   }
   
   private void addStatusMsg(String statusMsg) {
      mTvStatus.setText(statusMsg + "\n" + mTvStatus.getText().toString());
   }

}


Задания
1) При многократном нажатии на кнопку, текст перестает отображаться в специальном поле. Дело в том, что получившееся поля не является прокручивающимся. Эту ситуацию необходимо поправить следующим образом: найдите элемент ScrolView, добавьте его на форму, а затем внутрь него поместите исходное текстовое поле.
2) Добавьте ещё несколько кнопок на форму. И допишите для них необходимый код, по аналогии с уже написанным. Каждая кнопка должна отображать уникальное значение при нажатии.
3) Сделайте код, который максимально соответствует принципам объектно-ориентированного программирования.
EgorovAD MEPhI
Администратор
 
Сообщений: 155
Зарегистрирован: 04 ноя 2011, 11:49

Вернуться в Задания и примеры

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 6

cron