Первая страница
Наша команда
Контакты
О нас

    Головна сторінка



Методичні вказівки до лабораторних робіт з дисципліни: " Програмування мобільних пристроїв " для студентів напряму підготовки

Методичні вказівки до лабораторних робіт з дисципліни: " Програмування мобільних пристроїв " для студентів напряму підготовки




Сторінка3/5
Дата конвертації10.03.2017
Розмір0.65 Mb.
ТипМетодичні вказівки
1   2   3   4   5

Додаток 1
package com.example.projectn;
import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.widget.*;
public class MainActivity extends Activity {

TextView tvInfo;

EditText etInput;

Button bControl;

int guess;

boolean gameFinished;


@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

tvInfo = (TextView)findViewById(R.id.textView1);

etInput = (EditText)findViewById(R.id.editText1);

bControl = (Button)findViewById(R.id.button1);

guess = (int)(Math.random()*100);

gameFinished = false;

}
@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

public void onClick(View v){



if (!gameFinished){

int inp=Integer.parseInt(etInput.getText().toString());

if (inp > guess)

tvInfo.setText(getResources().getString(R.string.ahead));

if (inp < guess)

tvInfo.setText(getResources().getString(R.string.behind));

if (inp == guess)

{

tvInfo.setText(getResources().getString(R.string.hit));



bControl.setText(getResources().getString(R.string.play_more));

gameFinished = true;

}

}

else



{

guess = (int)(Math.random()*100);

bControl.setText(getResources().getString(R.string.input_value));

tvInfo.setText(getResources().getString(R.string.try_to_guess));

gameFinished = false;

}

etInput.setText("");



}

}
Лабораторна робота № 3


Мета лабораторної роботи :

Вивчення основ розробки інтерфейсів мобільних застосувань


Завдання лабораторної роботи :

- вивчити елементи інтерфейсу

- практичним шляхом навчитися розміщувати елементи і міняти їх властивості

- розробити прототип інтерфейсу власного застосування


3.1 Вступ

Лабораторна робота присвячена розробці інтерфейсів мобільних застосувань. Робота містить детальний опис побудови гармонійного зрозумілого призначеного для користувача інтерфейсу для головної активності додатка і опис основних елементів інтерфейсу. Лабораторна робота допоможе вибрати концепцію свого застосування і почати розробку його інтерфейсу.

Детальнішу інформацію про розробку інтерфейсів мобільних застосувань під Android можна дізнатися на сайті Design [Android Developers].
3.2 Створення прототипу інтерфейсу

Розглянемо приклад розробки інтерфейсу додатка, який шукає в мережі Інтернет зображення за запитом користувача, дозволяє оцінювати їх, завантажувати, і відвідувати інтернет-сторінки сайтів, на яких було знайдено зображення.

Конце́пція (лат. conceptio - розуміння) - система поглядів, те або інше розуміння явищ і процесів; єдиний, визначальний задум.
Інтерне́т (від англ. Internet), міжмере́жжя - всесвітня система взаємосполучених комп'ютерних мереж, що базуються на комплекті Інтернет-протоколів. Інтернет також називають мережею мереж. Інтернет складається з мільйонів локальних і глобальних приватних, публічних, академічних, ділових і урядових мереж, пов'язаних між собою з використанням різноманітних дротових, оптичних і бездротових технологій.

3.2.1 Створення заготівлі для додатка

Виглядати головне вікно буде приблизно так:



интерфейс главной активности

Рисунок 3.1. Інтерфейс головної активності


На нім є присутніми поле введення тексту для запиту користувача і кнопка, яка починає пошук зображень. Внизу екрану дві кнопки: "like" і "dislike", з їх допомогою користувач зможе оцінити зображення. Після того, як користувач зробить оцінку зображення, поточне зображення закривається і завантажується наступне.

Отже, розпочнемо із створення нового проекту. Назвемо його "RatingImages" ("Рейтинг зображень").

На цьому етапі вивчення програмування під Android не обов'язково міняти іконку запуску, але ця лабораторна робота спрямована на розробку дизайну інтерфейсу, і тому, приступимо.

Створіть іконку на свій смак.



создание иконки

Рисунок 3.2. Створення іконки


Після створення проекту відкрийте activity _ main.xml з каталогу res/layout/.

Коли ви відкриєте файл activity _ main.xml, ви побачите графічний редактор макету. Завдяки цьому редакторові створення інтерфейсів стало ще цікавіше, оскільки додати елемент на форму можна за допомогою перетягання мишею, до того ж, завдяки графічному редакторові, не обов'язково запускати емулятор, щоб побачити результат своїх праць.

Тепер клацніть по вкладці activity _ main.xml в нижній частині екрану. Відкрився XML- редактор коду. Цей спосіб редагування стандартний, але усі зміни, що вносяться в цей документ, можна так само відчути візуально, перейшовши на графічний редактор.

Станда́рт - нормативний документ, заснований на консенсусі, прийнятий визнаним органом, що встановлює для загального і неодноразового використання правила, настанови або характеристики щодо діяльності чи її результатів, та спрямований на досягнення оптимального ступеня впорядкованості в певній сфері.

Повернемося на вкладку з графічним редактором. По-перше, підготуємо документ до початку роботи, для цього видаліть .

Результат виглядає так:

проект, готовый к началу разработки

Рисунок 3.3. Проект, готовий до початку розробки


На робочій області екрану залишився один елемент. Це макет . У нім позиція дочірніх елементів може бути описана по відношенню один до одного або до батьківського. Детальніше про макети можна дізнатися тут: http://developer.android.com/

Два атрибути, ширину і висоту (android: layout _ width і android : layout _ height), потрібно для усіх елементів для того, щоб вказати їх розмір.

Оскільки - це корінь в макеті, то треба, щоб він заповнював усю область екрану. Це досягається за допомогою установки параметра "match _ parent" для ширини і висоти. Це значення вказує, що ширина і висота елементу дорівнюватиме ширині і висоті батьківського елемента.

проект, готовый к началу разработки

Рисунок 3.4. Властивості елементу


Як встановити це значення? Розбиратимемося.

Одноразовим клацанням лівою кнопкою миші по напису "Width" активуйте рядок з параметрами ширини :



свойства <relativelayout> элемента, выбран атрибут android:layout_width

Рисунок 3.5. Властивості елементу, вибраний атрибут android : layout _ width


Клацанням лівої кнопки миші по області «Width» викличте діалогове вікно, і подвійним клацанням зробіть вибір параметра :

свойства <relativelayout> элемента, выбран параметр

Рисунок 3.6. Властивості елементу, вибраний параметр "match _ parent"


Чи клацанням правої кнопки миші по у Outline:

контекстное меню <relativelayout> элемента

Рисунок 3.7. Контекстне меню елементу


При виконанні першого способу ви побачили ще два можливі параметри: "fill _ parent" і "wrap _ content".

Насправді, match _ parent = fill _ parent, але "fill _ parent" вважається застарілим, і до використання в нових проектах пропонується "match _ parent".

Параметр "wrap _ content" вказує, що представлення збільшуватиметься при необхідності, щоб підтримувати відповідність змісту екрану.
3.2.2 Додавання текстового поля

Спершу додайте елемент з горизонтальною орієнтацією в , і вкажіть для ширини і висоти параметр "wrap _ content".

Горизонталь, ізогіпса (англ. contour lines, horizontal, isohyps, нім. Höhenkurve f, Horizontale f; рос. горизонталь, изогипса; від дав.-гр. ισος - равний і дав.-гр. ὕψος - висота) - лінія на плані (карті), яка з'єднує точки земної поверхні з однаковою абсолютною висотою.
Тепер, для створення призначеного для користувача редагованого текстового поля, додайте елемент з параметром "wrap _ content" для ширини і висоти в .

Зараз повинно вийти приблизно наступне:

добавление текстового поля

Рисунок 3.8. Додавання текстового поля


Можливо, з'явився жовтий застережливий знак, але зараз це не важливо, з часом він зникне. Наявність таких попереджень ніяк не впливає на компілювання проекту.
Компілятор (англ. Compiler від англ. to compile - збирати в ціле) - комп'ютерна програма (або набір к. програм), що перетворює (компілює) вихідний код, написаний певною мовою програмування (мова джерела, англ. source language)

Тепер переходимо до налаштування доданих нами елементів.

Для багатьох елементів треба призначати id, він забезпечує унікальний ідентифікатор, який можна використати як посилання на об'єкт з коду вашого застосування для управління їм.

