美文网首页
【Android】ToolBar使用浅谈

【Android】ToolBar使用浅谈

作者: QiYou | 来源:发表于2018-08-29 14:01 被阅读0次

    本人小白,本文只为记录,点点滴滴,一路成长。

    ToolBar的使用方式:

     <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:minHeight="?attr/actionBarSize" />
    

    效果:


    1.png

    带返回按钮的ToolBar:

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    

    效果:


    2.png

    带右侧按钮的ToolBar:
    1:在res下新建menu文件夹
    2:在menu下新建test_menu.xml

    <menu xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item
            android:icon="@mipmap/ic_launcher"
            android:id="@+id/tv_test"
            android:title="测试按钮" />
    
    </menu>
    

    3:在activity中实现

    @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.test_menu, menu);
            return true;
        }
    

    效果:


    4.png 3.png

    修改popupMenu样式:

      <style name="ToolBarPopupThem" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
            <!-- 设置popupMenu背景颜色-->
            <item name="android:colorBackground">@color/colorPrimary</item>
            <!--设置popupMenu弹出位置不覆盖toolbar -->
            <item name="overlapAnchor">false</item>
            <!-- 修改字体大小 -->
            <item name="android:textSize">15sp</item>
            <!-- 修改字体颜色 -->
            <item name="android:textColor">#fff</item>
        </style>
    

    在ToolBar的xml中添加:app:popupTheme="@style/ToolBarPopupThem"

    <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            app:popupTheme="@style/ToolBarPopupThem"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:minHeight="?attr/actionBarSize" />
    

    效果:


    5.png

    ps:其实还是有一点点覆盖在ToolBar上,暂时还没找到解决方法。

    既然popupMenu的字体和颜色可以修改,那ToolBar上的字体颜色是否可以修改?图标是不是也可以改?

    修改Toobar字体和图标颜色:

    在AndroidManifest.xml中找到:android:theme="@style/AppTheme"

     <application
                  ........
                  android:theme="@style/AppTheme">
    

    在AppTheme中添加一下代码:

    <style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
            <!-- 修改toolbar图标的颜色-->
            <item name="android:textColorSecondary">#ffffff</item>
            <!--修改toolbar文字颜色-->
            <item name="android:textColorPrimary">#ffffff</item>
     </style>
    

    效果:可以看到全部变成了白色


    6.png

    修改ToolBar左右图标:

    左边图标修改:

    toolbar.setNavigationIcon(android.R.drawable.ic_menu_delete);
    

    右边三个点修改:

    1:代码中修改:

    toolbar.setOverflowIcon(getResources().getDrawable(android.R.drawable.ic_menu_more));
    

    2:style中修改

     <style name="ToolbarOverflow" parent="@android:style/Widget.ActionButton.Overflow">
            <item name="android:src">@android:drawable/ic_notification_clear_all</item>
        </style>
    
    <style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
            ...
            <item name="actionOverflowButtonStyle">@style/ToolbarOverflow</item>
        </style>
    

    效果:


    7.png

    解决popupMenu中图标不显示:在activity实现该方法,具体原因不知,度娘提供。

    @SuppressLint("RestrictedApi")
        @Override
        protected boolean onPrepareOptionsPanel(View view, Menu menu) {
            if (menu != null) {
                if (menu.getClass() == MenuBuilder.class) {
                    try {
                        //利用反射获取私有方法
                        Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                        m.setAccessible(true);
                        m.invoke(menu, true);
                    } catch (Exception e) {
                        e.printStackTrace();
                        Log.e(TAG, e.toString());
                    }
                }
            }
            return super.onPrepareOptionsPanel(view, menu);
        }
    

    效果:


    8.png

    自定义ToolBar:

     private void init(Context context) {
            mContext = context;
            mTitle = new TextView(context);
            Toolbar.LayoutParams lp = new Toolbar.LayoutParams(Toolbar.LayoutParams.WRAP_CONTENT, Toolbar.LayoutParams.WRAP_CONTENT);
            lp.gravity = Gravity.CENTER;
            mTitle.setLayoutParams(lp);
            this.addView(mTitle);
            this.setTitle("");
        }
    
     toolbar.setToolBarTitle("测试ToolBar");
            toolbar.setToolBarLeftIcon(getResources().getDrawable(android.R.drawable.ic_menu_close_clear_cancel));
            toolbar.setToolBarPopupThem(R.style.ToolBarPopupThem);
            toolbar.setToolBarRightIcon(getResources().getDrawable(android.R.drawable.ic_delete));
            toolbar.setToolBarTitleColor(Color.WHITE);
            toolbar.setToolBarTitleSize(20);
    

    效果:


    9.png

    源码:https://github.com/qylfzy/QToolBar

    相关文章

      网友评论

          本文标题:【Android】ToolBar使用浅谈

          本文链接:https://www.haomeiwen.com/subject/yqohwftx.html