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
|
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 工具條選單 |
沒有留言:
張貼留言