Осымша интерфейсіні рылуы

 

 

Android шін олданушылы интерфейсі View жне ViewGroup объектілер иерархиясын олдану арылы рылады. View объектілер – ережеге байланысты батырмалар, мтіндік аладар сияты UI виджеттер, сонымен атар child-элементтерді алай олданылуын анытайтын крінбейтін контейнерлер болып табылады.

Android View, ViewGroup ішкі класстарына сйкес келетін XML-сздік сынады. Сондытан, біз олданушылы интерфейс элементтерін пайдалана отырып, XML файлда зімізді олданушылы интерфейсімізді ра аламыз[6,7].

Кодты орындамай, макетті олданушылы интерфейсін жариялауды бірнеше пайдалы жатары бар. Бл те ажетті жадай, себебі, біз р-трлі экран лшемдері шін р-трлі макеттер ра аламыз.

Android операциялы жйесіне арналан электронды ліппе осымшасы бес беттен трады. Негізгі менюде ліппені уйрену, сурет салу параы, ойын ойнау жне уен ойнау беттеріне сілтейтін батырмаларды круге болады.

осымша интерфейсін руда кездесетін барлы графикалы элементтер Adobe Photoshop графикалы редакторы кмегімен жасалан жне осымша бумасында – res/darwble ішінде саталады.

осымшада батырмалар ретінде ImageButton view-элементтері олданылан. р элементке сйкесінше фонды суретер таайындалан. ImageButton компонентіне фонды сурет ою шін біз компонентке тышанны о жа батырмасы басып, пайда болан менюден Edit Background жолын тадаймыз. рі арай res/darawble бумасында орналасан суреттер тізімі пайда болады. Сйкесінше бізге керекті суретті тадаймыз (10-сурет).

 

 

 

Сурет 11. View-элементке фонды сурет таайындау дісі

 

осымшаны райтын р беттер интерфейстері сйкесінше здеріне арналан XML файлдарда рылады:

1) Негізгі меню (сурет 12). Негізгі меню интерфейсі осымша ресурстары орналасатын res бумасындаы fragment_main.xml файлында рылады (res/layouts/fragment_main.xml). Бл activity-де RelativeLayout крінісі олданылады. RelativeLayout-та р элемент орны баса элеметтерге атысты аныталады.

Негізгі менюде, сонымен атар, осымшаны баса беттерін шаыруа арналан ImageButton view-элементтері орналасан. Негізгі менюде ліппені уйрену, сурет салу параы, ойын ойнау жне уен ойнау беттеріне сілтейтін батырмаларды круге болады. Екінші бет – ліппені йрену беті. Негізгі беттегі “ліппені йрену” батырмасын басу арылы ліппені йрену бетіне кшеміз. Бл бетте аза ліпбиіні ыры екі ріпі кесте трінде орналасан.

 

 

Слба 1

 

Android операциялы жйесіне арналан электронды ліппе

ліппені йрену Second_main.xml

Ойын ойнау

Сурет салу Paint.xml

уен ойнау Piano.xml

Негізгі меню Fragment_main.xml

 

р ріпті басу арылы басылан ріпті атауынан жне сол ріпке байланысты создерден тратын аудиожазбаны ести аламыз. шінші бет – сурет салу параы. Бл бетте блдіршін экрана саусапен жанасу арылы сурет сала алады. Тртінші бет – ойын ойнау беті.

 

 

Сурет 12. осымшаны негізгі менюі

2) ліппені йрену. Бл бет интерфейсі second_main.xml файлында рылады. Бл бетте белгілі ретпен орналасан аза ліпбиіні ыры екі рпін кре аламыз. р ріп ImageButton view-элементінен трады. Adobe Photoshop графикалы редакторы кмегімен алдын ала дайындалан, res/drawble бумасына орналасан, ріптер ретінде бейнеленген суреттер сйкесінше, р ImageButton компонентіні фонды суреті болып орнатылан.

ImageButton view-элементтер тобы RelativeLayout ішінде орналасандытан, р элементті орналасуы баса элементтерге атысты орнатылады. Мысалы:

<ImageButton

android:id="@+id/imageButton2"

android:layout_width="36dp"

android:layout_height="36dp"

android:layout_alignTop="@+id/imageButton1"

android:layout_toRightOf="@+id/imageButton1"

android:background="@drawable/a2"

android:src="@drawable/abc_ab_share_pack_holo_dark" />

 

Бл мысалда «ліппені йрену» бетіні бір элементіні баптаулары крсетілген. Оларды райсысына тоталса:

android:id”@+id/imageButton2” – бадарламалау кезінде компонентке атынау ммкіндігін беретін, компонентке берілетін зіндік ID.

android:layout_width=”36dp”, android:layout_height=”36dp” – экран элементіні зындыы мен енін орнатуа арналан тэг. Бізді мысала сйкес элементті зындыы мен ені 36dp-а те. Dp (Density-independent Pixels) – р трлі экран лшемдерінде бірдей трде крсетілуге ммкіндік беретін лшем бірлік болып табылады.

android:layout_alignTop=”@id+imageButton1” – imageButton2 элементіні жоары блігін imageButton1 элементіні жоары жаымен тзейді.

android:layout_toRightOf=”@id+imageButton1” – imageButton2 элементі imageButton1 элементіні о жаында орналастырады.

android:background=”@drawble/a2” – a2.png графикалы файлын imageButton2 элементіні фонды суреті ретінде орнатады.

android:src="@drawable/abc_ab_share_pack_holo_dark" – imageButton2 элементіне тссіз иконка таайындайды.

