要使用Toolbar就必須把原本的Actionbar拿掉
首先到res/values/themes/themes.xml
加上以上這行,先把Title隱藏
<item name="windowNoTitle">true</item>
再來,調整Toolbar樣式到res/valuest創建一個styles_toolbar.xml檔案
這個檔案是用來取消原本系統預設的action bar替換成現在要用的Toolbar與更改Toolbar樣式
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--Toolbar與Menu顏色與大小-->
<style name="ToolbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!--更改Menu選單內的文字顏色-->
<item name="android:textColor">@color/black</item>
<!--更改Toolbar上的選單顯示文字顏色-->
<item name="android:actionMenuTextColor">@color/white</item>
<!--更改Toolbar所有文字的大小-->
<item name="android:textSize">20dp</item>
<!--更改Toolbar背景顏色-->
<item name="android:background">@color/teal_200</item>
<!--設定Menu視窗不覆蓋到Toolbar-->
<item name="overlapAnchor">false</item>
</style>
<!--Title大小-->
<style name="TitleTextSize" parent="@style/Base.TextAppearance.AppCompat.Title">
<item name="android:textSize">18sp</item>
</style>
</resources>
設計好後套用到Toolbar
android:theme="@style/ToolbarTheme"
app:titleTextAppearance="@style/TitleTextSize"
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ToolbarTheme"
app:titleTextAppearance="@style/TitleTextSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
res新增一個menu資料夾,裡面再創建一個toolbar_menu.xml
showAsAction屬性如果在Toolbar內還有空間,控件就會被放在Toolbar上面有四種可以設定
ifRoom:如果在Toolbar內還有空間,控件就會被放在Toolbar上面
never:永遠不會出現在ToolBar,只會在列表中顯示
always:一直顯示在ToolBar上
withText:圖片與文字一起顯示
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/item1"
android:icon="@android:drawable/ic_menu_search"
android:title="查詢"
app:showAsAction="ifRoom" />
<item
android:id="@+id/item2"
android:title="登入"
app:showAsAction="ifRoom" />
<item
android:id="@+id/item3"
android:title="訊息" />
<item
android:id="@+id/item4"
android:title="追蹤" />
<item
android:id="@+id/item5"
android:title="設定" />
</menu>
然後將設計好的Menu與Toolbar做綁定
在Activity按下Ctrl+o 尋找onCreateOptionsMenu
將程式碼打上去,Toolbar就會順利顯示了
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_menu,menu);
return super.onCreateOptionsMenu(menu);
}
//元件綁定
Toolbar toolbar = findViewById(R.id.toolbar);
//將Toolbar綁到setSupportActionBar裡
setSupportActionBar(toolbar);
//設定主標題
getSupportActionBar().setTitle("主標題");
//改變主標題文字顏色
toolbar.setTitleTextColor(Color.BLUE);
//設定副標題
toolbar.setSubtitle("副標題");
//設定副標題文字顏色
toolbar.setSubtitleTextColor(Color.BLACK);
//設置Icon圖樣
toolbar.setNavigationIcon(R.drawable.back);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();
}
});
@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
int id = item.getItemId();
switch (id){
case R.id.item1:
Toast.makeText(this, "查詢", Toast.LENGTH_SHORT).show();
break;
case R.id.item2:
Toast.makeText(this, "登入", Toast.LENGTH_SHORT).show();
break;
case R.id.item3:
Toast.makeText(this, "訊息", Toast.LENGTH_SHORT).show();
break;
case R.id.item4:
Toast.makeText(this, "追蹤", Toast.LENGTH_SHORT).show();
break;
case R.id.item5:
Toast.makeText(this, "設定", Toast.LENGTH_SHORT).show();
break;
}
return super.onOptionsItemSelected(item);
}