1. Андройд – User Interface
МБДС-МТТ

2. User Interface
• User interface нь шаталсан хэлбэртэй view-
үүдээс тогтдог. View бүр тодорхой 2
хэмжээст орон зайг эзэлж орших ба
хэрэглэгчийн хийсэн үйлдэлд хариу үзүүлэх
чадвартай байна.
• Андройд нь олон тооны бэлэн view-үүдээр
хөгжүүлэгчидийг хангасан. Эдгээрийг
widgets гэж нэрлэдэг.

3. User Interface
• Layouts нь ViewGroup-с удамших ба өөрийн
хүүхэд View-үүдэд тодорхой загварыг зааж
өгнө.
• Хөгжүүлэгч нь View болон ViewGroup-ээс
удамшуулж өөрсдийн гэсэн widgets-ийг
үүсгэх боломжтой. Хэрэглэгчийн харагдах
хэсгийг үүсгэх хамгийн өргөн хэрэглэгддэг
арга бол Resource дотор XML үүсгэж
түүнийгээ source кодтой холбох арга юм.

4. User Interface
• Ингэснээр UI-ийг эх кодоос тусад нь
өөрчилж эх код дотор activity-ийн ажиллах
байдлыг тодорхойлж өгөх боломжтой.

5. • ViewGroup үүсгэж түүн дотор View-үүд
нэмж хийж өгч түүнийг мөн эх кодтой
холбож болно.
• setContentView() функцийн тусламжтай
холболтыг хийнэ.
User Interface

6. XML гэж юу вэ?
• XML - eXtensible Markup Language.
• XML нь өгөгдөл хадгалах болон
дамжуулахад зориулагддаг.
• XML бол HTML-тэй төстэй тэмдгэлгээт хэл
юм.
• XML – д тогтсон тааг байхгүй ба бүх
таагийг хэрэглэгч өөрөө тодорхойлдог

7. Layout-ууд
Layout нь UI үүсгэх үндсэн дэлгэцийн зохиом гаргахад
зориулагдсан widget юм. Дараах 7 төрлийн layout
байдаг. Хамгийн нийтлэг хэрэглэгддэг layout нь Linear
болон Relative layout юм.
1. Linear Layout
2. Relative Layout
3. Table Layout
4. Absolute Layout
5. Frame Layout
6. List View
7. Grid View

8. Аттрибут Тодорхойлолт
android:id ID оноох.
android:layout_width Layout-н өргөн.
android:layout_height Layout-н өндөр.
android:layout_marginTop Layout-н дээд хэсгээс зай авах (marginTop)
android:layout_marginBottom Layout-н доод хэсгээс зай авах (marginButton)
android:layout_marginLeft Layout-н зүүн хэсгээс зай авах (marginLeft)
android:layout_marginRight Layout-н баруун хэсгээс зай авах (marginRight)
android:gravity Child View – н байрлалыг заана.
android:layout_x Layout-д Х кординат оноох.
android:layout_y Layout-д у кординат оноох.
android:paddingLeft
Padding – Layout-д дүүргэлтийн зай оноох.
paddingLeft – Зүүн талаас зай авна.
android:paddingRight Баруун талаас зай авна.
android:paddingTop Дээд талаас зай авна.
android:paddingBottom Доод талаас зай авна.

9. Хэмжээсүүд
• px Pixel – Хэмжээсийг бодит пикселээр харуулна.
• in Inches – Хэмжээсийг дэлгэцийн бодит
хэмжээгээр(инч) авна.
• mm Millimeters - Хэмжээсийг дэлгэцийн бодит
хэмжээгээр(милметр) авна.
• pt Points – Хэмжээсийг дэлгэцийн бодит
хэмжээгээр(поинт) авна. 1инч/72 = 1pt
• dp Density-independent Pixels – Дэлгэцийн нягтрал.
• sp Scale-independent Pixels – Дэлгэцийн хэмжээс.

10. ID
Андройдын widget(layout, button, textview г.м)
бүрд тусгайлан ID оноож өгч болдог. ID
оноохдоо: android:id="@+id/txt1"
@ тэмдэг нь тухайн ID-аар өргөтгөх
боломжтой нөөц гэдгийг тодорхойлно
+ тэмдэг нь шинээр ID тодорхойлж буйг
илтгэнэ.
TextView mytxt = (TextView)
findViewById(R.id.txt1);

11. Linear Layout
Linear layout нь босоо эсвэл хэвтээ чиглэлд child
view-үүдээ харуулдаг.
android:id – Тухайн layout-д ID оноох
android:baselineAligned – Үнэн эсвэл худал утга
авна. Child view-үүдийг нэг талд нь зэрэгцүүлэх
эсэхийг заана.
android:gravity – Child view-үүдийн байрлалыг
заана. Top, left, center гэх мэт
android:orientation – layout-н босоо эсвэл хэвтээг
заана.

13. Linear Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical“
android:gravity="center"
android:background="#82CFFF">
<Button android:id="@+id/connect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/connect"
android:gravity="center"/>
<Button android:id="@+id/btnclear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/clear"
android:gravity="center"/>
</LinearLayout>
Vertical
Horizontal

