Android Development 4: Android Layouts

person Myat Min Soefolder_openAndroid Developmentaccess_time May 21, 2016

Android Layouts

Android App မှာ Layout တွေကို xml နဲ့ရေးပါတယ်။ res >> layout folder ထဲမှာရှိပါတယ်။ အခုလောလောဆယ် activity_main.xml ကို run လိုက်ရင် မြင်ရတာပဲဖြစ်ပါတယ်။

Layout file မှာ ViewGroup နဲ့ View ဆိုပြီးနှစ်မျိုးရှိပါတယ်။ ViewGroup ရဲ့အဓိကလုပ်ဆောင်ချက်ကတော့ သူ့အထဲမှာ ပါတဲ့ child view တွေကိုနေရာချပေးတာပဲဖြစ်ပါတယ်။ View ဆိုတာကတော့ လက်တွေ့မြင်နေရတယ် စာတွေ၊ ခလုပ်တွေ၊ ပုံတွေပဲဖြစ်ပါတယ်။

Layout Manager ဆိုတာကတော့ View တွေကို ဘယ်လိုနေရာချမလဲဆိုတာဆုံးဖြတ်ပေးတာပဲဖြစ်ပါတယ်။ ViewGroup ရဲ့ subclass တစ်ခုပဲဖြစ်ပါတယ်။ အသုံးအများဆုံး Layout Manager ၄ ခုရှိပါတယ်။ LinearLayout, RelativeLayout, FrameLayout နဲ့ Grid Layout ပါ။

LinearLayout

LinearLayout ကတော့ သူ့အထဲမှာပါတဲ့ child view တွေကို တန်းစီးပြီးစီတာပဲဖြစ်ပါတယ်။ LinearLayout ကို အသုံးပြုပြီး childview တွေကို horizontal စီမလား vertical စီမလားဆိုတာ သတ်မှတ်ပေးလို့ရပါတယ်။ အခုပဲစမ်းကြည့်ရအောင် res > layout > activity_main.xml ကိုဖွင့်ပြီး အောက်က code တွေကို copy ကူးထည့်ပေးလိုက်ပါ။

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
</LinearLayout>

ဒါကို Run ကြည့်ပါ။ အောက်ကပုံအတိုင်းပေါ်နေပါလိမ့်မယ်။

4_01

ကျွန်တော်တို့ရေးခဲ့တဲ့ xml code တွေကို ပြန်ရှင်းပြပါမယ်။

xml ဆိုတာ extensible markup language ပါ။ HTML လိုမျိုး markup language တစ်ခုပဲဖြစ်ပါတယ်။ ဒီ xml မှာတော့ LinearLayout ဆိုတဲ့ tag တစ်ခုပါဝင်ပါတယ်။ LinearLayout tag ကြားထဲမှာတော့ TextView နဲ့ Button ဆိုတဲ့ tag နှစ်ခုပါဝင်ပါတယ်။ tag တစ်ခုခြင်းစီမှာ သူနဲ့ဆိုင်တဲ့ attribute တွေပါဝင်ပါတယ်။ android:layout_width နဲ့ android:layout_height ကတော့ ကိုယ့် view, viewgroup ရဲ့ အလျားအနံကိုသတ်မှတ်ပေးလိုက်တာပဲဖြစ်ပါတယ်။ LinearLayout အတွက် width နဲ့ height ကို match_parent ထားထားပါတယ်။ match_parent ဆိုတာကတော့ သူ့ parent viewgroup ရဲ့ width နဲ့ height ကိုအပြည့်ယူမယ်လို့ပြောလိုက်တာပါ။ LinearLayout မှာ Parent ViewGroup မရှိတော့တဲ့အတွက် device screen အပြည့်ကို width height ယူလိုက်ပါတယ်။ LinearLayout မှာနောက်ထပ် attribute တစ်ခုပါဝင်ပါသေးတယ်။ ဒါကတော့ android:orientation ဆိုတဲ့ attribute ပါ။ တန်ဖိုး (value) က vertical ဖြစ်တဲ့အတွက် သူ့အထဲမှာပါတဲ့ view တွေကို အပေါ်ကနေအောက်အထိ ဒေါင်လိုက်တန်းစီသွားပါတယ်။ ဒါကြောင့် TextView ပြီးမှ Button လာတာပဲဖြစ်ပါတယ်။

TextView နဲ့ Button မှာတော့ width နဲ့ height အတွက် wrap_content ဆိုတာကိုထားထားပါတယ်။ wrap_content ဆိုတာကတော့ ကိုယ့် view ရဲ့ ပမာဏအတိုင်း width နဲ့ height ကိုကွက်တိသတ်မှတ်လိုက်တာပဲဖြစ်ပါတယ်။ android:text ကတော့ ပေါ်မဲ့စာပဲဖြစ်ပါတယ်။ wrap_content ကိုအသုံးပြုထားတာကြောင့် Button မှာ android:text=“Hi” လို့ရေးလိုက်ရင် ခလုတ်ရဲ့ width တိုသွားမှာပဲဖြစ်ပါတယ်။

