6 WHY DYNAMIC UI ** app - PowerPoint PPT Presentation

www.itsci.mju.ac.th/sayan DYNAMIC USER INTERFACE SAYAN UNANKARD 6

WHY DYNAMIC UI • ในกรณีที่ต*องการให* app สามารถที่จะสร*าง User interface แบบ Dynamic ได* จำเปJนต*อง ใช*ชุดคำสั่งภาษาจาวา ในการสร*าง • ในแตRละ UI widget ใน xml จะมีคลาสที่สอดคล*องในภาษาจาวา โดยสามารถสร*าง UI widget ได*ดังนี้ WidgetType name = new WidgetType(this); เชRน TextView txtname = new TextView(this); 2

การเพิ่ม UI เข<าไปใน LAYOUT ในการเพิ่ม UI เข*าไปบนหน*าจอ app จะสามารถเพิ่มเข*าไปผRาน onscreen container (ViewGroup) เชRน layout • จำเปJนต*องกำหนด id ให*กับ ViewGroup ในไฟลn .xml < LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/mainlayout" android:orientation="vertical" > </ LinearLayout > • เพิ่ม widget ลงไปใน container ด*วยเมธอด AddView() LinearLayout r = (LinearLayout) findViewById(R.id. mainlayout ); for ( int i = 0; i< 5; i++) { EditText t1 = new EditText( this ); t1.setText( "test " + i); r.addView(t1); } 3

VIEWGROUP METHOD addView(view) เพิ่ม view ลงไปใน layout addView(view, index) addView(view, params) bringChildToFront(view) ย*าย view ไปที่ตำแหนRงบนสุด getChildAt(index) คืนคRา view ณ ตำแหนRง index ที่ระบุ getChildCount() คืนคRาจำนวน child views removeAllViews() ลบ views ทั้งหมด removeView(view) ลบ view ที่ระบุ removeViewAt(index) ลบ view ณ ตำแหนRง index ที่ระบุ 4

การอGานคGาจาก DYNAMIC UI กรณีที่ต*องการอRานคRาจาก Dynamic UI ที่สร*างขึ้น เชRน ต*องการอRานคRาจาก EditText ที่วน loop สร*างขึ้นนั้น จะใช*คำสั่งดังนี้ public void onBtnOkClick(View view) { LinearLayout r = (LinearLayout) findViewById(R.id. mainlayout ); for ( int i = 0; i< r.getChildCount(); i++){ EditText t = (EditText) r.getChildAt(i); Toast. makeText (Main2Activity. this , "t" + i + " = " + t.getText().toString(), Toast. LENGTH_SHORT ).show(); } } r.getChildCount() ใช*สำหรับนับจำนวน EditText ที่ถูกสร*างขึ้น r.getChildAt(i) ใช*สำหรับ get คRา EditText ที่ตำแหนRงที่ i 5

LAYOUT INFLATER Layout inflater เปJนการแปลง layout.xml ให*เปJน Java widget object Layout Layout.xml Java widget objects inflater < LinearLayout <ImageView ... /> <TextView ... /> </ LinearLayout > 6

ตัวอยGางการสร<าง LAYOUT TEMPLATE <? xml version="1.0" encoding="utf-8" ?> < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" > < ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/img_sweet" android:layout_gravity="center_horizontal" android:src="@drawable/chocolate_cake" /> < TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="chocolate cake" android:id="@+id/txt_name" sweets_layout.xml android:layout_gravity="center_horizontal" android:textSize="16dp" /> < CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/chb_sweet" android:layout_gravity="center_horizontal" /> </ LinearLayout > 7

ตัวอยGาง DYNAMIC LAYOUT ในหน*า MainActivity กำหนดเฉพาะ GroupView ที่ต*องการให* Layout template ที่สร*างไว* แสดงผล เชRน GridLayout <? xml version="1.0" encoding="utf-8" ?> < 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="com.example.sayan.lec6.MainActivity" > < GridLayout android:columnCount="1" สร*าง layout ที่ต*องการ android:layout_width="match_parent" สร*างให*เปJน template android:layout_height="match_parent" android:id="@+id/mainlayout" > </ GridLayout > </ RelativeLayout > 8

ตัวอยGาง DYNAMIC LAYOUT private static int [] sweets = {R.drawable. chocolate_cake , R.drawable. cream_cake , R.drawable. muffin , R.drawable. tart , R.drawable. tartlet }; GridLayout r = (GridLayout) findViewById(R.id. mainlayout ); for ( int i = 0; i< sweets . length ; i++) { กำหนด layout ที่ต*องการ View sweet = getLayoutInflater().inflate( สร*างเปJน template R.layout. sweets_layout , null ); ImageView img = (ImageView) เปลี่ยนรูปภาพตาม array sweet.findViewById(R.id. img_sweet ); img.setImageResource( sweets [i]); TextView txt = (TextView) sweet.findViewById(R.id. txt_name ); txt.setText( sweets [i]); String str = txt.getText().toString(); txt.setText(str.substring(str.lastIndexOf( "/" )+1,str.indexOf( "." ))); r.addView(sweet); เปลี่ยนข*อความใต*ภาพให* เพิ่ม template ลงไปใน เปJนชื่อไฟลn } layout 9

ตัวอยGาง DYNAMIC LAYOUT กรณีที่ข*อมูลที่ต*องการนำเสนอ ไมRสามารถแสดงได*ในหน*าจอเดียว สามารถใช* ScrollView ชRวยใน การเลื่อนหน*าจอได*ดังนี้ < ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/scrollView" android:fillViewport="false" android:orientation="vertical" android:padding="10dp" > < GridLayout android:columnCount="3" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/mainlayout" > </ GridLayout > </ ScrollView > 10

การอGานคGาจาก DYNAMIC UI จาก TEMPLATE กรณีที่สร*างเปJน Template สามารถ get คRาของข*อมูลที่ผู*ใช*กรอกเข*ามาได* ดังนี้ public void onBtnOkClick(View view) { GridLayout r = (GridLayout) findViewById(R.id. mainlayout ); for ( int i = 0; i< r.getChildCount(); i++){ View sweet = (View) r.getChildAt(i); CheckBox chb = (CheckBox) sweet.findViewById(R.id. chb_sweet ); Toast. makeText (MainActivity. this , "t" + i + " = " + chb.isChecked(), Toast. LENGTH_SHORT ).show(); } } 11