Відкриємо редактор коду XML- файлу і звернемо увагу на елемент



:

android: id="@ id/editText1"

android: layout _ width="wrap _ content"

android: layout _ height="wrap _ content">





Рядок з'являється додаванням елементу requestFocus (тека Advanced), і дозволяє встановити фокус на потрібному компоненті. Важливо використати цей елемент, коли у вас є, приміром, три текстові поля, і треба, щоб фокус був на другому з них.

При вказівці id, знак (@) потрібно у тому випадку, якщо ви маєте на увазі будь-який ресурс об'єкту з XML- файлу. За ним йдуть тип ресурсу (в даному випадку ID), коса риска (слеш) і ім'я ресурсу (editText1).

Скісна́ ри́ска (в інформатиці - слеш, від англ. (forward) slash, в номерах та індексах - дріб) - друкарський знак у вигляді тонкої прямої лінії, нахиленої вправо.

Знак плюс ( ) перед типом ресурсів потрібний тільки тоді, коли ви уперше визначаєте ідентифікатор ресурсу.

По суті, id, який створюється автоматично, вже унікальний, але розумніше перейменовувати id відповідно до призначення елементу.

Задамо id для текстового поля. Для цього прямо в коді рядок android : id="@ id/editText1" замінюваний на android: id="@ id/edit _ message", тиснемо CTRL S і відкриваємо графічний редактор. Якщо все добре, то у властивостях текстового поля в графі id буде наступне:



идентификатор текстового поля

Рисунок 3.9. Ідентифікатор текстового поля


Додамо в код ще два рядки:

android: ems="10" - задає відповідності для симетричного відображення шрифтів

android: hint="@string/edit _ message" - зміст тестового поля "за умовчанням", тобто доки користувач не почав вводити в поле текст.

Симетрíя (від грец. συμμετρεῖν - міряти разом) - властивість об'єкта відтворювати себе при певних змінах, перетвореннях чи трансформаціях, які називаються операціями симетрії. Розрізняють симетрію тіл, симетрію властивостей і симетрію відношень.
Замість того, щоб використати просто слово (наприклад android: hint="message"), що украй не зручно при зміні основної мови додатка, використовується посилання на значення, що зберігається у файлі strings.xml. Оскільки це відноситься до конкретного ресурсу (а не тільки до id), знак плюс не потрібний.

Проте, ми ще не визначили рядок ресурсів файлі strings.xml, і тому ви отримаєте наступне:



предупреждение: не найден ресурс, на который прописана ссылка

Рисунок 3.10. Попередження: не знайдений ресурс, на який прописано посилання


Для того, щоб посилання на ресурс почало працювати, треба цей ресурс створити.

Відкрийте файл res/values/strings.xml. Очевидно, що його теж можна редагувати двома способами: графічно і вручну.

Вибирайте той спосіб, який більше до душі.

редактирование файла ресурсов графическим способом; добавление нового ресурса

Рисунок 3.11. Редагування файлу ресурсів графічним способом; додавання нового ресурсу


редактирование файла ресурсов графическим способом; выбор типа ресурса, выбран тип string

Рисунок 3.12. Редагування файлу ресурсів графічним способом; вибір типу ресурсу, вибраний тип String


Заповнюємо поля "Ім'я" і "Значення" :

редактирование файла ресурсов графическим способом

Рисунок 3.13. Редагування файлу ресурсів графічним способом


Зберігаємо і милуємося результатом:

отображение текста

Рисунок 3.14. Відображення тексту "За умовчанням" в полі введення


Аналогічно створимо id для

android: id="@ id/linear1"

Збережіть зміни.
3.2.3 Додавання кнопки

Тепер додайте

1   2   3   4   5



  • Лабораторна робота № 3 Мета лабораторної роботи
  • 3.2 Створення прототипу інтерфейсу
  • 3.2.1 Створення заготівлі для додатка
  • 3.2.2 Додавання текстового поля
  • 3.2.5 Область перегляду зображень
  • 3.2.6 Кнопки "like" і "dislike"
  • 3.3 BuildingBlocks або елементи для побудови інтерфейсу
  • Виділення
  • Лабораторна робота № 4 Створення багатоекранного застосування