LinearLayout ထဲမှာ android:orientation=“horizontal” လို့ပြောင်းလိုက်ပါ။ run ကြည့်ပါ။ ဒါဆိုရင်တော့ အပေါ်အောက် မစီတော့ပဲ TextView နဲ့ Button ကို ဘယ် ညာ အလျားလိုက်စီသွားမှာပဲဖြစ်ပါတယ်။

ID

Android View တွေမှာ ID တစ်ခုစီရှိနိုင်ပါတယ်။ ID မရှိတဲ့ View တွေလဲပါဝင်နိုင်ပါတယ်။ Application ကို compile လုပ်တဲ့အခါ ID ကို int value တစ်ခုအဖြစ် သွားဆောက်လိုက်ပါတယ်။ ဒါပေမဲ့ ID ကိုသတ်မှတ်တဲ့အခါမှာတော့ android:id ဆိုတဲ့ attribute ကိုအသုံးပြုပြီးသတ်မှတ်ပါတယ်။ ID သတ်မှတ်တဲ့ syntax ကတော့အောက်ပါအတိုင်းပါ။

android:id=”@+id/text”

LinearLayout ထဲမှာပါဝင်တဲ့ TextView ကို text ဆိုတဲ့ id ပေးလိုက်တာပဲဖြစ်ပါတယ်။

RelativeLayout

RelativeLayout ကတော့ သူ့အထဲက child view တွေကို တစ်ခုနဲ့တစ်ခု ဘယ်သူက ဘယ်သူရဲ့ ညာဖက်မှာရှိမယ်၊ ဘယ်ဘက်မှာရှိမယ်၊ အလယ်တည့်တည့်မှာရှိမယ်စသဖြင့်ဆုံးဖြတ်ပေးတာဖြစ်ပါတယ်။ activity_main.xml ထဲက code တွေကို ဖျက်ပြီး အောက်က code တွေထည့် run ကြည့်ပါ။

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, I am a TextView" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text"
        android:text="Hello, I am a Button" />

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Hello, I am a CheckBox" />
</RelativeLayout>

အောက်ပုံအတိုင်း ပေါ်နေပါလိမ့်မယ်။

4_02

Button မှာ android:layout_below=”@+id/text” ဆိုတဲ့ attribute ပါဝင်တာကြောင့် text လို့ id ပေးထားတဲ့ textview ရဲ့အောက်မှာ button ကို နေရာချလိုက်တာပဲဖြစ်ပါတယ်။ CheckBox မှာ android:layout_centerHorizontal=”true” နဲ့ android:layout_centerVertical=”true” ဆိုတဲ့ attribute နှစ်ခုပါဝင်ပါတယ်။ ဒါကြောင့် parent layout ဖြစ်တဲ့ RelativeLayout ရဲ့ horizontal အလယ်တည့်တည့်နဲ့ vertical အလယ်တည့်တည့်ကို CheckBox ကိုနေရာချလိုက်တဲ့အတွက် screen ရဲ့အလယ်တည့်တည့်ကို ရောက်သွားတာပဲဖြစ်ပါတယ်။

FrameLayout

FrameLayout ဆိုတာကတော့ View တစ်ခုပေါ်မှာ နောက် View တစ်ခုထပ်ပြီးသုံးလိုတဲ့အခါမှာအသုံးပြုနိုင်ပါတယ်။ အရင်လိုပဲ activity_main.xml ထဲက code တွေကိုဖျက်ပြီး အောက်က code တွေထည့် run ကြည့်ပါ။

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:text="Hello"
        android:background="#4CAF50" />
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:text="World"
        android:background="#2196F3" />
</FrameLayout>

အောက်ပုံအတိုင်း ပေါ်နေပါလိမ့်မယ်။

4_03

GridLayout

GridLayout ကတော့ View တွေကို ဇယားကွက်အလိုက်နေရာချတာပဲဖြစ်ပါတယ်။ GridLayout မှာ row, column နဲ့ cell တွေပါဝင်ပါတယ်။ View တစ်ခုခြင်းစီအတွက် row ဘယ်နှစ်ခုယူမလဲ column ဘယ်နှစ်ခုယူမလဲဆိုတာ သတ်မှတ်ပေးလို့ရပါတယ်။ activity_main.xml ထဲမှာ အောက်က code တွေကိုထည့်ကြည့်ပါ။

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/GridLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    android:useDefaultMargins="true" >

    <TextView
        android:layout_column="0"
        android:layout_columnSpan="3"
        android:layout_gravity="center_horizontal"
        android:layout_row="0"
        android:text="User Credentials"
        android:textSize="32dip" />

    <TextView
        android:layout_column="0"
        android:layout_gravity="right"
        android:layout_row="1"
        android:text="User Name: " >
    </TextView>

    <EditText
        android:id="@+id/input1"
        android:layout_column="1"
        android:layout_columnSpan="2"
        android:layout_row="1"
        android:ems="10" />

    <TextView
        android:layout_column="0"
        android:layout_gravity="right"
        android:layout_row="2"
        android:text="Password: " >
    </TextView>

    <EditText
        android:id="@+id/input2"
        android:layout_column="1"
        android:layout_columnSpan="2"
        android:layout_row="2"
        android:inputType="textPassword"
        android:ems="8" />

    <Button
        android:id="@+id/button1"
        android:layout_column="2"
        android:layout_row="3"
        android:text="Login" />

