1. 程式人生 > >toolbar和標題和menu彙總

toolbar和標題和menu彙總

第一個問題:toolbar的標題欄居中問題,這裡使用的是textview作為標題欄,因為這樣很好控制,有的比如標題欄中是個小載入進度條,如果用toolbar的titile就不好控制了,下面是佈局程式碼


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        app:navigationIcon="@drawable/ic_arrow_back_black_24dp"
        android:background="@color/default_color"
        android:layout_width="match_parent"
android:layout_height="wrap_content"> <TextView android:id="@+id/tv_title" android:background="@color/default_color" android:layout_gravity="center" android:gravity="center" android:text="我是標題" android:textSize="24sp"
android:textColor="@color/colorAccent" android:layout_width="wrap_content" android:layout_height="match_parent" /> </android.support.v7.widget.Toolbar>

執行之後的效果:
這裡寫圖片描述

這個時候有兩個問題:1.toolbar自帶的title就顯示出來了,2.自己的標題textview位置佈局中。

//隱藏預設的toolbar標題顯示
 ActionBar supportActionBar = getSupportActionBar();
        if
(supportActionBar!=null){ supportActionBar.setDisplayShowTitleEnabled(false); } //佈局設定監聽,強制要求居中 tvTitle.addOnLayoutChangeListener(new View.OnLayoutChangeListener() { @Override public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) { int width = right - left;//長度 int offset = widthPixels / 2 - (left + width / 2); tvTitle.layout(left + offset, top, right + offset, bottom); } });

修改之後的後果如下圖:
這裡寫圖片描述
自定義的標題欄終於居中了。

第二個問題:如果toolbar上的menu過多時,會摺疊起來,但是這個摺疊的圖示預設顏色如何修改。見下圖toolbar右邊黑色三個點。
這裡寫圖片描述

//設定摺疊icon,R.drawable.是紅色的三個點,替換掉系統預設的黑色的
//因為是svg替換,4.4及以下可能不支援,建議用png
        Drawable drawable= ContextCompat.getDrawable(this,R.drawable.ic_more_vert_black_24dp);
        toolbar.setOverflowIcon(drawable);

這裡寫圖片描述

第三個問題:摺疊之後的overMenu彈出的window遮蓋了toolbar,使用者體驗不好,如下圖:
這裡寫圖片描述


    <style name="CustomOverFlowStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
        <!-- 是否覆蓋錨點,預設為true,即蓋住Toolbar -->
        <item name="overlapAnchor">false</item>
        <item name="android:dropDownWidth">wrap_content</item>
        <item name="android:animationDuration">600</item>
        <!-- 彈出層背景顏色 -->
        <item name="android:popupBackground">@android:color/darker_gray</item>
        <!-- 彈出層垂直方向上的偏移,即在豎直方向上距離Toolbar的距離,值為負則會蓋住Toolbar -->
        <!--為什麼在7.0上這個設定無效-->
        <item name="android:dropDownVerticalOffset">10dp</item>
        <item name="android:dropDownAnchor">@id/toolbar</item>
        <!-- 彈出層水平方向上的偏移,即距離螢幕左邊的距離,負值會導致右邊出現空隙 -->
        <item name="android:dropDownHorizontalOffset">-4dp</item>
        <item name="android:scrollbars">none</item>
        <!-- 設定彈出選單文字顏色 -->
        <item name="android:textColor">@color/default_color</item>
        <item name="android:shadowColor">@android:color/darker_gray</item>
 //並在佈局檔案新增popTheme
  <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        app:navigationIcon="@drawable/ic_arrow_back_black_24dp"
        android:background="@color/default_color"
        android:layout_width="match_parent"
        app:popupTheme="@style/CustomOverFlowStyle"
        android:layout_height="wrap_content">

這裡寫圖片描述
這樣就美觀了許多。

第四個問題:動態的隱藏toolbar上的指定menu
有時候幾個fragment切換時,需要隱藏toolbar上指定的menu

  button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Menu menu = toolbar.getMenu();
                MenuItem item1 = menu.getItem(0);
                item1.setVisible(false);
            }
        });

這裡寫圖片描述

第五個問題:摺疊menu的icon顯示問題

@Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        //menu建立之前,反射設定顯示圖示
        if (menu != null) {
            if (menu.getClass().getSimpleName().equalsIgnoreCase("MenuBuilder")) {
                try {
                    Method method = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    method.setAccessible(true);
                    method.invoke(menu, true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        return super.onPrepareOptionsMenu(menu);
    }

修改之後的效果如下:
這裡寫圖片描述
==================未完待續====================