14. Relative Layout
Relative layout нь доторх child view-үүд
харилцан бие биенээсээ хамаарч байрладаг.
View тус бүрт parent, child-н хамаарлыг зааж
өгч болно.
android:id – Тухайн layout-д ID оноох
android:gravity – Child view-үүдийн байрлалыг
заана. Top, left, center гэх мэт

15. Relative Layout
Аттрибут Тодорхойлолт
android:layout_above/below Тухайн View нь аль view-н доор/дээр
байхыг заана. Ихэвчлэн ID –р зааж өгнө.
"@[+][package:]type:name"
android:layout_alignBottom
android:layout_alignLeft
android:layout_alignRight
android:layout_alignStart
android:layout_alignTop
android:layout_alignParentBottom
android:layout_alignParentEnd
android:layout_alignParentLeft
android:layout_alignParentRight
android:layout_alignParentStart
android:layout_alignParentTop
Тухайн View-н layout зэрэгцүүлэлтийг заана.
Ж/нь: android:layout_alignLeft=“@+id/txt1"
Үнэн/Худал утга авна. Хэрэв true утга авбал
эцэг view-н зааж өгсөн хэсэгт child view-
үүдийг зэрэгцүүлэлт хийнэ.

16. Relative Layout
Аттрибут Тодорхойлолт
android:layout_centerHorizontal Үнэн/Худал утга авна. Хэрэв Үнэн бол child
view-г хэвтээ тэнхлэгийн дагуу голлуулна.
android:layout_centerInParent Хэрэв үнэн бол Child –уудыг хэвтээ, босоо
тэнхлэгийн дагуу голлуулна.
android:layout_centerVertical Үнэн/Худал утга авна. Хэрэв Үнэн бол child
view-г босоо тэнхлэгийн дагуу голлуулна.
android:layout_toEndOf Энэ нь тухайн view –н эхлэх ирмэгийг заана.
Ө.х. Энд зааж өгсөн ID –тай view –н ард||
зүүн || баруун ||эхлэлд тухайн view
байрлана.
android:layout_toLeftOf
android:layout_toRightOf
android:layout_toStartOf

17. RL Жишээ:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk
/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="16dp"
android:paddingTop="10dp"
android:paddingRight="16dp" >
<EditText
android:id="@+id/name"
android:layout_width="fill_parent"
android:background="#33FF33"
android:layout_height="35dp"
android:hint="Enter any text" />
<TextView
android:id="@+id/dates"
android:text="TextView"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="@+id/times" />
android:layout_toLeftOf="@+id/times" />
<TextView
android:id="@id/times"
android:layout_width="wrap_content"
android:text="TextView"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentRight="true"
/>
<Button
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_below="@id/times"
android:layout_centerInParent="true"
android:text="Click" />
</RelativeLayout>

19. Table Layout
Андройд table layout нь view-үүдийг мөр багана байдлаар
зохион байгуулдаг. Ө.х хүснэгт байдалтай зохион байгуулна.
Хүснэгтийн мөрийг <TableRow> гэсэн элементээр зурна.
Аттрибут Тодорхойлолт
android:id Layout ID
android:collapseColu
mns
Индексд суурилсан баганын эвхэгдэлтийг заана.
@[package:]type:name
android:shrinkColum
ns
Баганын агшилт
@[package:]type:name
android:stretchColu
mns
Баганын суналт
@[package:]type:name

21. Жишээ:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:shrinkColumns="*" android:stretchColumns="*"
android:background="#ffffff">
<!-- 1-р мөр 1 баганатай -->
<TableRow
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text="Мөр 1 Багана 1"
android:layout_span="4"
android:padding="10dp"
android:background="#CBFC60"/>
</TableRow>

22. Жишээ: үргэлжлэл
<!-- 2-р мөр 3 баганатай -->
<TableRow
android:id="@+id/tableRow1"
android:layout_height="wrap_c
ontent"
android:layout_width="match_p
arent">
<TextView
android:id="@+id/TextView04"
android:text="Мөр 2 Багана 1"
android:layout_weight="1"
android:background="#97F0AC"
android:padding="20dip"
android:gravity="center"/>
<TextView
android:id="@+id/TextView04"
android:text="Мөр 2 Багана 2"
android:layout_weight="1"
android:background="#2BF059"
android:padding="20dip"
android:gravity="center"/>
<TextView
android:id="@+id/TextView04"
android:text="Мөр 2 Багана 3"
android:layout_weight="1"
android:background="#00A125"
android:padding="20dip"
android:gravity="center"/>
</TableRow>

24. Absolute Layout
• Энэ layout нь child view-үүдийн байрлалыг
x,y координатын дагуу зааж өгдөг.
Аттрибут Тодорхойлолт
android:id ID
android:layout_x X координатын утга
android:layout_y У координатын утга

25. Frame Layout
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:src="@drawable/ic_launcher"
android:scaleType="fitCenter"
android:layout_height="250px"
android:layout_width="250px"/>
<TextView
android:text="Frame Layout"
android:textSize="30px"
android:textStyle="bold"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>