[Android Studio Dev]Action Bar คืออะไร ?

Mobile Application Developing- Android, iOS, Window Phone สอนเขียนโปรแกรมบนมือถือ ระบบปฏิบัติการต่าง แอนดรอยด์ ไอโอเอส วินโดโฟน สอนเขียนโปรแกรมบนมือถือ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
worachat
PHP Hero Member
PHP Hero Member
โพสต์: 179
ลงทะเบียนเมื่อ: 23/05/2016 9:55 am

[Android Studio Dev]Action Bar คืออะไร ?

โพสต์โดย worachat » 26/05/2016 2:18 pm

Action Bar คืออะไร ?
action bar คือส่วนที่อยู่บนสุดของทุกๆหน้าจอ จะมีหน้าต่างรูปร่างข้างล่างแบบนี้
bay5.jpg
bay5.jpg (7.84 KiB) เปิดดู 358 ครั้ง


มาทำกันเลยครับ
1. ให้ New Project ขึ้นมา โดยให้เราเลือก Blank Activity
bay1.1.jpg


ส่วนของ res ที่เราสร้างด้วย Blank Activity จะมี menu มาให้อัติโนมัติ
bay3.jpg
bay3.jpg (28.01 KiB) เปิดดู 358 ครั้ง

แต่ถ้าหากเรา New Project เป็น เช่น Empty Activity ซึ่งส่วนของ res จะได้เป็นดังภาพด้านล้าง
bay2.jpg
bay2.jpg (33.81 KiB) เปิดดู 358 ครั้ง


2. เมื่อเราเข้าใจในส่วนด้านบนแล้ว ต่อไปก็จะเป็นการเอา ไอคอนหรือภาพที่เราจะโชว์บน Bar นั้นเองครับ
วิธีใส่ก็ง่ายมาก แค่เราโหลดภาพมาแล้ว copy มาวางใน drawable โดยการคลิกที่ drawable แล้วกด ctrl+v ต่อจากนั้น ให้กด OK
bay4.jpg


3. จะเข้าในส่วนของโค้ดกันแล้วละครับ ปกติโดยทั่วไป เราจะมีการเขียนกัน ใน Manifests, Java, และ layer แต่วันนี้เราจะเพิ่มในส่วนของ Menu เข้ามา
ให้เราคลิกที่ Menu ไฟล์ .xml จะมีอยู่อัติโนมัติ เราสามารถเพิ่มเติม หรือแก้ไขได้เลยครับ (ส่วนของ Menu จะเขียนคร้ายๆ กับ ใน Layout เลยครับ)
menu_main.xml

โค้ด: เลือกทั้งหมด

 <item
        android:id="@+id/setting"
        android:icon="@drawable/setting"
        android:title="Setting"
        app:showAsAction="always"/>
    <item
        android:id="@+id/sear"
        android:icon="@drawable/sear"
        android:title="Search"
        app:showAsAction="always" />

ตัวอย่าง Interfaace
bay6.jpg
bay6.jpg (12.98 KiB) เปิดดู 358 ครั้ง


4. โค้ดในส่วนหน้าแรกหรือหน้าหลัก
content_main.xml

โค้ด: เลือกทั้งหมด

<RelativeLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.worachat.actionbar.MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Action Bar"
        android:textSize="60dp" />

</RelativeLayout>


5.ต่อจากนั้นให้เราสร้างหน้า Activity และ Java ที่เราจะเชื่อมต่อ
วิธีสร้าง - คลิกขวาที่ java
- เลือก Activity
- Blank Activity
bay7.jpg
bay7.jpg (155.46 KiB) เปิดดู 358 ครั้ง

- เปลี่ยนชื่อ เราสังเกตุดูภาพด้านล่างว่า จะมี Activity name และ Layout Name
Activity name = Java
Layout Name = xml
bay8.jpg


6. ให้ใส้สิ่งที่เราต้องการจะโชว์ใน xml
content_sear.xml

โค้ด: เลือกทั้งหมด

<RelativeLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.worachat.actionbar.sear"
    tools:showIn="@layout/activity_sear">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/sear" />

</RelativeLayout>


ตัวอย่าง Interfaace
bay9.jpg
bay9.jpg (19.14 KiB) เปิดดู 358 ครั้ง


7. โค้ดหน้า MainActivity.java

โค้ด: เลือกทั้งหมด

import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
       getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
       
        int id = item.getItemId();

        switch (id) {
            case R.id.sear:
                Intent w = new Intent(MainActivity.this, sear.class);
                startActivity(w);
                break;
            case R.id.setting:
                Intent o = new Intent(MainActivity.this, setting.class);
                startActivity(o);
                break;
        }

       return super.onOptionsItemSelected(item);
    }
}


ซึ่งโค้ด ส่วนนี้ มันจะให้มาอยู่แล้ว

โค้ด: เลือกทั้งหมด

 @Override
    public boolean onOptionsItemSelected(MenuItem item) {
       
        int id = item.getItemId();

       return super.onOptionsItemSelected(item);
    }

ส่วนที่ต้องเติม คือ

โค้ด: เลือกทั้งหมด

switch (id) {
            case R.id.sear:
                Intent w = new Intent(MainActivity.this, sear.class);
                startActivity(w);
                break;
            case R.id.setting:
                Intent o = new Intent(MainActivity.this, setting.class);
                startActivity(o);
                break;
        }



หมายเหตุ ทุกหน้าใส่โค้ดเหมือนกันหมดเรยครับ

ผลลัพธ์
bay10.jpg
bay10.jpg (35.92 KiB) เปิดดู 358 ครั้ง
bay11.jpg
bay11.jpg (37.28 KiB) เปิดดู 358 ครั้ง
bay12.jpg
bay12.jpg (42.77 KiB) เปิดดู 358 ครั้ง

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน