Програмуємо калькулятор на андроїд. Урок 1

Створюємо проект програми.

File -> New -> Android Application Project

Заповнюємо поля як на першому малюнку. Тут ми вказуємо назву програми, ім’я пакета і версію API для створення компіляції проекту. Додаток будемо створювати для Android версії не нижче ніж 4.0. Натискаємо Next. Залишаємо галочки Create Activity і Create project in workspace, інші прибираємо. Знову Next. Обираємо BlankActivity і двічі Next. Порожній проект створений. Його можна запустити в емуляторі і подивитися на “Hello world!”

Відкриваємо вкладку activity_main.xml. Це макет нашого першого Activity. На другому малюнку стрілками позначені: 1 – власне сам наш проект, 2 – графічне зображення макета і код макета в XML, 3 – зображення макета у вигляді дерева об’єктів.

Зараз в макеті тільки текстове поле “Hello world!”. Воно нам не потрібно – натискаємо на нього і видаляємо клавішею del.

Тепер потрібно розташувати текстове поле для відображення введених цифр або результатів і 16 кнопок (10 цифр, +, -, *, /, і С – для стирання результатів)

Для зручності розташування об’єктів поміщаємо в кореневий елемент вертикальний layout (перетягуємо з палітри на дерево елементів) і розтягуємо його на всю надану нам площу. Ось як це буде виглядати в XML:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    .............. 
    tools:context="ru.urok.super_calc.MainActivity" > 
    <LinearLayout  
      android:layout_width="match_parent"  - розтягуємо елемент на всю площу
      android:layout_height="match_parent" - батьківського лайауту
      android:orientation="vertical" > 
    </LinearLayout> 
 </RelativeLayout>

У вертикальних layout’ах елементи можуть розташовуватися тільки стовбцем зверху вниз, а в горизонтальних – в ряд зліва направо.

В вертикальний layout перетягуємо TextView і 4 горизонтальних layout’а. У кожен з горизонтальних layout’ов додаємо по 4 Button’a. TextView растянем по ширині екрану. У кожну кнопку додамо параметр weight = 1, що б вони були рівної ширини і заповнювали всю ширину екрану.

   <LinearLayout
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" >
      <Button
         android:id="@+id/button1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content" 
         android:layout_weight="1"
         android:text="Button" />

У всіх елементів є параметр id. Це ідентифікатор по якому в коді ми будемо знаходити елементи. Зараз вони нічого нам не говорять. Їм потрібно надати якісь тлумачні значення. Я назву кнопки btOne, btTwo … btZero, btPlus, btMinus, btMulti, btDiv, btEqual і btClear. Текстове поле – tvLCD.

У параметрі Text кожної кнопки потрібно написати текст який буде відображатися на кнопці, тобто цифри, знаки операцій і т.д.

Для TextView я додав задній фон, змінив шрифт тексту який буде відображатися і прибрав параметр text, щоб елемент був порожнім. В кінці документа наведено повний лістинг activity_main.xml. Його можна просто скопіювати в порожній макет і не гаяти час на усі дії, які я описував вище. Але коли ви будете робити свій проект все-таки доведеться попрацювати ручками.

Додаток можна знову запустити на емуляторі і потикати по недіючим кнопок.

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

Переходимо на вкладку MainActivity.java. Тут ми будемо писати код нашого застосування. Зараз у нас тут три методи – onCreate і два методи для роботи з меню. На даний момент нас цікавить onCreate. Він викликається системою при створенні активують. Рядок setContentView (R.layout.activity_main) вказує який макет відображати на екрані при створенні activity.

У цьому методі нам потрібно знайти всі об’єкти на макеті, які ми будемо використовувати в коді. Для цього нам потрібно їх спочатку оголосити, тобто повідомити activity, об’єкти якого типу ми будемо використовувати і дати їм імена. Робиться це перед методом onCreate таким чином:

Button btOne, btTwo, btThree, btFour, btFive;
Button btSix, btSeven, btEight, btNine, btZero;
Button btPlus, btMinus, btMulti, btDiv, btEqual, btClear;
TextView btLCD;

Оголошення об’єктів одного типу можна об’єднувати в один рядок, як у випадку з кнопками. Типи об’єктів (Button, TextView) підкреслені червоним, тому що activity ще не знає про ці об’єкти нічого. Класи цих об’єктів потрібно імпортувати в activity. Для цього поміщаємо курсор над підкресленим словом Button і, у вікні, вибираємо Import ‘Button’. В імпорті з’являється рядок import android.widget.Button. Те ж саме робимо з TextView.

Тепер потрібно зв’язати оголошені об’єкти з елементами на макеті. Робиться це в методі onCreate так:

btOne = (Button) findViewById (R.id.btOne);

Тобто об’єкт btOne пов’язуємо з елементом на макеті, що має id btOne. Виконуємо теж саме з кожним оголошеним об’єктом.

З кнопками і полем визначилися. Тепер потрібен обробник натискань на кнопки. Є кілька способів обробити натискання: призначити метод обробки натискання на елемент прямо в макеті, написати слухача кліків і приліпити його до кнопок або доручити обробляти натискання самому activity. За бажанням моєї лівої п’яти обираємо останній.

Повідомляємо активують, що воно буде обробляти кліки – для цього до оголошення класу дописуємо (підкреслено):

