zoukankan      html  css  js  c++  java
  • ToolBar+Drawable实现一个好用的侧滑栏(侧边栏)和工具栏

    先参考下ToolBar的使用和DrawableLayout的使用;

    1、主界面布局,主要结构包含一个ToolBar和一个DrawableLayout,DrawableLayout里面有左侧边栏布局和主界面布局(注意ToolBar需要设置Theme,不然菜单项有些设置不起作用):

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/MainToolbarMenuStyle">
        </android.support.v7.widget.Toolbar>
    
        <android.support.v4.widget.DrawerLayout
            android:id="@+id/drawablelayout_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <!--左侧的布局-->
            <RelativeLayout
                android:id="@+id/layout_left"
                android:layout_width="200dp"
                android:layout_height="match_parent"
                android:layout_gravity="left"
                android:background="@android:color/white">
                <RelativeLayout
                    android:id="@+id/layout_user"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="10dp"
                    android:layout_centerHorizontal="true">
                    <ImageView
                        android:id="@+id/iv_user_head"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:src="@drawable/user_demo"
                        android:layout_centerHorizontal="true"/>
                    <TextView
                        android:id="@+id/tv_user_nickname"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/iv_user_head"
                        android:text="登录"
                        android:layout_centerHorizontal="true"/>
                </RelativeLayout>
            </RelativeLayout>
    
        </android.support.v4.widget.DrawerLayout>
    
    </LinearLayout>

    2、创建一个menu文件,里面只包含“搜索”项和“扫一扫”项:

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
        <item
            android:id="@+id/toolbar_search"
            android:icon="@drawable/search"
            android:orderInCategory="1"
            app:showAsAction="always"/>
    
        <item
            android:id="@+id/toolbar_scan"
            android:icon="@drawable/scan"
            android:orderInCategory="2"
            app:showAsAction="never"
            android:title="@string/toolbar_scan"/>
    
    </menu>

    效果:

    3、style中需要添加工具栏的样式:

    <!--主界面标题栏,里面三项分别是菜单样式、右边溢出按键样式、左边箭头样式-->
    <style name="MainActivityTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="actionOverflowMenuStyle">@style/MainToolbarMenuStyle</item>
    <!--<item name="actionOverflowButtonStyle">@style/MainOverflowButtonStyle</item>-->
    <item name="drawerArrowStyle">@style/MainDrawerArrowToggle</item>
    </style>

    <!--自定义toolbar菜单样式-->
    <style name="MainToolbarMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
    <!-- 是否覆盖锚点,默认为true,即盖住Toolbar -->
    <item name="overlapAnchor">false</item>
    <!-- 弹出层背景颜色 -->
    <item name="android:popupBackground">@color/toolbar_background</item>
    <!-- 弹出层垂直方向上的偏移,负值会覆盖toolbar -->
    <item name="android:dropDownVerticalOffset">5dp</item>
    <!-- 弹出层水平方向上的偏移,即距离屏幕左边的距离,负值会导致右边出现空隙 -->
    <item name="android:dropDownHorizontalOffset">-2dp</item>
    <!--文字颜色-->
    <item name="android:textColor">@color/white</item>
    <!-- 溢出菜单(三点)图标颜色-->
    <item name="colorControlNormal">@android:color/white</item>
    </style>

    //设置三点图标,需要取消注释上面“主界面标题栏”的代码
    <style name="MainOverflowButtonStyle" parent="@android:style/Widget.ActionButton.Overflow">
    <item name="android:src">@drawable/more</item>
    </style>

    //设置左边箭头的图标颜色
    <style name="MainDrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@android:color/white</item>
    </style>

    4、minifest中对主界面进行绑定样式:

    <activity android:name=".MainActivity" android:theme="@style/MainActivityTheme"/>

    5、java代码中:

        private Toolbar toolbar_main;
    private DrawerLayout drawerlayout_main;
        private void InitView(){
            toolbar_main = findViewById(R.id.toolbar_main);
            drawerlayout_main = findViewById(R.id.drawablelayout_main);
        }
    
        private void setToolBar(){//使用ToolBar替换系统自带的ActionBar
            setSupportActionBar(toolbar_main);
            //设置返回图标
    //         toolbar_main.setNavigationIcon(R.mipmap.back);
            getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            //设置标题文本
            toolbar_main.setTitle(R.string.app_name);
            //标题文本颜色
            toolbar_main.setTitleTextColor(Color.WHITE);
            //设置logo图标
    //        toolbar_main.setLogo(R.drawable.toolbar_icon);
            //副标题
    //        main_head.setSubtitle("副标题");
            //工具栏背景
            toolbar_main.setBackgroundColor(Color.BLUE);//创建返回键,并实现打开关/闭监听
            ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this,drawerlayout_main, toolbar_main, R.string.app_name, R.string.app_name) {
                @Override
                public void onDrawerOpened(View drawerView) {
                    super.onDrawerOpened(drawerView);
                }
                @Override
                public void onDrawerClosed(View drawerView) {
                    super.onDrawerClosed(drawerView);
                }
            };
            mDrawerToggle.syncState();
            drawerlayout_main.setDrawerListener(mDrawerToggle);
        //菜单项监听器 toolbar_main.setOnMenuItemClickListener(
    new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem menuItem) { String msg = ""; switch (menuItem.getItemId()) { case R.id.toolbar_search: msg += "search"; break; case R.id.toolbar_scan: msg += "scan"; break; } if(!msg.equals("")) { myApp.MakeToast(msg); } return true; } }); } //绑定菜单 @Override public boolean onCreateOptionsMenu(Menu menu) { // 绑定toobar跟menu getMenuInflater().inflate(R.menu.menu_toolbar_main, menu); return true; } //要重写onPrepareOptionsPanel方法才可以显示出图标 @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(); } } } return super.onPrepareOptionsPanel(view, menu); }

    PS:手动关闭侧边栏的代码:

    drawerlayout_main.closeDrawer(Gravity.LEFT);

    效果如下:

  • 相关阅读:
    贪心例题
    第十六周总结
    软件工程个人课程总结
    冲刺二十一天
    浅谈async/await
    浅谈设计模式的六大原则
    dotnetcore配置框架简介
    这一次,终于弄懂了协变和逆变
    科个普:进程、线程、并发、并行
    五分钟了解Semaphore
  • 原文地址:https://www.cnblogs.com/zhaozilongcjiajia/p/10695719.html
Copyright © 2011-2022 走看看