</GridLayout>

ပထမဆုံး GridLayout မှာ android:columnCount=”4″ ဆိုပြီးတော့ Column ၄ ခုသတ်မှတ်ခဲ့ပါတယ်။ ပထမဆုံး user credentials ဆိုတဲ့ textview မှာတော့ android:layout_column=”0″ ဆိုပြီး ပထမဆုံး column နေရာကိုယူခဲ့ပါတယ်။ programming မှာ 0,1,2,3,4, … ဆိုပြီးစီလေ့ရှိတဲ့အတွက် 0 ဆိုတာ ပထမဆုံး column ကိုဆိုလိုတာပဖြစ်ပါတယ်။ android:layout_columnSpan=”3″ ကတော့ column ၃ ခုစာနေရာကိုပေါင်းယူမယ်လို့ဆိုလိုတာပဲဖြစ်ပါတယ်။ ဒါကြောင့် column သုံးခုစာနေရာယူပြီး android:layout_gravity=”center_horizontal” ဆိုတဲ့အတွက် နေရာယူလိုက်တဲ့ column ခုစာနေရာရဲ့ အလယ်မှာ TextView ကိုနေရာချလိုက်တာပဲဖြစ်ပါတယ်။ တစ်ခြား view တွေမှာလဲ သက်ဆိုင်ရာ column, row နေရာယူထားကြပါတယ်။ ထူးထူးခြားခြားအနေနဲ့ EditText နှစ်ခုပါဝင်ပါတယ်။ EditText ဆိုတာကတော့ စာရိုက်လို့ရတဲ့ textbox ဖြစ်ပါတယ်။ ပထမတစ်ခုက user name အတွက်ဖြစ်ပြီး ဒုတိယတစ်ခုမှာ android:inputType=”textPassword” လို့ပါဝင်တာကြောင့် ဒီ EditText မှာ စာရိုက်မယ်ဆိုရင် စာကိုမြင်ရမှာမဟုတ်ပဲ အလုံးလေးတွေပဲပေါ်နေမှာဖြစ်ပါတယ်။

Views

Android မှာ view တွေဆိုတာကတော့ UI Element တွေပါ။ နဂိုပါဝင်တဲ့ TextView, EditText, Button တွေအပြင် အခြား view ပေါင်းများစွာရှိပါသေးတယ်။ ဒါကြောင့် လက်ရှိအသုံးဝင်မဲ့ view အချို့ကို ဖော်ပြလိုက်ပါတယ်။

TextView

စာသားတွေကိုဖော်ပြတဲ့အခါမှာအသုံးပြုပါတယ်။

ImageView

ရုပ်ပုံတွေကိုဖော်ပြတဲ့အခါမှာအသုံးပြုပါတယ်။

Button

ခလုပ်တွေထည့်လိုတဲ့အခါမှာအသုံးပြုပါတယ်။

View

plain view ပါ။ ဘာမှမပါဝင်ပါဘူး။ နေရာအလွတ် ဒါမှမဟုတ် မျဉ်းတားလို့တဲ့အခါမျိုးမှာအသုံးပြုပါတယ်။

EditText

input လက်ခံဖို့အတွက် Textbox နေရာမှာအသုံးပြုပါတယ်။

Spinner

combo box ကနေ ရွေးချယ်စေလိုတဲ့အခါမျိုးမှာအသုံးပြုပါတယ်။

CheckBox

တစ်ခုဒါမှမဟုတ်တစ်ခုထက်ပို၍ရွေးချယ်စေလိုတဲ့အခါအသုံးပြုပါတယ်။

RadioButton

တစ်ခုထဲကိုရွေးချယ်စေလိုတဲ့အခါအသုံးပြုပါတယ်။

SeekBar

အတိုးအလျှော့လုပ်ရန်အသုံးပြုပါတယ်။ (ဥပမာ အသံ၊ brightness)

ProgressBar

Loading ပြတဲ့အခါ အသုံးပြုပါတယ်။ (ဥပမာ အင်တာနက် အဝိုင်းလည်)

ဒါဆိုရင်တော့ Android မှာ Layout ချတာကို အကြမ်းဖျဉ်းသိသွားပါပြီ။ ကျန်သေးတဲ့ layout တွေ view တွေ အကြောင်းကိုလဲ နောက်အခန်းတွေမှာ ဖော်ပြသွားမှာပဲဖြစ်ပါတယ်။ နောက်တစ်ခန်းမတက်ခင် ကိုယ်ကြိုက်တဲ့ UI (User Interface) တစ်ခုကို xml နဲ့ပေါ်အောင်ဆွဲကြည့်ပါ။ view တွေကိုစမ်းကြည့်ဖို့ အကြံပေးလိုပါတယ်။

Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>