• Toolbar+DrawerLayout+NavigationView的使用


    http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0303/2522.html(转载)

    Toolbar介绍

    ActionBar由于其设计的原因,被限定只能位于活动的顶部。从而不能实现一些Material Design的效果,因此官方现在已经不再建议使用Actionbar了。Toolbar的强大之处在于,它不仅继承了Actionbar的所有功能,而且灵活性很高,可以配合其他控件来完成一些MaterialDesign的效果。

    DrawerLayout介绍

    DrawerLayout是在Slidingmenu出现之后的产物。

    NavigationView介绍

    NavigationView是Design Support库中提供的一个控件,因此使用时需要把这个库引入到项目中才行。

    打开app/build.gradle文件,在dependencies闭包中添加如下内容

    compile 'com.android.support:design:24.2.1'
    compile 'de.hdodenhof:circleimageview:2.1.0'

     第一行是Design Support库,第二行是一个开源项目CircleImageView,该项目可用来轻松实现图片原型化的功能,它的项目地址是https://github.com/hdodenhof/CircleImageView

    1.toolbar.xml

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <android.support.v7.widget.Toolbar
     3     xmlns:android="http://schemas.android.com/apk/res/android"
     4     xmlns:app="http://schemas.android.com/apk/res-auto"
     5     android:id="@+id/toolbar_custom"
     6     android:layout_width="match_parent"
     7     android:layout_height="?attr/actionBarSize"
     8     android:background="?attr/colorPrimary"
     9     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    10     app:popupTheme="@style/Theme.AppCompat.Light"
    11     >
    12 </android.support.v7.widget.Toolbar>
    View Code

    menu文件夹下的toolbar.xml

    <?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/other"
        android:icon="@drawable/other"
        android:title="Other"
        app:showAsAction="always"
        >
        <!-- item包含menu表示该menu是item下的子菜单 -->
        <menu>
            <!-- 将group中的菜单项放于一个组里面 -->
            <group>
                <item android:id="@+id/toolbar_r_1"
                    android:title="吃饭"
                    android:icon="@drawable/eat"
                    app:showAsAction="ifRoom"
                    />
                <item android:id="@+id/toolbar_r_2"
                    android:title="睡觉"
                    android:icon="@drawable/sleep"
                    app:showAsAction="ifRoom"
                    />
                <item android:id="@+id/toolbar_r_3"
                    android:title="打豆豆"
                    android:icon="@drawable/dadoudou"
                    app:showAsAction="ifRoom"
                    />
            </group>
        </menu>
    </item>
    </menu>
    View Code

    2.开始使用NavigationView之前需要准备menu和headerLayout

    menu文件夹下新建Menu resource file,nav_menu.xml

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        <group android:checkableBehavior="single">
            <item
                android:id="@+id/nav_peach"
                android:icon="@drawable/peach"
                android:title="桃子"/>
            <item
                android:id="@+id/nav_banana"
                android:icon="@drawable/banana"
                android:title="香蕉"/>
            <item
                android:id="@+id/nav_apple"
                android:icon="@drawable/apple"
                android:title="苹果"/>
            <item
                android:id="@+id/nav_pear"
                android:icon="@drawable/pear"
                android:title="梨子"/>
        </group>
    </menu>
    View Code

    注:checkableBehavior指定为single表示组中的所有菜单项只能单选

    需要准备headerLayout,layout下新建资源文件nav_header.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="180dp"
        android:padding="10dp"
        android:background="?attr/colorPrimary"
        >
        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/icon_image"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@drawable/username"
            android:layout_centerInParent="true"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="小李飞刀"
            android:textColor="#FFF"
            android:layout_centerInParent="true"
            android:layout_below="@id/icon_image"
            android:paddingTop="20dp"
            android:textSize="14sp"/>
    </RelativeLayout>
    View Code

    3.drawerlayout.xml

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <!--主布局-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/iv_main"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/peach"
                android:layout_gravity="center"
                />
    
            <android.support.design.widget.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/fab"
                android:layout_marginTop="400dp"
                android:layout_marginRight="15dp"
                app:elevation="5dp"
                android:src="@drawable/icon_done"
                />
        </LinearLayout>
    
        <!--侧滑菜单-->
        <!--<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff"
            android:layout_gravity="left">
            <ListView
                android:id="@+id/lv_left_menu"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:divider="@null"
                android:text="DrawerLayout" />
        </LinearLayout>-->
    
        <!--侧滑菜单-->
        <!--<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff"
            android:layout_gravity="right">
            <ListView
                android:id="@+id/lv_right_menu"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:divider="@null"
                android:text="DrawerLayout" />
        </LinearLayout>-->
        <android.support.design.widget.NavigationView
            android:id="@+id/design_navigation_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            app:menu="@menu/nav_menu"
            app:headerLayout="@layout/nav_header"
            >
        </android.support.design.widget.NavigationView>
    </android.support.v4.widget.DrawerLayout>
    View Code

    注:app:menu设定自己写好的menu文件(nav_menu.xml)

      app:headerLayout设定写好的headerLayout文件(nav_header.xml)

    4.实现的activity_main.xml

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     3     xmlns:tools="http://schemas.android.com/tools"
     4     android:id="@+id/activity_main"
     5     android:layout_width="match_parent"
     6     android:layout_height="match_parent"
     7     android:orientation="vertical"
     8     tools:context="com.example.rgd.mysuperapp.MainActivity">
     9     <!--toolbar-->
    10     <include layout="@layout/custom_toolbar"/>
    11     <!--DrawerLayout-->
    12     <include layout="@layout/custom_drawerlayout"/>
    13 </LinearLayout>
    View Code

    5.如果对Toolbar添加多个Action,则new menu-->toolbar.xml

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <menu xmlns:android="http://schemas.android.com/apk/res/android"
     3     xmlns:app="http://schemas.android.com/apk/res-auto">
     4     <item
     5         android:id="@+id/logout"
     6         android:icon="@drawable/ic_logout"
     7         android:title="Logout"
     8         app:showAsAction="always"
     9         />
    10 </menu>
    View Code

    6.完善的Java代码MainActivity

    package com.example.rgd.mysuperapp;
    
    import android.os.Bundle;
    import android.support.annotation.NonNull;
    import android.support.design.widget.FloatingActionButton;
    import android.support.design.widget.NavigationView;
    import android.support.design.widget.Snackbar;
    import android.support.v4.view.GravityCompat;
    import android.support.v4.widget.DrawerLayout;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.Toolbar;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.View;
    import android.widget.ImageView;
    import android.widget.ListView;
    import android.widget.Toast;
    
    import static com.example.rgd.mysuperapp.R.menu.toolbar;
    
    public class MainActivity extends AppCompatActivity {
    
        private DrawerLayout drawer_layout;
        private ImageView iv_main;
        private ListView lv_left_menu;
        private String[] lvs={"List1","List2","List3"};
        private NavigationView design_navigation_view;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            iv_main = (ImageView) findViewById(R.id.iv_main);
            design_navigation_view = (NavigationView) findViewById(R.id.design_navigation_view);
            drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_custom);
            setSupportActionBar(toolbar);
            getSupportActionBar().setHomeButtonEnabled(true); //设置返回键点击
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);//是否隐藏返回键。  
            android.support.v7.app.ActionBar actionBar = getSupportActionBar();
            if(actionBar!=null){
                //修改默认的Toolbar图标,Menu
                actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
            }
    
            //menu的点击事件
            design_navigation_view.setCheckedItem(R.id.nav_apple);
            design_navigation_view.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    drawer_layout.closeDrawers();
                    return true;
                }
            });
        }
    
        public boolean onCreateOptionsMenu(Menu menu){
            getMenuInflater().inflate(toolbar,menu);
            return true;
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
    
            switch (item.getItemId()){
                case R.id.logout:
                    Toast.makeText(this, "你点了注销", Toast.LENGTH_SHORT).show();
                    break;
                case android.R.id.home:
                    drawer_layout.openDrawer(GravityCompat.START);
                    break;
                default:
                    break;
            }
            return true;
        }
    }
            
    View Code

    注:1.menu下的toolbar.xml是在Activity中代码加载的。

      2.toolbar要有效果,需在manifests中指定一个不带ActionBar的主题,如Theme.AppCompat.NoActionBar。

      3.NavigationView的setCheckedItem()设置第一个为默认选中,

      4.NavigationView的setNavigationItemSelectedListener()方法是来设置菜单项选中事件的监听器。

      5.onCreateOptionsMenu方法是用来设置menu下的toolbar.xml

    原创作品,转载请注明出处!
  • 相关阅读:
    回调函数(C语言)
    main函数的参数(一)
    术语,概念
    [LeetCode] Invert Binary Tree
    关于overload和override
    第一个只出现一次的字符
    Manacher算法----最长回文子串
    C++对象模型
    回文判断
    字符串转换成整数
  • 原文地址:https://www.cnblogs.com/yidijimao/p/6397826.html
Copyright © 2020-2023  润新知