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

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

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

User avatar
worachat
PHP Hero Member
PHP Hero Member
Posts: 179
Joined: 23/05/2016 9:55 am

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

Post by worachat »

Action Bar คืออะไร ?
action bar คือส่วนที่อยู่บนสุดของทุกๆหน้าจอ จะมีหน้าต่างรูปร่างข้างล่างแบบนี้
bay5.jpg
bay5.jpg (7.84 KiB) Viewed 1537 times
มาทำกันเลยครับ
1. ให้ New Project ขึ้นมา โดยให้เราเลือก Blank Activity
bay1.1.jpg
ส่วนของ res ที่เราสร้างด้วย Blank Activity จะมี menu มาให้อัติโนมัติ
bay3.jpg
bay3.jpg (28.01 KiB) Viewed 1537 times
แต่ถ้าหากเรา New Project เป็น เช่น Empty Activity ซึ่งส่วนของ res จะได้เป็นดังภาพด้านล้าง
bay2.jpg
bay2.jpg (33.81 KiB) Viewed 1537 times
2. เมื่อเราเข้าใจในส่วนด้านบนแล้ว ต่อไปก็จะเป็นการเอา ไอคอนหรือภาพที่เราจะโชว์บน Bar นั้นเองครับ
วิธีใส่ก็ง่ายมาก แค่เราโหลดภาพมาแล้ว copy มาวางใน drawable โดยการคลิกที่ drawable แล้วกด ctrl+v ต่อจากนั้น ให้กด OK
bay4.jpg
3. จะเข้าในส่วนของโค้ดกันแล้วละครับ ปกติโดยทั่วไป เราจะมีการเขียนกัน ใน Manifests, Java, และ layer แต่วันนี้เราจะเพิ่มในส่วนของ Menu เข้ามา
ให้เราคลิกที่ Menu ไฟล์ .xml จะมีอยู่อัติโนมัติ เราสามารถเพิ่มเติม หรือแก้ไขได้เลยครับ (ส่วนของ Menu จะเขียนคร้ายๆ กับ ใน Layout เลยครับ)
menu_main.xml

Code: Select all

 <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) Viewed 1537 times
4. โค้ดในส่วนหน้าแรกหรือหน้าหลัก
content_main.xml

Code: Select all

<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) Viewed 1537 times
- เปลี่ยนชื่อ เราสังเกตุดูภาพด้านล่างว่า จะมี Activity name และ Layout Name
Activity name = Java
Layout Name = xml
bay8.jpg
6. ให้ใส้สิ่งที่เราต้องการจะโชว์ใน xml
content_sear.xml

Code: Select all

<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) Viewed 1537 times
7. โค้ดหน้า MainActivity.java

Code: Select all

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);
    }
}
ซึ่งโค้ด ส่วนนี้ มันจะให้มาอยู่แล้ว

Code: Select all

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

       return super.onOptionsItemSelected(item);
    }
ส่วนที่ต้องเติม คือ

Code: Select all

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) Viewed 1537 times
bay11.jpg
bay11.jpg (37.28 KiB) Viewed 1537 times
bay12.jpg
bay12.jpg (42.77 KiB) Viewed 1537 times
  • Similar Topics
    Replies
    Views
    Last post

Return to “Mobile Application Developing- Android, iOS”

Who is online

Users browsing this forum: No registered users and 2 guests