public class MainActivity extends Activity implements OnClickListener

Імпортуємо вже відомим нам способом OnClickListener. Потім наводимо курсор на підкреслену MainActivity і обираємо Add unimplement metods. У нас з’являється новий метод onClick. Йому на вхід передається об’єкт View, на який відбулося натискання. (Всі елементи інтерфейсу – кнопки, поля і т.п. – є дочірніми по відношенню до View)

Тепер потрібно повідомити кнопоки, хто буде обробляти їх кліки:

btOne.setOnClickListener (this);

this – в даному випадку це наше activity. Такий код пишемо для всіх кнопок.

На цьому перший урок закінчений, але щоб прийти до якогось логічного підсумку, в методі onClick напишемо код який виводить в текстове поле id натиснутої кнопки:

tvLCD.setText ( “Натиснута кнопка ” + v.getId());

Запускаємо на емуляторі, тикаємо по кнопках. Уже якийсь функціонал)))

Повний лістинг уроку нижче:

activity_main.xml 
  <RelativeLayout 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:paddingTop="@dimen/activity_vertical_margin"
      tools:context="ru.urok.super_calc.MainActivity" >
   <LinearLayout android:layout_width="match_parent"android:layout_height="match_parent"
      android:orientation="vertical" >
   <TextView android:id="@+id/tvLCD"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#bbffff"
      android:textSize="36sp" />  
  <LinearLayout android:layout_width="match_parent"
      android:layout_height="wrap_content" >  
  <Button android:id="@+id/btSeven"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1" 
      android:text="7" /> 
  <Button android:id="@+id/btEight"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="8"/>  
  <Button android:id="@+id/btNine"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="9" />   
  <Button android:id="@+id/btPlus"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="+" />   
  </LinearLayout>   
  <LinearLayout 
      android:layout_width="match_parent"
      android:layout_height="wrap_content" >
  <Button android:id="@+id/btFour"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="4" />  
  <Button android:id="@+id/btFive"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="5" />  
  <Button android:id="@+id/btSix"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="6" />   
  <Button android:id="@+id/btMinus"          
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="-" />   
  </LinearLayout>  
  <LinearLayout 
      android:layout_width="match_parent"
      android:layout_height="wrap_content" >  
  <Button android:id="@+id/btOne"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="1" />  
  <Button android:id="@+id/btTwo"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="2" /> 
  <Button android:id="@+id/btThree" 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="3" /> 
  <Button android:id="@+id/btMulti"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1
      android:text="*"/>  
  </LinearLayout>   
  <LinearLayout 
      android:layout_width="match_parent"
      android:layout_height="wrap_content" >  
 <Button 
      android:id="@+id/btZero"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1" 
      android:text="0" /> 
  <Button android:id="@+id/btClear"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="C" /> 
  <Button android:id="@+id/btEqual"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content
      android:layout_weight="1"
      android:text="=" />  
  <Button android:id="@+id/btDiv"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="/" />  
  </LinearLayout> 
  </LinearLayout> 
  </RelativeLayout>

MainActivity.java
package ru.urok.super_calc;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends Activity implements OnClickListener {
   Button btOne, btTwo, btThree, btFour, btFive;
   Button btSix, btSeven, btEight, btNine, btZero;
   Button btPlus, btMinus, btMulti, btDiv, btEqual, btClear;
   TextView tvLCD;

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

   btOne = (Button) findViewById(R.id.btOne);
   btTwo = (Button) findViewById(R.id.btTwo);
   btThree = (Button) findViewById(R.id.btThree);
   btFour = (Button) findViewById(R.id.btFour);
   btFive = (Button) findViewById(R.id.btFive);
   btSix = (Button) findViewById(R.id.btSix);
   btSeven = (Button) findViewById(R.id.btSeven);
   btEight = (Button) findViewById(R.id.btEight);
   btNine = (Button) findViewById(R.id.btNine);
   btZero = (Button) findViewById(R.id.btZero);
   btPlus = (Button) findViewById(R.id.btPlus);
   btMinus = (Button) findViewById(R.id.btMinus);
   btMulti = (Button) findViewById(R.id.btMulti);
   btDiv = (Button) findViewById(R.id.btDiv);
   btEqual = (Button) findViewById(R.id.btEqual);
   btClear = (Button) findViewById(R.id.btClear);
   tvLCD = (TextView) findViewById(R.id.tvLCD);

     btOne.setOnClickListener(this);
     btTwo.setOnClickListener(this);
     btThree.setOnClickListener(this);
     btFour.setOnClickListener(this);
     btFive.setOnClickListener(this);
     btSix.setOnClickListener(this);
     btSeven.setOnClickListener(this);
     btEight.setOnClickListener(this);
     btNine.setOnClickListener(this);
     btZero.setOnClickListener(this);
     btPlus.setOnClickListener(this);
     btMinus.setOnClickListener(this);
     btMulti.setOnClickListener(this);
     btDiv.setOnClickListener(this);
     btClear.setOnClickListener(this);
     btEqual.setOnClickListener(this);
}

@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;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
   int id = item.getItemId();
   if (id == R.id.action_settings) {
   return true;
   }
   return super.onOptionsItemSelected(item);
}

@Override
public void onClick(View v) {
   tvLCD.setText("Натиснута кнопка " + v.getId());
   }
}