碼農日常-『Android studio』Toolbar之基本用法 @ 碼農日常大小事

今天來聊聊關於Android中Toolbar之使用方式

說到Toolbar，不得不講述一下它的前身Action Bar

其實說前身好像也不太對(´ж｀;)...

應該是說Toolbar是Google官方比較建議的操作方式，因此現在大多數開發中都按照今天所講述的方法操作

講了這麼多次Toolbar...那最後做出來的效果到底如何呢？

來看一下今天的範例吧

Gif_20200801215651000_by_gifguru

蛤？(゜ロ゜)你說你不知道重點在哪裡QQ?

重點是這條啦

Screenshot_20200802-101148_ToolbarDemo

今天的主要任務就是就是示範這一條工具列的操作

別看這東西看起來很單純，背後的眉眉角角還真ＸＸ的不少(-д-；)

最後，這是今天內容的 Github

->https://github.com/thumbb13555/ToolbarDemo

1.樣式設定

Toolbar的設定稍微～～比較特別一點

樣式的綁定上，通常都會從styles.xml的檔案去調整相關設定

請打開style.xml的檔案（res->values->styles.xml）

截圖 2020-08-02 上午10.36.37

接下來的內容可直接複製...不過建議可以多多去了解到底這邊寫了什麼，以及其內容差異性

styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <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>  <!--讓跳出的選項視窗不會遮住Toolbar-->
    </style>

首先是紅色底部分

首先預設當然不是這個...但重點是首先第一件要做的事情要把action bar 取消掉，然後替換成Androidx控件的Toolbar

這時候執行可以執行起來看看，你會發現原本畫面中的工具列消失了

這是正確的呦！(･ω･)b

再來是藍色底部分

這部分是用來設定Toolbar內字體大小用的，稍後在介面的部分會補充該如何綁定到介面上

最後是綠色底部分

這部分是管理Menu點擊後彈跳出來的的視窗樣式

截圖 2020-08-02 上午11.21.27

而紫色底部分則是可以決定彈出來的視窗背景顏色

2.介面

方才在上一段有提到，既然取消了action bar的顯示，那麼就要自己拉一個控件給他

直接PO介面，一樣會有解釋

activity_main.xml

截圖 2020-08-02 上午11.36.46

<?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>

這邊有紅底、綠底、藍底這三個部分

紅底的部分是管理這個Toolbar所繼承的Action bar樣式，對應styles.xml的紅底部分

綠底的部分是也是對應同一檔案綠底的部分，綁定彈跳出來的樣式

藍底一樣綁定同檔案，管理字體樣式大小

最後是程式了，其他的內容都會寫在裡面喔！

3.撰寫內容

最後要撰寫功能了，這部分主要分為三個部分講解

第一部分為講述將Toolbar綁定給SupportActionBar的方式

第二部分為講述設置Toolbar內容元件的方式

最後一部分則是講述如何取得控件ID，並且對它進行操作

總之，先看程式

MainActivity.java

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 toolbar = findViewById(R.id.toolbar);
        /**將Toolbar綁定到setSupportActionBar*/
        setSupportActionBar(toolbar);
        /**設置大標題*/
        getSupportActionBar().setTitle("主標題");
        /**設置大標題字體顏色*/
        toolbar.setTitleTextColor(Color.WHITE);
        /**設置副標題*/
        toolbar.setSubtitle("副標題");
        /**設置副標題字體顏色*/
        toolbar.setSubtitleTextColor(Color.WHITE);
        /**設置標題前方的Icon圖樣*/
        toolbar.setNavigationIcon(getDrawable(R.drawable.ic_baseline_arrow_back_ios_24));
        /**設置前方Icon與Title之距離為0(預設的很遠...)*/
        toolbar.setContentInsetStartWithNavigation(0);

        /**設置Icon圖樣的點擊事件*/
        toolbar.setNavigationOnClickListener(v->{
            Toast.makeText(this, "結束", Toast.LENGTH_SHORT).show();
        });
//        toolbar.inflateMenu(請自己在menu設置一個xml檔案);
//        如果想使用xml Layout檔案，請去建一個吧～

    }
    /**使選項內Icon與文字並存*/
    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;
    }
    /**程式中新增MenuItem選項*/
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        /**itemId為稍後判斷點擊事件要用的*/
        menu.add(0,0,0,"第一選項");
        menu.add(0,1,1,"第二選項");
        menu.add(0,2,2,"第三選項");
        menu.add(0,3,3,menuIconWithText(getDrawable(R.drawable.ic_baseline_star_24),"帶ICON選項"));
        /**setShowAsAction預設為NEVER
         *MenuItem.SHOW_AS_ACTION_IF_ROOM 為如果Toolbar內還有空間，便會將這個item放到Toolbar內*/
        menu.add(0,4,4,"外部選項").setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
        return super.onCreateOptionsMenu(menu);
    }
    /**此處為設置點擊事件*/
    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        /**取得Item的ItemId，判斷點擊到哪個元件*/
        switch (item.getItemId()){
            case 0:
                Toast.makeText(this, "選一", Toast.LENGTH_SHORT).show();
                break;
            case 1:
                Toast.makeText(this, "選二", Toast.LENGTH_SHORT).show();
                break;
            case 2:
                Toast.makeText(this, "選三", Toast.LENGTH_SHORT).show();
                break;
            case 3:
                Toast.makeText(this, "選帶ICON的Item", Toast.LENGTH_SHORT).show();
                break;
            case 4:
                Toast.makeText(this, "選在外面的", Toast.LENGTH_SHORT).show();
                break;

        }
        return super.onOptionsItemSelected(item);
    }
}