3) уен ойнау. уен ойнау беті пианино батырмалары тріндегі ImageButton компоненттерінен трады. Бл бет интерфейсі piano.xml файлында рылады. р ImageButton компонентіне пианино батырмалары тріндегі фонды суреттер таайындалан. Барлы батырмалар Relative Layout ішінде орналасан. уен ойнау бетіні интерфейсіні рылу келесідей болады (сурет 13):

 

<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:background="@drawable/background"

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="com.example.alippe.MainActivity$PlaceholderFragment" >

 

р ImageButton шін сйкесінше келесідей баптаулар олданылады:

 

<ImageButton

android:id="@+id/imageButton1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_centerVertical="true"

android:layout_marginLeft="58dp"

android:background="@drawable/key1"

android:src="@drawable/abc_ab_share_pack_holo_dark" />

 

Экран элементтеріні баптауларын орната келе 12-суретте крсетілген осымша интерфейсін аламыз.

 

 

Сурет 13. уен ойнау бетіні интерфейсі

 

4) Сурет салу. Сурет салу беті paint.xml файланда жзеге асырылады. Бл бетте сауса пен экранны зара арым-атынасы арылы із алдыру функциясы арастырылан. олданушыда тстер палитрасында тс тадау, аламны лшемін згерту, жаа сурет салу жне оны сатау, салынан суретті шіру ммкіндіктері бар.

Сурет салу беті интерфейсін рмастан брын, жмыс барысында олданылатын кейбір цифрларды анытауымыз керек. “Res/values” бумасында орналасатын “dimens.xml” файлына мынадай мндер енгіземіз:

 

<!-- Brush sizes -->

<dimen name="small_brush">10dp</dimen>

<integer name="small_size">10</integer>

<dimen name="medium_brush">20dp</dimen>

<integer name="medium_size">20</integer>

<dimen name="large_brush">30dp</dimen>

<integer name="large_size">30</integer>

 

Салынан сурет орнын анытайтын арнайы класс рылады. осымшаны шыыс кодтары орналасатын пакетте “DrawingView” классын рамыз. Бл класс мынадай трде болады:

 

public class DrawingView extends View

{

 

}

 

Класса конструктор дісін осамыз:

public DrawingView(Context context, AttributeSet attrs){

super(context, attrs);

setupDrawing();

}

 

XML макет файлына олданушылы крінісі экземплярын осамыз. Класса крсетілген комекші дісті осу:

 

private void setupDrawing(){

 

}

 

осымшаны жолды тратылары саталатын XML файлына (res/values/strings.xml) мынадай жолдар енгіземіз:

 

<string name="start_new">New</string>

<string name="brush">Brush</string>

<string name="erase">Erase</string>

<string name="save">Save</string>

<string name="paint">Paint</string>

 

Сурет салу бетіні интерфейсін ратын “pain.xml” файлы рамын мындай турге келіреміз:

 

<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:background="#FFCCCCCC"

android:orientation="vertical"

tools:context=".MainActivity" >

 

</LinearLayout>

 

Негізгі Linear Layout ішіне мынадай батырмалар енгіземіз:

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="50dp"

android:layout_gravity="center"

android:orientation="horizontal" >

</LinearLayout>

 

Бл Layout ішінде алам, сатау батырмасы, шіргіш батырмасы, жаа сурет батырмасы рылады. Бл батырмалар шін келесі суреттер олданылады:

- жаа сурет батырмасы;

- алам;

- шіргіш;

- сатау батырмасы.

 

р ImageButton элементін р айсысыны зіне тн баптауларын ішкі Linear Layout ішіне орналастырамыз. Келесі жазбада «жаа сурет» батырмасыны рылуы крсетілген:

 

<ImageButton

android:id="@+id/new_btn"

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:contentDescription="@string/start_new"

android:src="@drawable/new_pic" />

 

Негізгі Linear Layout ішінде біз ран крінс классы экземплярын осамыз:

 

<com.example.drawingfun.DrawingView

android:id="@+id/drawing"

android:layout_width="fill_parent"

android:layout_height="0dp"

android:layout_marginBottom="3dp"

android:layout_marginLeft="5dp"

android:layout_marginRight="5dp"

android:layout_marginTop="3dp"

android:layout_weight="1"

android:background="#FFFFFFFF" />

 

Осындай діспен «сурет салу» бетіні негізгі асиеттері таайындалды, сурет салуа ажетті а фон жне Java-мен арым атынас орнатуа арналан идентификаторы енгізілді.

Тстер палитрасын ру шін біз негізгі Linear layout ішінде таы бір Linear Layout осамыз. Бл элемент екі батырмалар атарынан трады. Жаа рылан макет ішіне келесідей жолдар енгіземіз:

 

<!-- Top Row -->

<LinearLayout

android:id="@+id/paint_colors"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal" >

</LinearLayout>

<!-- Bottom Row -->

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal" >

</LinearLayout>

 

Бірінші жол рамында идентификатор орналасан, себебі оны біз Java-да олданамыз, яни, осымша осыланда бірінші тсті абылдау жне бірден сурет салуа кірісе аламыз. р тс шін келесідей ImageButton рылымын олданамыз:

 

<ImageButton

android:layout_width="@dimen/large_brush"

android:layout_height="@dimen/large_brush"

android:layout_margin="2dp"

android:background="#FF660000"

android:contentDescription="@string/paint"

android:onClick="paintClicked"

android:src="@drawable/paint"

android:tag="#FF660000" />

 

Жоарыда істелген жмыс нтижесінде біз мынадай сурет салу интерфейсіне (сурет 14) ие боламыз:

 

 

Сурет 14. Сурет салу бетіні интерфейсі