PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การสร้าง UI ให้มีชีวิตชีวา ด้วย Fragments เบื้องต้น ตอนที่ 1

22 April 2015 By


การสร้างส่วนติดต่อกับผู้ใช้ให้มีชีวิตชีวาและแยกส่วนแสดงหลายๆอันในระบบ android   เราจำเป็นต้องคลุม
องค์ประกอบต่างของ UI และการทำงานของ activity ให้อยู่ในรูปแบบของ module (ส่วนแยกจำเพาะ)
โดยสามารถแลกเปลี่ยนสื่อสาร เข้าและออกภายใน activity ได้  การสร้างส่วนแยกจำเพาะนี้ (ต่อไป
จะเรียกว่า module) ด้วยการใช้งาน Fragment class (คล้ายการใช้งาน iframe ในเว็บไซต์) ซึ่งทำงาน
เหมือนกับ activity ที่ถูกซ้อนกันไว้   โดยเราสามารถกำหนด layout และ จัดการวัฏจักรของตัวมันเองได้
 
เมื่อเรากำหนด layout ให้กับ fragment แล้ว เราสามารถที่จะออกแบบให้ fragment ต่างๆ แสดงรวมกัน 
ใน activity ได้ เพื่อดัดแปลงโครงสร้างของ layout สำหรับการแสดงผลในหน้าจอที่ต่างกัน (อย่างเช่น 
ถ้าหน้าจอขนาดเล็ก ก็อาจจะแสดงแค่ fragment เดียว แต่ถ้าหน้าจอใหญ่ หรือเป็น tablet ก็อาจจะกำหนดให้แสดง
2 fragment หรือมากกว่า เป็นต้น)
 
 
 
การสร้าง Fragment
 
อาจเข้าใจได้ว่า fragment คือส่วนของ model ย่อยของ activity ที่มีวัฏจักรของตัวเอง รับค่า event ของตัวเอง 
และเรายังสามารถที่จะเพิ่มเข้ามาหรือลบออกในขณะที่ activity กำลังทำงานอยู่ (จัดแยกคล้ายๆ sub activity ที่เราสามารถ
เรียกใช้งานใน activity อื่นได้)  ในบทความนี้จะแสดงวิธีการใช้งาน Fragment class ให้รองรับการใช้ Support Library
เพื่อให้ app สามารถรองรับอุปกรณ์ที่ run android เวอร์ชั่นเก่าๆ ได้
 
 
 
สร้าง fragment class ใน android studio
 
เราจะทดสอบเนื้อหาในตอนนี้จากการสร้าง project android ใน stuido ขึ้นมาใหม่ ใช้ชื่อ app ว่า Study003
หรือจะใช้ชื่ออื่นก็ได้ โดยในขึ้นตอนนี้สามารถกลับไปดูในบทความเก่าๆ ได้
 
ดูวิธีการสร้าง project ขึ้นมาใหม่ตามข้อที่ 1 จากบทความ
การเพิ่ม action button ใน action bar ตอนที่ 1 
http://www.ninenik.com/content.php?arti_id=618 via @ninenik
 
 
จาก project ที่สร้างขึ้นมาให้เราไปดูที่ Java ชื่อ MainActivity จะได้ code ส่วนบนประมาณนี้
 
package com.example.ninenik.study003;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

.....

}
 
 
สังเกตว่าจะมีการเรียกใช้งาน Support Library  ตรงบรรทัด
import android.support.v7.app.ActionBarActivity;
หรือเรียกย่อๆ ว่า v7 appcompat library รองรับารใช้งาน action bar แต่เมื่อเรามีการใช้งาน fragment class นี้จะถูกเปลี่ยนนไปใช้
ตัวอื่นแทน อธิบายในบทความด้านล่างในลำดับต่อไป
 
 
1. สร้าง fragment คลิกขวาที่โฟลเดอร์ java ตามรูป เลือก New > Fragment > Fragment (Blank)
 



 
 
2. กำหนดชื่อ fragment name และ ก็ fragment layout ในตัวอย่างจะเปลี่ยนเป็น myFragment
    กับ fragment_my ตามลำดับ ติ้กเลือก checkbox เฉพาะอันแรก (ส่วนอื่นยังไม่จำเป็นในตอนนี้)
    - Create layout XML  กำหนดให้สร้าง ไฟล์ fragment layout
    - include fragment factory methods ให้เพิ่ม code fragment method เข้ามาด้วย
    - include interface callback ให้เพิ่ม code รองรับการเรียกใช้จาก activity หรือการติดต่อกับ activity ได้
    กำหนดเรียบร้อย ให้กดที่ปุ่ม Finish 
 



 
 
3. มาดู android studio สร้างอะไรมาให้เราบ้าง ซึ่งก็จะมี myFragment class และ ก็ fragment_my.xml 
    ตามรูป นอกนั้นก็จะมีการสร้าง string resource เพิ่มเข้ามา strings.xml 
 
 
 
    ต่อไปเรามาดูที่ไฟล์ fragment_my.xml (ถ้าเทียบแบบ code html ตามความเข้าใจอย่างง่ายก็คือ
    ไฟล์ที่เราต้องการจะนำไปแสดง ใน iframe)
 
