ก่อนที่จะยกตัวอย่างเราควรรู้ว่าแถบการกระทำใน Android คืออะไร แถบการกระทำเหมือนกับส่วนหัวใน Android เราสามารถใช้แถบการทำงานเดียวกันสำหรับทุกหน้าจอหรือเปลี่ยนแถบการทำงานสำหรับกิจกรรมเฉพาะได้
ตัวอย่างนี้สาธิตวิธีสร้างแถบการทำงานที่กำหนดเองใน Android
ขั้นตอนที่ 1 − สร้างโครงการใหม่ใน Android Studio ไปที่ไฟล์ ⇒ โครงการใหม่และกรอกรายละเอียดที่จำเป็นทั้งหมดเพื่อสร้างโครงการใหม่
ขั้นตอนที่ 2 − เพิ่มรหัสต่อไปนี้ใน res/layout/activity_main.xml
<?xml version = "1.0" encoding = "utf-8"?> <LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android" xmlns:tools = "https://schemas.android.com/tools" android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MainActivity"> <TextView android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Custom Action Bar" android:textSize = "20sp"/> </LinearLayout>
ขั้นตอนที่ 2 − เพิ่มรหัสต่อไปนี้ใน src/MainActivity.java
import android.os.Bundle; import android.support.v7.app.ActionBar; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.TextView; import android.widget.Toast; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); this.getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM); getSupportActionBar().setDisplayShowCustomEnabled(true); getSupportActionBar().setCustomView(R.layout.custom_action_bar); //getSupportActionBar().setElevation(0); View view = getSupportActionBar().getCustomView(); TextView name = view.findViewById(R.id.name); name.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "You have clicked tittle", Toast.LENGTH_LONG).show(); } }); } }
ขั้นตอนที่ 3 − สร้างเลย์เอาต์สำหรับแถบการทำงานในโฟลเดอร์ res เป็น custom_action_bar.xml ที่แสดงด้านล่าง
<?xml version = "1.0" encoding = "utf-8"?> <LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android" xmlns:app = "https://schemas.android.com/apk/res-auto" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:gravity = "center_vertical" android:padding = "10dp" android:weightSum = "1"> <LinearLayout android:layout_width = "0dp" android:layout_height = "match_parent" android:layout_weight = "0.6"> <ImageView android:layout_width = "wrap_content" android:layout_height = "match_parent" android:src = "@drawable/ic_face_red_400_24dp" /> <TextView android:id = "@+id/name" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginLeft = "10dp" android:text = "Instagram" android:textSize = "20sp" android:textColor = "#000" android:textStyle = "bold" app:fontFamily = "@font/allan_bold" /> </LinearLayout> <LinearLayout android:layout_width = "0dp" android:layout_height = "match_parent" android:layout_marginRight = "10dp" android:layout_weight = "0.4" android:gravity = "end"> <ImageView android:layout_width = "wrap_content" android:layout_height = "match_parent" android:src = "@drawable/ic_local_post_office_red_400_24dp" /> <ImageView android:layout_width = "wrap_content" android:layout_height = "match_parent" android:layout_marginLeft = "20dp" android:src = "@drawable/ic_send_red_400_24dp" /> </LinearLayout> </LinearLayout>
หมายเหตุ − ตามข้อกำหนดของโปรเจ็กต์ / แอปพลิเคชัน เราจำเป็นต้องเปลี่ยนเลย์เอาต์ที่กำหนดเอง
มาลองเรียกใช้แอปพลิเคชันของคุณกัน ฉันคิดว่าคุณได้เชื่อมต่ออุปกรณ์มือถือ Android จริงกับคอมพิวเตอร์ของคุณ ในการรันแอพจาก android studio ให้เปิดไฟล์กิจกรรมของโปรเจ็กต์ของคุณแล้วคลิก Run ไอคอนจากแถบเครื่องมือ เลือกอุปกรณ์มือถือของคุณเป็นตัวเลือก จากนั้นตรวจสอบอุปกรณ์มือถือของคุณซึ่งจะแสดงหน้าจอเริ่มต้นของคุณ
หากต้องการลบเงาของปุ่มแถบการทำงาน ให้ใช้โค้ดต่อไปนี้ใน onCreate() ใน MainActivity ดังที่แสดงด้านล่าง
this.getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM); getSupportActionBar().setDisplayShowCustomEnabled(true); getSupportActionBar().setCustomView(R.layout.custom_action_bar); getSupportActionBar().setElevation(0); View view = getSupportActionBar().getCustomView();
ตอนนี้เรียกใช้แอปพลิเคชันของคุณ มันจะให้ผลลัพธ์ดังที่แสดงด้านล่าง -