PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

การเพิ่ม action button ใน action bar ตอนที่ 1

12 April 2015 By


เราสามารถเพิ่มปุ่ม action button เพื่อจัดการคำสั่ง หรือทำงานตามที่ต้องการ ใน app ที่กำลังใช้งานอยู่ได้
โดยแสดงเป็นแบบ icon หรือ text หรือทั้งสองแบบได้ ถ้ามี action button จำนวนมาก
ก็จะถูกซ่อนไว้ และแสดงในลักษณะเมนู popup ขึ้นมาให้เลือก
 
เนื้อหาตอนนี้ เราจะสร้าง project ใหม่ เป็น study002 สำหรับศึกษา
มาดูหน้าตาของ app และส่วนของ action button ที่แสดง
 
 




 
 
การเพิ่ม action button

เราจะเพิ่มปุ่ม search และ refresh เป้นแบบ icon 
กับปุ่ม settings ที่เป็นแบบ ข้อความ
 
1. สร้าง android project ใหม่ ชื่อ study002  (ใช้ชื่ออื่นก็ได้ ดูเฉพาะในส่วนของ application name 
    นอกนั้น ก็เลือกตามรูป และกด Next ไปจนเสร็จ)
    
 
 
 


 
 
    หลังจากสร้าง project ใหม่มาแล้วจะได้ app เบื้องต้นตามรูปด้านล่าง
 



 
 
2. เพิ่มปุ่ม action button โดยเราจะไปเพิ่มที่ไฟล์ res/menu/menu_main.xml
 
 
    ตามรูป เราจะเห็นว่า รายการเมนู ที่ถูกสร้างขึ้นมาอยู่ก่อนหน้าแล้ว 1 รายการคือ settings
    ให้เราเพิ่มเข้าไปอีก 2 เมนูคือ search กับ refresh ด้วยโค้ดตามด้านล่าง
 
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">

    <item android:id="@+id/action_search"
        android:icon="@drawable/ic_action_search"
        android:title="@string/action_search"
        app:showAsAction="always"/>

    <item android:id="@+id/action_refresh"
        android:icon="@drawable/ic_action_refresh"
        android:title="@string/action_refresh"
        app:showAsAction="always"/>

    <item android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:orderInCategory="100"
        app:showAsAction="never" />
</menu>
 
 
    จะเห็นว่า ค่าข้อมูลด้านล่าง จะยังเป็นสีแดง เนื้องจากยังไม่ได้กำหนด
    @drawable/ic_action_search 
    @string/action_search
    @drawable/ic_action_refresh
    @string/action_refresh
 
    ก่อนที่เราจะไปกำหนดค่า เรามาทำความรู้จักกับ attribute เพิ่มเติมกัน
 
    android:icon 
    ใช้สำหรับกำหนดรูป icon  อย่าง @drawable/ic_action_search
    drawable ก็คือประเภทรูป bitmap image
    ชื่อที่ต่อจาก @drawable/ ต้องเป็นชื่อไฟล์รูป ดังนั้น ic_action_search  
    ก็คือชื่อไฟล์รูป ic_action_search.png ที่อยู่ในโฟลเดอร์ res/drawable/ 
    เดี๋ยวเราจะไปโหลดมา
 
    android:title
    ใช้สำหรับกำหนดชื่อเรียก ไว้กำหนดบ่งชี้ว่าคืออะไร ไม่ให้สับสน
 
    app:showAsAction
    ให้แสดงเมนูนี้ใน action bar ลักษณะใด อย่างในตัวอย่าง คือ always แสดงตลอดเวลา และ
    never ไม่ต้องแสดง (ก็คือซ่อนอยู่ มีคลิกที่เมนู ถึงจะขึ้นแสดง)
 
    android:orderInCategory
    ลำดับความสำคัญของเมนูที่แสดงในกลุ่มนั้นๆ กำหนดเป็นตัวเลข
 
    ดู attributes ของ เมนูทั้งหมดได้ที่ 
    http://developer.android.com/guide/topics/resources/menu-resource.html
 

 
3. ให้เราไปดาวน์โหลด action bar icon pack ตามลิ้งค์ด้านล่าง
    http://developer.android.com/design/downloads/index.html#action-bar-icon-pack
 
 
    แตกไฟล์ เข้าไปในโฟลเดอร์ action bar icon ดูตามรูปด้านล่าง เราจะไป copy icon search
    มาใช้งาน ในที่นี้ app เราพื้นตรง action bar เป็นสีดำ เราก็เข้าไป 
 
    Action Bar Icons\holo_dark\01_core_search
 
    แล้วให้ คลุมเลือกทั้งหมด แล้ว copy
 





 
4. กลับมาที่ android studio ที่ project ของเรา ให้เราคลิก ขวาที่ res  แล้วเลือก paste
 
 


   จะมีหน้าต่างมาแสดง ว่าเราต้องการ copy ไฟล์มายังตำแหน่งดังกล่าวหรือไม่  ให้เลือก ok
 
 

 
 
    จะเห็นว่า android studio จะจัดการโครงสร้าง และ path ของรูปที่เรานำมาใช้ให้
    และสังเกตว่า ส่วนที่เป็นสีแดงจะหายไป เพราะเราได้เพิ่มรูปของ icon ค้นหาแล้ว
 
 
    ทำเช่นกันกับปุ่ม icon refresh เสร็จแล้วจะได้ดังนี้
 


 
5. จากรูปด้านบน จะเหลือตรง android:title ที่ยังเป็นสีแดง เราต้องไปกำหนดค่าใน res/values/strings.xml ดังนี้
 
<resources>
    <string name="app_name">Study002</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_search">Search</string>
    <string name="action_refresh">Refresh</string>
    <string name="action_settings">Settings</string>
</resources>
 
6. ส่วนสุดท้าย เรามาเพิ่ม code java เพื่อให้แสดง action button ให้ action bar 
    ให้ไปที่ java ที่ MainActivity class ตามรูป เราจะแก้ไขในส่วนของ เมนู
    ลบ code เดิมใน onCreateOptionsMenu method ออกก่อนแล้วแทนด้วย code ตามนี้
 
       // ขยายเมนูให้แสดงใน action bar
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.menu_main, menu);
        return super.onCreateOptionsMenu(menu);
 



 
 
    จะเห็นว่า ตรง MenuInflater ยังเป็นสีแดง เช่นเคย เราต้อง import class โดยให้คลิกที่ข้อความนั้น
    แล้วกดปุ่ม Alt+Enter พร้อมกัน แล้วเลือกเมนู import class
 
 




 
 
7. เป็นอันเสร็จการเพิ่ม action button ให้กับ action bar ทดสอบ run app หาไม่มีอะไรผิดพลาด
    ผลลัพธ์จะเป็นดังรูปที่แสดงนี้
 
 
ในตอนนี้เราแค่เพิ่มปุ่ม ตอนหน้าเราจะเพิ่มคำสั่ง ให้กับปุ่ม แบบง่ายกัน รอติดตาม
 
 
 
 



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



Tags:: action bar android action button android studio

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

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


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





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