二、Toolbar

作者: Serenity那年 | 来源:发表于2017-06-01 11:57 被阅读77次
    一、Toolbar类的继承关系:
    Toolbar类的继承关系.png
    二、Toolbar中主要功能的说明
    主要功能展示
    三、Toolbar中主要属性的说明

    使用Toolbar控件时,必须在根布局中自定义nameSpace,而不是使用android,如果使用了android会无效,比如xmlns:wl = "http://schemas.android.com/apk/res-auto",使用时:wl:navigationIcon = "@mipmap/ic_launcher"
    常用属性如下:

    • 1.wl:navigationIcon 用来设置最左边的导航按钮,一般为返回按钮等;
    • 2.wl:logo 用来设置logo图标的;
    • 3.wl:title 用来设置主标题;
    • 4.wl:subtitle 设置子标题,在主标题下面;
    • 5.wl:titleTextColor 设置主标题的字体颜色;
    • 6.wl:subtitleTextColor 设置子标题的字体颜色;
    • 7.wl:titleTextAppearance 设置标题相关属性,如:字体,颜色,大小;通常refrence一个style;
    • 8.wl:subtitleTextAppearance 设置子标题相关属性;
    • 9.android:background 设置Toolbar整体的背景;注意:这里使用的命名空间是android;
    • 10.wl:theme 设置Toolbar主题样式,用来设置溢出菜单重的字体颜色、大小,设置溢出菜单显示的图标,设置显示在Toolbar上字体颜色;详情见下面customStyle.xml文件设置;
    • 11.wl:popupTheme 用来设置overflow menu的主题样式;
    四、Toolbar中主使用说明
    • 1.具体xml中的使用
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        //这里必须配置自定义命名空间
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.androidwanga.serenitynanian.serenityproject.MainActivity">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:elevation="4dp"
            app:title="@string/app_name"
            app:subtitle="subtitle"
            //用来配置溢出菜单中的属性
            app:theme="@style/ToolBarTheme"
            app:navigationIcon="@mipmap/ic_launcher"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            >
            //TODO这里用来放子控件
             <TextView
                android:layout_width="wrap_content"
                android:text="自定义View"
                android:layout_height="wrap_content" />
        </android.support.v7.widget.Toolbar>
    </LinearLayout>
    
    • 2.toolbar中使用theme来配置溢出菜单中的属性
     <!-- 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="ToolBarTheme" parent="AlertDialog.AppCompat.Light">
            <!--设置toolbar溢出菜单的文字颜色-->
            <item name="android:textColor">@color/colorAccent</item>
            <!--设置toolbar溢出菜单的文字大小-->
            <item name="android:textSize">20sp</item>
            <!--设置显示在toolbar上菜单文字的颜色;网上说此处不能写命名空间android的,
    但是在实际的测试中,写不写效果都能出现-->
            <item name="actionMenuTextColor">#FFFFFF</item>
            <!--更换toolbar overFlow menu icon-->
            <item name="android:actionOverflowButtonStyle">@style/OverflowIcon</item>
        </style>
    
        <style name="OverflowIcon" parent="Widget.AppCompat.ActionBar.Solid">
            <item name="android:src">@mipmap/ic_launcher_round</item>
        </style>
    

    效果图如下:

    效果图.png
    五、Activity中的使用
     @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            mToolbar = (Toolbar) findViewById(R.id.toolbar);
            mToolbar.setTitle("woca");
            setSupportActionBar(mToolbar);
            //设置NavigationIcon的点击事件
            mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(MainActivity.this, "1", Toast.LENGTH_SHORT).show();
                }
            });
            mToolbar.setLogo(R.mipmap.ic_launcher_round);
            mToolbar.inflateMenu(R.menu.item_menu);
            //设置logo距离NavigationIcon的距离的
    //        mToolbar.setContentInsetStartWithNavigation(0);
            //设置overflow menu中的item监听
            mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem item) {
                    switch (item.getItemId()) {
                        case R.id.menu_one:
                            Toast.makeText(MainActivity.this, "one", Toast.LENGTH_SHORT).show();
                            break;
    //                    case R.id.menu_tow:
    //                        Toast.makeText(MainActivity.this, "two", Toast.LENGTH_SHORT).show();
    //                        break;
    //                    case R.id.menu_three:
    //                        Toast.makeText(MainActivity.this, "three", Toast.LENGTH_SHORT).show();
    //                        break;
                    }
                    return false;
                }
            });
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.item_menu,menu);
            return true;
        }
    

    github仓库

    相关内容:

    一、CoordinatorLayout的梳理与使用

    二、Toolbar的梳理与使用

    三、TextInputLayout的梳理与使用

    四、FloatingActionButton的梳理与使用

    五、Snackbar的梳理与使用

    六、CardView的梳理与使用

    七、BottomSheetDialog的梳理与使用

    八、TabLayout的梳理与使用

    相关文章

      网友评论

        本文标题:二、Toolbar

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