layouts & widgets sayan unankard 2 layouts...• padding: สำมำรถเพ ม...

www . i t s c i .m ju . ac . t h / sayan

LAYOUTS & WIDGETS SAYAN UNANKARD

2

SIZING AND POSITIONING

โปรแกรมเมอรก ำหนดต ำแหนงของแตละ component อยำงไร และ แตละ component ควรม

ขนำดเทำใด

• Absolute positioning (C++, C#, others): Programmer ก ำหนดต ำแหนงทแนนอนในรปแบบของ pixel coordinates ของแตละ component เชน ก ำหนดต ำแหนงของ button ณ ต ำแหนง x=15 y=75 และ ก ำหนดขนำดใหเปน 70x31 px

• Layout managers (Java, Android): Objects จะถกก ำหนดต ำแหนงแตละ component ขนอยกบกฏและเงอนไขทก ำหนด เชน ก ำหนด 4 buttons ไวใน 2x2 grid และ วำงต ำแหนง text boxes ในแนวนอน (horizontal) ดำนลำงของ app

More flexible and general; works better with a variety of devices.

2

VIEWGROUP AS LAYOUT

• ViewGroup superclass น ำเสนอ containers of views– layouts ถกก ำหนดในรปแบบของ XML และ Java code

– Android ม layout managers ทหลำกหลำย และ ผใชสำมำรถก ำหนด layouts ไดดวยตนเอง

– layouts สำมำรถซอนกนเพอใหเกดกำรรวมกนของคณสมบตอน ๆ

• ในภำษำ Java และ XML– Activity เปน ViewGroup

– Layout classes เปน ViewGroups

– widgets สำมำรถถกเพมเขำไปใน ViewGroup ซงจะสำมำรถจดกำร position/size behavior

3

XML, IN BRIEF

XML : a language for describing hierarchical text data. *

• ใช tags ซงประกอบไปดวย elements และ attributes โดยท tags สำมำรถอยซอนกนได

• บำง tags มลกษณะเปน opened and closed บำงอนเปนแบบ self-close<element attr="value" attr="value"> ... </element>

<element attr="value" attr="value" /> (self-closing)

ตวอยำง<course name="Mobile Programming" course id="IT411">

<instructor>Sayan Unankard</instructor>

<ta>none</ta>

</course>

4

XML is case-sensitive!

CHANGING LAYOUTS

• สำมำรถเปลยนไดท Text view ในสวนของ layout XML file

• แกไข opening/closing tags โดยเปลยนเปนชนด layout ใหมทตองกำร เชน LinearLayout

• กลบไปทสวนของ Design view แลวเพมเครองมอ widgets อน ๆ

5

LINEARLAYOUT

• จดวำง widgets/views ในลกษณะแถวเดยว (single line)

• กำรจดแบบแนวนอน horizontal (default) หรอแนวตง vertical

• items จะไมสำมำรถจดกำรไดหำกเกนขอบหนำจอ

6

horizontal

vertical

ตวอยาง LINEARLAYOUT (1)

7

<?xml version="1.0" encoding="utf-8"?>

<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: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.sayan.lec02.MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello World!" />

<Button



android:text="New Button"

android:id="@+id/button" />

<Button




android:id="@+id/button2" />

<Button





</LinearLayout>

ตวอยาง LINEARLAYOUT (2)

8




android:orientation="vertical"








<TextView




<Button





<Button





<Button





</LinearLayout>

GRAVITY

gravity: ทศทำงกำรจดต ำแหนงของเครองมอตำง ๆ บนหนำจอ• top, bottom, left, right, center

• ผสมหลำย ๆ ค ำสงดวยเครองหมำย “|”

• ก ำหนด gravity บน layout เพอก ำหนดทก ๆ widgets หรอ ก ำหนดเฉพำะ widget ได

9

ตวอยาง GRAVITY

10





android:gravity="center|right"








<TextView




<Button





<Button





<Button

android:layout_gravity="left"





</LinearLayout>

WEIGHT

weight: gives elements relative sizes by integers• widget ทม weight K จะไดขนำด K/จ านวน weight รวมทงหมด

11

<TextView

android:layout_weight="1"




<Button






<Button






<Button


android:layout_gravity="left"





1

1

1

3

WIDGET BOX MODEL

• content: ทก ๆ widget หรอ view มกำรก ำหนดขนำดทแนนอน (width x height)

• padding: สำมำรถเพม widget's size โดยกำรก ำหนด padding ลอมกรอบของ content ได

• border: อยถดออกไปจำก padding เปนตวก ำหนดเสนกรอบของ widget

• margin: เปนกำรก ำหนดระยะหำงระหวำง widget ทก ำหนดกบ widgets อน ๆ บนหนำจอ

12

SIZING AN INDIVIDUAL WIDGET

width และ height ของ widget สำมำรถก ำหนดไดดงน• wrap_content : ขนำดพอดกบ widget's content

• match_parent : กวำงหรอสง 100% ของหนำจอ หรอ layout

• ก ำหนดขนำดทแนนอน เชน 64dp (โดยปกต ไมแนะน ำใหใช เพรำะจะท ำใหหนำจอไมยดหยน ไมสำมำรถปรบขนำดเองไดอตโนมตเมอรนบนเครองทมขนำดหนำจอตำงกน)

dp = device pixels; dip = device-independent pixels; sp = scaling pixels

ตวอยำง

<Button ...


android:layout_height="wrap_content" />

13

PADDING

padding: extra space inside widget

• ระบ padding เพอก ำหนดขนำดของแตละดำน padding Top, Bottom, Left, Right

• โดยปกตจะก ำหนดคำเปน dp เชน 10dp (โดยบำง widgets มกำรก ำหนดคำ default ท

~16dp)<LinearLayout ...

android:orientation="vertical">

<Button ... android:text="NEW BUTTON"

android:padding="50dp" />

<Button ... android:text="NEW BUTTON" />


android:paddingLeft="30dp"

android:paddingBottom="40dp" />

</LinearLayout>

14

MARGIN

margin: extra space outside widget to separate it from others• ระบ layout_margin เพอก ำหนดระยะขอบของทกดำน layout_marginTop, Bottom,

Left, Right

• โดยปกตจะก ำหนดเปน dp เชน 10dp (คำ defaults จะระบใน res/values/dimens.xml)

<LinearLayout ...

android:orientation="vertical">


android:layout_margin="50dp" />

<Button ... android:text="NEW BUTTON" />


android:layout_marginLeft="30dp"

android:layout_marginTop="40dp" />

</LinearLayout>

15

GRIDLAYOUT

• จดรปแบบของ widgets/views ในลกษณะของ rows and columns

– orientation attribute ก ำหนดใหเปน row-major หรอ column-major order

– ถกพฒนำตงแตเวอรชน Android 4; แทนท TableLayout

• by default, rows และ columns มขนำดเทำกน

– แตละ widget จะถกวำงลงในต ำแหนงชอง grid ถดไปของ row/column index ถำไมมกำรก ำหนด layout_row และ layout_column attribute

ตวอยำง grid ขนำด 4 rows, 3 columns:

16

ตวอยาง GRIDLAYOUT (1)

17


<GridLayout …

android:rowCount="2"

android:columnCount="3"

tools:context="com.example.sayan.lec02.Main2Activity">

<Button

…

android:text="Button1"


<Button

…



<Button

…



<Button

…



<Button

…



</GridLayout>

ตวอยาง GRIDLAYOUT (2)

18


<GridLayout …

android:rowCount="2"

android:columnCount="3"



<Button

…



<Button

…



<Button

…



<Button

…



<Button

…

android:text="Button5“

android:layout_row="1"

android:layout_column="2"


</GridLayout>

NESTED LAYOUT

• วตถประสงคเพอสรำงหนำจอทมควำมซบซอนขน โดยใช nested layout

• layouts inside layouts

• Nested layout template

19

<OuterLayoutType ...>

<InnerLayoutType ...>

<Widget ... />

<Widget ... />

</InnerLayoutType>

<InnerLayoutType ...>

<Widget ... />

<Widget ... />

</InnerLayoutType>

<Widget ... />

<Widget ... />

</OuterLayoutType>

RELATIVELAYOUT

แตละต ำแหนงและขนำดของ widget มควำมสมพนธกบสวนอน ๆ• สมพนธกบ "parent" (the activity itself)

• สมพนธกบ widgets/views อน ๆ

• x-positions of reference: left, right, center

• y-positions of reference: top, bottom, center

• มวตถประสงคเพอลดควำมจ ำเปนในกำรใช nested layouts

20

RELATIVE ANCHOR POINTS

• properties ของ x/y ทมควำมสมพนธกบ widget อน ๆ

– layout_below, above, toLeftOf, toRightOf

– ระบ ID ของ widget อน ๆ ในรปแบบ ดงน "@id/theID"

• properties ของ x/y ทมควำมสมพนธกบ layout container (the activity)

– layout_alignParentTop, Bottom, Left, Right

ระบคำ boolean value เปน "true" ถำตองกำรใชงำน

– layout_centerHorizontal, Vertical, InParent

ระบคำ boolean value เปน "true" ถำตองกำรจดต ำแหนงตรงกลำง

21

ตวอยาง

22


<RelativeLayout …


<TextView

…

android:text="Large Text"

android:id="@+id/textView"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true" />

<Button

…


android:id="@+id/button6"

android:layout_below="@+id/textView"

android:layout_alignParentStart="true"

android:layout_marginTop="43dp" />

<Button

…



android:layout_alignTop="@+id/button6"

android:layout_alignStart="@+id/textView" />

<Button

…



android:layout_centerVertical="true"

android:layout_alignParentEnd="true" />

</RelativeLayout>

FRAMELAYOUT

ใชส ำหรบจดกำร widget เดยวภำยในเฟรม ซงครอบคลมทงหมดของ activity• ถกใชโดยทวไปกบ layout fragments

• ไมเหมำะกบ complex layouts

23

ANDROID WIDGETS

24

BUTTON

A clickable widget with a text label

key attributes:

น ำเสนอในรปแบบของ Button class ในภำษำ Java ดงนButton b = (Button) findViewById(R.id.theID);

25

Attributes ค าอธบาย

android:clickable="bool" ก ำหนดใหสำมำรถคลกปมได (true) หรอ ไมได (false)

android:id="@+id/theID" unique ID ส ำหรบใชใน Java code

android:onClick="function" function ทถกเรยกใชใน activity เมอมกำรคลกปมจะตองประกำศเปน public void และมรบคำพำรำมเตอร View arg

android:text="text" ขอควำมแสดงบนปม

IMAGEBUTTON

A clickable widget with an image label

key attributes:

กำรก ำหนด image resource• น ำภำพไปใวใน project folder app/src/main/res/drawable

• ตงชอ @drawable/imagename เพออำงไปยง imagename.png

• ใชชอไฟลอยำงงำยประกอบดวยตวอกษร และ ตวเลข26


android:clickable="bool" ก ำหนดใหสำมำรถคลกปมได (true) หรอ ไมได (false)


android:onClick="function" function ทถกเรยกใชใน activity เมอมกำรคลกปมจะตองประกำศเปน public void และมรบคำพำรำมเตอร View arg

android:src="@drawable/img" รปทตองกำรใหแสดงบนปม ซงจะตองสมพนธกบ image resource

IMAGEVIEW

Displays an image without being clickable

key attributes:

เมอตองกำรเปลยนภำพในภำษำ Java• เรยก ImageView โดยใชค ำสง findViewById

• เรยกเมธอด setImageResource แลวสง R.drawable.filename ทตองกำรเขำไปในเมธอด

27



android:src="@drawable/img" รปทตองกำรใหแสดงบนปม ซงจะตองสมพนธกบ image resource

EDITTEXT

An editable text input box

key attributes:

28


android:hint="text" ขอควำมสเทำ เพอแสดงตวอยำงใหผใชกรอกตำมรปแบบ แสดงกอนทผใชจะเรมกรอกขอมล


android:inputType="type" ชนดของขอควำมทตองกำรใหกรอก เชน number,phone,date,time,...

android:lines="int" จ ำนวนแถวทแสดงใหผใชกรอกขอมล

android:maxLines="int" จ ำนวนแถวสงสดทผใชสำมำรถกรอกได

android:text="text" ขอควำม default โดยปกตจะเปนชองวำง

android:textSize="size" ก ำหนดขนำดของ font เชน 10dp

CHECKBOX

An individual toggleable on/off switch

key attributes:

ในภำษำ Java สำมำรถเขยนไดดงนCheckBox cb = (CheckBox) findViewById(R.id.theID);cb.toggle(); cb.setChecked(true);cb.performClick();

29


android:checked="bool" ก ำหนดใหเลอก checkbox โดยใหคำเปน true


android:clickable="bool" ก ำหนดให disable checkbox โดยใหคำเปน false

android:onClick="function" function ทถกเรยกใชใน activity เมอมกำรคลกเลอก checkboxจะตองประกำศเปน public void และมรบคำพำรำมเตอร View arg

android:text="text" ขอควำมแสดงตอจำก checkbox

RADIOBUTTON

A toggleable on/off switch; part of a group

key attributes:

หำกตองกำรใหเลอกไดเพยงตวเลอกเดยว จ ำเปนตองวำง radiobuttons ซอนภำยใน RadioGrouptag ใน XML

30


android:checked="bool" ก ำหนดใหเลอก checkbox โดยใหคำเปน true


android:clickable="bool" ก ำหนดให disable radiobutton โดยใหคำเปน false

android:onClick="function" function ทถกเรยกใชใน activity เมอมกำรคลกเลอก radiobuttonจะตองประกำศเปน public void และมรบคำพำรำมเตอร View arg

android:text="text" ขอควำมแสดงตอจำก radiobutton

ตวอยาง RADIOBUTTON

<LinearLayout ...


android:gravity="center|top">

<RadioGroup ...

android:orientation="horizontal">

<RadioButton ... android:id="@+id/choice1"

android:text=“choice 1"

android:onClick="radioClick" />



android:checked="true"





</RadioGroup>

</LinearLayout>31

REUSING ONCLICK HANDLER

// in MainActivity.java

public class MainActivity extends Activity {

public void radioClick(View view) {

// check which radio button was clicked

if (view.getId() == R.id.choice1) {

// ...

} else if (view.getId() == R.id.choice2) {

// ...

} else {

// ...

}

}

}

32

SPINNER

A drop-down menu of selectable choices

key attributes:

จ ำเปนทจะตองจดกำร events ใน Java code• เรยกใช Spinner object โดยค ำสง findViewById• จำกนนเรยกใช setOnItemSelectedListener method

33



android:clickable="bool" ก ำหนดให disable spinner โดยใหคำเปน false

android:entries="@array/array" ก ำหนด options ทจะปรำกฎใน spinner ซงจะตองตรงกบ array ใน strings.xml

android:prompt="@string/text" title text เมอ dialog ของ choices แสดงขนมำ

STRING RESOURCES

ประกำศคำคงท strings และ arrays ใน res/values/strings.xml<resources>

<string name="name">value</string>

<string name="name">value</string>

<string-array name="arrayname">

<item>value</item>

<item>value</item>

<item>value</item> 

...

<item>value</item>

</string-array>

</resources>

กำรเรยกใชใน Java code• as a resource: R.string.name, R.array.name• as a string or array: getResources().getString(R.string.name),

getResources().getStringArray(R.array.name)34

ตวอยาง SPINNER

35


<RelativeLayout …


<TextView

…

android:text="@string/choose_lang"

android:id="@+id/textView2"/>

<Spinner

…

android:id="@+id/spinner"

android:entries="@array/langs"

android:prompt="@string/choose_lang"

android:layout_below="@+id/textView2"/>

</RelativeLayout>

ใน res/values/strings.xml<resources>

…

<string name="choose_lang">Choose a programming

language:</string>

<string-array name="langs">

<item>C</item>

<item>JAVA</item>

<item>HTML</item>

<item>SQL</item>

</string-array>

</resources>

SPINNER EVENT

// in MainActivity.java

public class MainActivity extends Activity {

...

@Override

protected void onCreate(Bundle savedInstanceState) {

…

Spinner spin = (Spinner) findViewById(R.id.spinner);

spin.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

public void onItemSelected(AdapterView<?> spin, View v, int i, long id) {

String result = spin.getSelectedItem();

}

public void onNothingSelected(AdapterView<?> parent) {} // empty

});

}

}

36

ตวอยาง SPINNER ดวย ARRAY

String[] language = {"ANDROID","C","JAVA"};

ArrayAdapter<String> adapter = new ArrayAdapter<String>(Main5Activity.this, android.R.layout.select_dialog_item, language);

Spinner sp = (Spinner) findViewById(R.id.spinner);sp.setAdapter(adapter);

37

layouts & widgets sayan unankard 2 layouts...• padding: สำมำรถเพ ม...

Documents