การสร้าง Navigation Drawer ~ คู่มือแอนดรอยด์ ANDRIOD การใช้งาน เทคนิคต่าง ๆ

navigation drawer หรือ sliding menu คือแถบเมนูที่ปกติจะถูกซ่อนไว้ และจะเลื่อนออกมาจากทางซ้ายของจอเมื่อผู้ใช้ปาดนิ้วที่ขอบซ้ายของจอไปทางขวา หรือแตะไอคอนของแอพบน action bar
navigation drawer เป็นส่วนที่เราจะเตรียมตัวเลือกไว้ให้ผู้ใช้เข้าถึงเนื้อหาต่างๆซึ่งเป็น หัวข้อหลักในแอพของเรา เช่นแอพ YouTube จะมีตัวเลือกใน navigation drawer สำหรับเข้าถึงรายการวิดีโอที่ผู้ใช้อัพโหลดขึ้นไปเอง, รายการวิดีโอที่ผู้ใช้เคยเรียกดู (history), รายการวิดีโอที่ผู้ใช้เก็บไว้ดูภายหลัง รวมถึงรายชื่อ Channel ต่างๆที่ผู้ใช้สมัครไว้ เป็นต้น

หน้าหลักของแอพ YouTube

navigation drawer ซึ่งจะแสดงออกมาเมื่อปาดนิ้วที่ขอบซ้ายไปทางขวา

เราจะมาเรียนรู้วิธีการสร้าง navigation drawer ให้กับแอพ Android กันในบทความนี้

เพิ่ม DrawerLayout ใน Layout

หัวใจสำคัญของการสร้าง navigation drawer ก็คือการเพิ่ม DrawerLayout ลงใน layout file ที่กำหนด UI ของแอพ

<android.support.v4.widget.DrawerLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- เนื้อหาหลัก -->
    <LinearLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="50sp"
            android:gravity="center" />
    </LinearLayout>

    <!-- navigation drawer -->
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111" />
</android.support.v4.widget.DrawerLayout>

<android.support.v4.widget.DrawerLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/drawer_layout"

android:layout_width="match_parent"

android:layout_height="match_parent">

<LinearLayout

android:id="@+id/content_frame"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<TextView

android:id="@+id/textView"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:textSize="50sp"

android:gravity="center" />

</LinearLayout>

<ListView

android:id="@+id/left_drawer"

android:layout_width="240dp"

android:layout_height="match_parent"

android:layout_gravity="start"

android:choiceMode="singleChoice"

android:divider="@android:color/transparent"

android:dividerHeight="0dp"

android:background="#111" />

</android.support.v4.widget.DrawerLayout>

ภายใน DrawerLayout ให้สังเกตนะครับว่าวิวของเนื้อหาหลัก (LinearLayout ในที่นี้) จะมาก่อน แล้วถัดมาจึงเป็นวิวของตัว drawer ซึ่งโดยทั่วไปจะกำหนดเป็น ListView
ลำดับของวิวทั้งสองใน DrawerLayout ถือว่าสำคัญมากนะครับ เพราะว่าแอนดรอยด์จัดลำดับวิวในรูปแบบ z-order กล่าวคือ วิวใดถูกระบุใน XML ก่อนจะถูกสร้างไว้ข้างล่าง วิวใดถูกระบุทีหลังจะถูกสร้างไว้ข้างบน ทีนี้แอนดรอยด์กำหนดว่า drawer ต้องอยู่ข้างบนเนื้อหาหลักเท่านั้น ทำให้เราต้องระบุวิวของ drawer ไว้ทีหลังวิวของเนื้อหาหลักด้วยเหตุผลนี้เอง

แสดงรายการตัวเลือกใน Drawer

ที่แอคทิวิตี สิ่งที่เราต้องทำอย่างแรกเลยก็คือแสดงรายการตัวเลือกออกมาใน drawer และเนื่องจาก drawer ของเราสร้างขึ้นจาก ListView ดังนั้นวิธีที่ง่ายที่สุดก็คือเก็บข้อมูลไว้ในอาร์เรย์ แล้วนำข้อมูลจากอาร์เรย์มาใส่ลงใน ListView โดยใช้ ArrayAdapter

package com.example.navigationdrawer;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends Activity {

    // ชื่อดาวเคราะห์ต่างๆ
    private String[] mPlanetTitles = { "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune" };
    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;

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

        // อ้างอิงไปยัง DrawerLayout ที่เป็น root element ของ layout file
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        // อ้างอิงไปยัง ListView ซึ่งเป็นตัว drawer ที่จะเลื่อนออกมา
        mDrawerList = (ListView) findViewById(R.id.left_drawer);

        // กำหนด Adapter ให้กับ ListView
        mDrawerList.setAdapter(new ArrayAdapter<string>(this,
                R.layout.list_item, mPlanetTitles));
        // กำหนด click listener ให้กับ ListView เพื่อระบุการทำงานเมื่อไอเท็มในลิสต์ถูกคลิกเลือก
        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
    }

    // ยังมีโค้ดอีก...

}

package com.example.navigationdrawer;

import android.app.Activity;

import android.os.Bundle;

import android.support.v4.widget.DrawerLayout;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.widget.AdapterView;

import android.widget.ArrayAdapter;

import android.widget.ListView;

import android.widget.TextView;

public class MainActivity extends Activity {

// ชื่อดาวเคราะห์ต่างๆ

private String[] mPlanetTitles = { "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune" };

private DrawerLayout mDrawerLayout;

private ListView mDrawerList;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// อ้างอิงไปยัง DrawerLayout ที่เป็น root element ของ layout file

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

// อ้างอิงไปยัง ListView ซึ่งเป็นตัว drawer ที่จะเลื่อนออกมา

mDrawerList = (ListView) findViewById(R.id.left_drawer);

// กำหนด Adapter ให้กับ ListView

mDrawerList.setAdapter(new ArrayAdapter<String>(this,

R.layout.list_item, mPlanetTitles));

// กำหนด click listener ให้กับ ListView เพื่อระบุการทำงานเมื่อไอเท็มในลิสต์ถูกคลิกเลือก

mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

}

// ยังมีโค้ดอีก...

}

ในโค้ดข้างบน การกำหนด Adapter ให้กับ ListView จะใช้ข้อมูลจากอาร์เรย์ mPlanetTitles ซึ่งแต่ละข้อมูลในอาร์เรย์จะกลายมาเป็นไอเท็มหรือตัวเลือกหนึ่งๆในลิสต์ และการแสดงผลแต่ละไอเท็มจะใช้ layout ที่กำหนดในไฟล์ list_item.xml ซึ่งมีรายละเอียดดังนี้

<textview xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:gravity="center_vertical"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:textColor="#fff"
    android:background="?android:attr/activatedBackgroundIndicator"
    android:minHeight="?android:attr/listPreferredItemHeightSmall" />

<TextView xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@android:id/text1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:textAppearance="?android:attr/textAppearanceListItemSmall"

android:gravity="center_vertical"

android:paddingLeft="16dp"

android:paddingRight="16dp"

android:textColor="#fff"

android:background="?android:attr/activatedBackgroundIndicator"

android:minHeight="?android:attr/listPreferredItemHeightSmall" />

ระบุการทำงานเมื่อผู้ใช้คลิกตัวเลือกใน Drawer

เมื่อผู้ใช้คลิกตัวเลือกใน drawer แอนดรอยด์จะเรียกมายังเมธอด onItemClick ภายใน OnItemClickListener ที่เรากำหนดให้กับ ListView
ในที่นี้จะแสดงตัวอย่างแบบง่ายๆคือ เมื่อผู้ใช้คลิกชื่อดาวเคราะห์ใน drawer เราก็จะนำชื่อดาวเคราะห์นั้นมาแสดงที่ TextView ภายในส่วนของเนื้อหาหลัก
ให้เพิ่มโค้ดต่อไปนี้ภายในคลาส MainActivity (คลาส DrawerItemClickListener ข้างล่างนี้จะเป็นคลาสที่ซ้อนอยู่ใน MainActivity อีกที)

private class DrawerItemClickListener implements ListView.OnItemClickListener {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        // แสดงชื่อดาวเคราะห์ที่ TextView
        ((TextView) findViewById(R.id.textView)).setText(mPlanetTitles[position]);
        // ปิด drawer (ถ้าไม่สั่งปิดจะแสดงค้างอยู่อย่างนั้นจนกว่าผู้ใช้จะปิดเอง)
        mDrawerLayout.closeDrawer(mDrawerList);
    }
}

private class DrawerItemClickListener implements ListView.OnItemClickListener {

@Override

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

// แสดงชื่อดาวเคราะห์ที่ TextView

((TextView) findViewById(R.id.textView)).setText(mPlanetTitles[position]);

// ปิด drawer (ถ้าไม่สั่งปิดจะแสดงค้างอยู่อย่างนั้นจนกว่าผู้ใช้จะปิดเอง)

mDrawerLayout.closeDrawer(mDrawerList);

}

ผลการรัน

http://promlert.com/2013/11/creating-navigation-drawer/

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

คู่มือแอนดรอยด์ ANDRIOD การใช้งาน เทคนิคต่าง ๆ