好了，看完後；就來一步一步說明吧！

3-1.Toolbar綁定給SupportActionBar

其實也就兩行的事兒(笑)

就是這兩行

/**初始化Toolbar*/
Toolbar toolbar = findViewById(R.id.toolbar);
/**將Toolbar綁定到setSupportActionBar*/
setSupportActionBar(toolbar);

setSupportActionBar是只說讓指定的Toolbar綁定給ActionBar，讓接下來的操作都可以用ActionBar的操作方法使用

3-2.設置Toolbar裡面的內容

接著就是設置裡面的控件

如下

/**設置大標題*/
        getSupportActionBar().setTitle("主標題");
        /**設置大標題字體顏色*/
        toolbar.setTitleTextColor(Color.WHITE);
        /**設置副標題*/
        toolbar.setSubtitle("副標題");
        /**設置副標題字體顏色*/
        toolbar.setSubtitleTextColor(Color.WHITE);
        /**設置標題前方的Icon圖樣*/
        toolbar.setNavigationIcon(getDrawable(R.drawable.ic_baseline_arrow_back_ios_24));
        /**設置前方Icon與Title之距離為0(預設的很遠...)*/
        toolbar.setContentInsetStartWithNavigation(0);

        /**設置Icon圖樣的點擊事件*/
        toolbar.setNavigationOnClickListener(v->{
            Toast.makeText(this, "結束", Toast.LENGTH_SHORT).show();
        });
//        toolbar.inflateMenu(請自己在menu設置一個xml檔案);
//        如果想使用xml Layout檔案，請去建一個吧～

每一行的重點在標註都有寫了，請自行參照著看

最後Icon的點擊事件，通常都會伴隨著finish()使用，用以結束畫面

再來是Menu內容設置

像是這個

Screenshot_20200802-125339_ToolbarDemo

這時，請在Activity內設複寫onCreateOptionsMenu

截圖 2020-08-02 下午1.00.56

然後加入以下內容

/**程式中新增MenuItem選項*/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    /**itemId為稍後判斷點擊事件要用的*/
    menu.add(0,0,0,"第一選項");
    menu.add(0,1,1,"第二選項");
    menu.add(0,2,2,"第三選項");
    menu.add(0,3,3,menuIconWithText(getDrawable(R.drawable.ic_baseline_star_24),"帶ICON選項"));
    /**setShowAsAction預設為NEVER
     *MenuItem.SHOW_AS_ACTION_IF_ROOM 為如果Toolbar內還有空間，便會將這個item放到Toolbar內*/
    menu.add(0,4,4,"外部選項").setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
    return super.onCreateOptionsMenu(menu);
}

/**使選項內Icon與文字並存*/
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;
}

這邊特別補充一下

其實我的編輯器中很貼心的幫我標註了每個項目的意義

截圖 2020-08-02 下午1.11.13

這邊注意⚠️

itemId的部分會決定稍後的點擊事件辨識，請注意好位置喔！

再來還有個要點

就是這行

menu.add(0,4,4,"外部選項").setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);

一般來說，ShowAsAction預設都是MenuItem.NEVER

其意義在於每個Menu選項都會預設給彈出來的視窗

但如果你設定為MenuItem.SHOW_AS_ACTION_IF_ROOM

那麼，控件如果在Toolbar內還有空間，控件就會被放在Toolbar上面

3-3.設置控件點擊事件

先看程式

/**此處為設置點擊事件*/
@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
    /**取得Item的ItemId，判斷點擊到哪個元件*/
    switch (item.getItemId()){
        case 0:
            Toast.makeText(this, "選一", Toast.LENGTH_SHORT).show();
            break;
        case 1:
            Toast.makeText(this, "選二", Toast.LENGTH_SHORT).show();
            break;
        case 2:
            Toast.makeText(this, "選三", Toast.LENGTH_SHORT).show();
            break;
        case 3:
            Toast.makeText(this, "選帶ICON的Item", Toast.LENGTH_SHORT).show();
            break;
        case 4:
            Toast.makeText(this, "選在外面的", Toast.LENGTH_SHORT).show();
            break;

    }
    return super.onOptionsItemSelected(item);
}

哈哈，根本沒啥好補充的(´・＿・`)

不過這樣一來，這邊的內容就跟前面的內容吻合了，是吧！( ﾟДﾟ)b

結語

Toolbar算是我每次遇到都還得重新查詢的東西，其實挺煩的QQ

之前都一直覺得只有有再想到就要來寫...然後就一直拖XD

Toolbar控件作為Android開發中的基本元件之一，幾乎每個APP都有出現

其操作說難也不難，說簡單也是挺不簡單的

其實Toolbar還有很多很多眉眉角角，詳細的只能看你找資料的功力囉:D

那今天的文章到這，掰！

thank-33014588

碼農日常

碼農日常大小事

碼農日常發表在痞客邦留言(2) 人氣()

E-mail轉寄

碼農日常大小事

認真打好每一篇文章，認真分享程序猿每一件大小事；走過晃過依然滿載而歸

Hello