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>
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>
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>
注: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>
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>
注: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>
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>
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; } }
注:1.menu下的toolbar.xml是在Activity中代码加载的。
2.toolbar要有效果,需在manifests中指定一个不带ActionBar的主题,如Theme.AppCompat.NoActionBar。
3.NavigationView的setCheckedItem()设置第一个为默认选中,
4.NavigationView的setNavigationItemSelectedListener()方法是来设置菜单项选中事件的监听器。
5.onCreateOptionsMenu方法是用来设置menu下的toolbar.xml