2023年1月10日 星期二

Android Studio - Toolbar Menu 工具條選單(九十二)

Android Studio - Toolbar Menu 工具條選單(九十二):

ToolBar(工具條選單)是 Android 5.0 推出的一個新的導航控制項用於取代之前的 ActionBar,由於其高度的可定制性、靈活性、符合 Material Design 設計規範等優點,越來越多的應用也用上了 ToolBar。Android 考慮到仍有一部分用戶的手機版本號低於 5.0,所以,ToolBar 也放進了support v7 包內,使得低版本的系統也能使用上 ToolBar。Toolbar Menu 可以在每個 Fragment 都會有自定義的 Toolbar,因此在 Toolbar 身上加 Menu 就不用擔心沾染到其它的 menu item。

Android Studio Toolbar Menu 工具條選單:

如何使用 Toolbar 方法:
  • 在 Style 替換主題為 NoActionBar 系列
  • xml 中加入 toolbar 控件
  • activity 中使用 setSupportActionBar(toolbar);替換 ActionBar
  • 設置相應屬性咋可使用 getSupportActionBar()來獲取 ActionBar 實例
  • 設置 toolBar 上的 menu 需要在 res 文件夾下新建 menu 文件夾,新建相應的 menu 資源文件,插入相應的 item 項,指定 id、icon(顯示的圖標)、title(顯示的文字)、showAsAction(item 位置,要用 app 做命名空間,保證向下兼容) ,可接受的值有:
  • always:使菜單項一直顯示在 ToolBar上
  • ifRoom:如果有足夠的空間,這個值會使菜單項顯示在 ToolBar 上
  • never:使菜單項永遠都不出現在 ToolBar 上,在…的子項中顯示
  • withText:使菜單項和它的圖標,菜單文本一起顯示
  • 重寫 onCreateOptionsMenu() 在其中加入 getMenuInflater().inflate(R.menu.menu_home, menu);來引入 menu 資源
  • 重寫 onOptionsItemSelected() 來處理 item 點擊事件
  • 操作系統:Windows 7 64-bit 版本
  • 開發環境:Android Studio 4.0.1 版本
  • Gradle 版本:6.1.1
  • 手機測試版本:API 19
  • 原程式:C:\DIY-Android-181-17 ToolbarMenu bugworkshop
  • 程式:C:\DIY-Android-181-17 ToolbarMenu bugworkshop
item 常用的屬性(BOM):

Toolbar 參數

類型

說明

background

color/drawable        

背景色

theme

@style

menu的一些常見操作 (字體大小顏色等)

layout_scrollFlags

 

配合AppBarLayout使用下邊單獨講該屬性

navigationIcon

mipmap/drawable

左側返回按鈕

title

String

主標題

subTitle

String

子標題

titleMarginStart      

dp

主標題距離左側按鈕距離

titleTextColor

color

字體顏色

minHeight

dp

最小高度


Toolbar 是 android 5.0 推出的一個新的導航控制項用來取代傳統的 ActionBar 控制項。需要注意的是,如果使用 Toolbar,需要先將系統的 ActionBar 去掉,可以通過主題將我們的父級主題設置為 NoActionBar。

style.xml:

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">@color/colorPrimary</item>

        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

        <item name="colorAccent">@color/colorAccent</item>

    </style>

    <style name="TitleTextSize" parent="@style/Base.TextAppearance.AppCompat.Title">

        <item name="android:textSize">18sp</item>

    </style>

    <style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Light">

        <item name="android:colorBackground">#FFF</item>

        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>

    </style>

    <style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">

        <item name="overlapAnchor">false</item>

    </style>

</resources>


activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">

 

    <androidx.appcompat.widget.Toolbar

        android:id="@+id/toolbar"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:background="?attr/colorPrimary"

        android:minHeight="?attr/actionBarSize"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        android:theme="@style/ThemeOverlay.AppCompat.DayNight.ActionBar"

        app:popupTheme="@style/ToolbarPopupTheme"

        app:titleTextAppearance="@style/TitleTextSize"

        />

</androidx.constraintlayout.widget.ConstraintLayout>


MainActivity.java:

package bugworkshop.toolbarmenu;

 

import androidx.annotation.NonNull;

import androidx.appcompat.app.AppCompatActivity;

import androidx.appcompat.widget.Toolbar;

import android.graphics.Color;

import android.graphics.drawable.Drawable;

import android.os.Bundle;

import android.text.Spannable;

import android.text.SpannableString;

import android.text.style.ImageSpan;

import android.view.Menu;

import android.view.MenuItem;

import android.widget.Toast;

 

public class MainActivity extends AppCompatActivity {

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        setToolbar();

    }

 

    private void setToolbar() {

        Toolbar toolbar = findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);

        getSupportActionBar().setTitle("Main Title");

        toolbar.setTitleTextColor(Color.WHITE);

        toolbar.setSubtitle("Sub Title");

        toolbar.setSubtitleTextColor(Color.WHITE);

        toolbar.setContentInsetStartWithNavigation(0);

 

        toolbar.setNavigationOnClickListener(v->{

            Toast.makeText(this, "Finished", Toast.LENGTH_SHORT).show();

        });

    }

 

    private CharSequence menuIconWithText(Drawable r, String title) {

        r.setBounds(0, 0, r.getIntrinsicWidth(), r.getIntrinsicHeight());

        SpannableString sb = new SpannableString("    " + title);

        ImageSpan imageSpan = new ImageSpan(r, ImageSpan.ALIGN_BOTTOM);

        sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

        return sb;

    }

 

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        menu.add(0,0,0,"Item 0");

        menu.add(0,1,1,"Item 1");

        menu.add(0,2,2,"Item 2");

        menu.add(0,4,4,"External Item").setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);

        return super.onCreateOptionsMenu(menu);

    }

    @Override

    public boolean onOptionsItemSelected(@NonNull MenuItem item) {

        switch (item.getItemId()){

            case 0:

                Toast.makeText(this, "Select :  " + item.getItemId(), Toast.LENGTH_SHORT).show();

                break;

            case 1:

                Toast.makeText(this, "Select :  " + item.getItemId(), Toast.LENGTH_SHORT).show();

                break;

            case 2:

                Toast.makeText(this, "Select :  " + item.getItemId(), Toast.LENGTH_SHORT).show();

                break;

            case 3:

                Toast.makeText(this, "Select :  " + item.getItemId(), Toast.LENGTH_SHORT).show();

                break;

            case 4:

                Toast.makeText(this, "Select External :  " + item.getItemId(), Toast.LENGTH_SHORT).show();

                break;

        }

        return super.onOptionsItemSelected(item);

    }

}



Android Studio Toolbar Menu 工具條選單

2023年 1月 10日(Tue)天氣報告
氣溫:43.0°F / 6.0°C @ 07:00
風速:每小時 6公里
降雨機會:2%
相對濕度:百分之 80%
天氣:晴朗

沒有留言:

張貼留言