iT邦幫忙

2022 iThome 鐵人賽

DAY 15
0
Mobile Development

Android Studio - 30天菜鳥筆記系列 第 15

Android Studio菜鳥筆記 - Day15 - ToolBar

  • 分享至 

  • xImage
  •  

要使用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" />

創建與設計Menu

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 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);

Icon點擊事件

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();
            }
        });

Menu點擊事件

@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);
    }

最後顯示結果


上一篇
Android Studio菜鳥筆記 - Day14 - Log
下一篇
Android Studio菜鳥筆記 - Day16 - DatePicker
系列文
Android Studio - 30天菜鳥筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言