<FrameLayout 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" tools:context="com.example.ninenik.study003.myFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView android:layout_width="match_parent" android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment" />

</FrameLayout>
 
    ตามโครงสร้าง xml ของ fragment layout เราจะเห็นว่าจะคล้ายๆ กับ layout ของ activity ภายในก็จะมี view 
    object อยู่ อย่างใน code ก็จะเป็น TextView ซึ่งจะแสดงคำว่า Hello World 
    จาก code ด้านบน android studio จะสร้างรุปแบบ xml ออกมาค่อนข้างอ่านยาก เรามีวิธีที่ใช้สำหรับจัดรูปแบบ
    ให้อ่าน code ง่ายขึ้น ด้วยเครื่องมือของ android studio ทำได้ดังนี้
 
    ลากคลุม code ที่ต้องการจัดรูปแบบ แล้วไปที่เมนู Code > Reformat Code... (หรือกดปุ่ม Ctrl+Alt+L)
 


 
 
    เลือกจัดรูปแบบตามการทำงาน แล้วกด Run เราก็จะได้ code ที่ดูง่ายขึ้น เราจะเปลี่ยนตรงข้อความของ 
    TextView ให้แสดงข้อความว่า I am a Fragment  จะได้ไฟล์ fragment_my.xml ดังนี้
 
<FrameLayout 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"
    tools:context="com.example.ninenik.study003.myFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="I am a Fragment" />

</FrameLayout>
 
 
4. ต่อไปเราจะเพิ่ม fragment เข้าใปใน layout ของ activity หลักที่ไฟล์ activity_main.xml
    (ถ้าอธิบายตามความเข้าใจในรูปแบบ code html ไฟล์ activity_main.xml ก็คือไฟล์หลักที่เรียก
    ใช้งาน iframe)
 
<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <TextView android:text="@string/hello_world" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>
 
 
    จัดรูปแบบหน่อย และก็ลบ TextView ออก เราจะใช้ fragment แทรกเข้าไปแทน และก็เปลี่ยนโครงสร้างของ layout
    จาก RelativeLayout เป็น LinearLayout แบบแสดงแนวนอน ลบ padding ออก กำหนดความกว้าง 
    และสูงให้ขยายเต็มจอของ app  โดยใช้ match_parent จะได้เป็น
 
<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:orientation="horizontal" >


</LinearLayout>
 
5. แทรก fragment element เข้าไป ดังนี้ (เทียบเหมือนแทรก iframe ลงใน code html)
    สังเกตตรง android:name="com.example.ninenik.study003.myFragment" ค่า จะเท่ากับ
    ชื่อ package ต่อด้วย class ของ fragment
 
    <fragment android:name="com.example.ninenik.study003.myFragment"
        android:id="@+id/my_fragment"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent" />    
 
    จะได้เป็น
 
<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:orientation="horizontal" >

    <fragment android:name="com.example.ninenik.study003.myFragment"
        android:id="@+id/my_fragment"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent" />

</LinearLayout>
 
 



 
6. เรียกใช้ layout ที่มีการกำหนดการใช้งาน มาใช้ใน MainActivity โดยให้เราเปลี่ยนค่าการ extents
    จาก ActionBarActivity เป็น FragmentActivity  
 
 
 
 
    สังเกตว่า code จะเป็นสีแดง และ class 
    import android.support.v7.app.ActionBarActivity; จะกลายเป็นสีเทา เนื่องจากเราไม่ด้ใช้งานแล้ว
    เราสามารถลบออกได้
    เราจะ import class อื่นมาแทน คลิกที่ข้อความสีแดง แล้วกดปุ่ม Alt+Enter พร้อมกัน แล้วเลือก import class
    import android.support.v4.app.FragmentActivity;
 




 
 
7. เท่านี้เราก็สามารถทดสอบ run app เพื่อดูการทำงานได้ โดยเมื่อ app run ขึ้นมา ก็จะไปเรียกใช้งาน
   fragment และดึง layout ของ fragment มาแสดงซึ่งเรากำหนดค่าใน TextView เพื่อทดสอบแล้ว
   หากไม่มีอะไรผิดพลาด app เราจะรันออกมาในลักษระตามนี้
 

 
 
ก่อนจบเกี่ยวกับการใช้งาน fragment อย่างง่ายตอนแรกนี้ เรามาดู code ของ class fragment ที่เราสร้าง
ที่ชื่อ myFragment
 
package com.example.ninenik.study003;

import android.os.Bundle;
import android.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


/**
 * A simple {@link Fragment} subclass.
 */
public class myFragment extends Fragment {


    public myFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_my, container, false);
    }


}
 
ส่วนที่เรียกใช้งาน layout ของ fragment จะอยู่ใน onCreateView() method ตามรูป



 



เนื้อหาที่เกี่ยวข้อง



Tags:: android studio android fragment

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





URL สำหรับอ้างอิง