toolbar和标题和menu汇总

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/minwenping/article/details/78429819

第一个问题: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显示问题

扫描二维码关注公众号,回复: 3935997 查看本文章
@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);
    }

修改之后的效果如下:
这里写图片描述
==================未完待续====================

猜你喜欢

转载自blog.csdn.net/minwenping/article/details/78429819