Android Studio自带的Navigation Drawer主题撑满了整个界面的高度把ToolBar挡住了,很遗憾左上角那个炫酷的动态Icon看不见了。有兴趣的同学可以去创建一个project,什么都不用写,直接run就可以看到效果了。
如图,就是Android Studio自带的Navigation Drawer样式。
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
我们可以看到这是把ToolBar放在DrawerLayout主界面里的方式,所以会被NavigationView给遮挡住。
本文主要是重新编排DrawerLayout的位置,让ToolBar显示出来。
首先新建一个project,(注:最好选择Navigation Drawer Activity,External Library中该有的都有了),
否则会出现Error:(16) No resource identifier found for attribute ‘headerLayout’ in package ‘com.example.xxx’。当然出现这个错误也不要急,只要在build.gradle(Module:app)的compil后面再加上一条即可。
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.0.1'
compile 'com.android.support:design:25.0.1' //添加
testCompile 'junit:junit:4.12'
}
然后在activity_main.xml中布局,将DrawerLayout放在ToolBar下面
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<!--Toolbar-->
<include layout="@layout/custom_toolbar" />
<!--DrawerLayout-->
<include layout="@layout/custom_drawerlayout" />
</LinearLayout>
这里ToolBar过于简单就不讲了。
custom_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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start">
<!--========================主界面内容========================-->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Hello World!"
android:textSize="50sp"
android:textColor="#0A8F08"
android:gravity="center"/>
<!--========================侧边栏内容========================-->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:scrollbars="none"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/my_menu"/>
</android.support.v4.widget.DrawerLayout>
为了美观,这里还加了一个header。nav_header_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
app:srcCompat="@android:drawable/sym_def_app_icon" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:text="Android Studio"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android.studio@android.com" />
</LinearLayout>
header可以放个头像、个人信息、邮箱什么的,比如QQ就是头像、QQ等级和签名。
放置完header以后可以通过menu设置一个带图标的菜单栏,(动态添加的方式为 navigationView.getMenu().add();只是不知道如何添加Icon,如果有大神知道,请告知)。
以下是my_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_camera"
android:icon="@drawable/ic_menu_camera"
android:title="Camera" />
<item
android:id="@+id/nav_gallery"
android:icon="@drawable/ic_menu_gallery"
android:title="Gallery" />
<item
android:id="@+id/nav_slideshow"
android:icon="@drawable/ic_menu_slideshow"
android:title="Slideshow" />
<item
android:id="@+id/nav_manage"
android:icon="@drawable/ic_menu_manage"
android:title="Tools" />
</group>
<item android:title="Communicate">
<menu>
<item
android:id="@+id/nav_share"
android:icon="@drawable/ic_menu_share"
android:title="Share" />
<item
android:id="@+id/nav_send"
android:icon="@drawable/ic_menu_send"
android:title="Send" />
</menu>
</item>
</menu>
到这里,布局差不多完成了,不过还有一点要记住,那就是style里面的主题得选择NoActionBar,因为我们有ToolBar了,不再需要ActionBar。(尝试了一下,如果不改成NoActionBar,App会崩溃。)
最后来讲讲Activity。
MAinActivity.java
package com.example.zhan.navigationdraw2_demo;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.internal.NavigationMenuView;
import android.support.v4.view.GravityCompat;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
//声明相关变量
public Toolbar toolbar;
public DrawerLayout mDrawerLayout;
public ActionBarDrawerToggle mDrawerToggle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViews(); //获取控件
toolbar.setTitle("Toolbar");//设置Toolbar标题
toolbar.setTitleTextColor(Color.parseColor("#FFFFFFFF")); //设置标题颜色
setSupportActionBar(toolbar); //绑定
//创建返回键,并实现打开关/闭监听
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
};
mDrawerToggle.syncState(); //Synchronize the state of the drawer indicator/affordance with the linked DrawerLayout
mDrawerLayout.addDrawerListener(mDrawerToggle); //监听DrawerLayout
}
private void findViews() {
toolbar = (Toolbar) findViewById(R.id.tl_custom);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
// navigationView.setItemIconTintList(null); //设置图标为本色
disableNavigationViewScrollbars(navigationView); //设置NavigationView滚动条隐藏
}
@Override
public void onBackPressed() {
if (mDrawerLayout.isDrawerOpen(GravityCompat.START)) {
mDrawerLayout.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
@Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();
if (id == R.id.nav_camera) {
// Handle the camera action
} else if (id == R.id.nav_gallery) {
} else if (id == R.id.nav_slideshow) {
} else if (id == R.id.nav_manage) {
} else if (id == R.id.nav_share) {
} else if (id == R.id.nav_send) {
}
mDrawerLayout.closeDrawer(GravityCompat.START);
return true;
}
private void disableNavigationViewScrollbars(NavigationView navigationView) {
if (navigationView != null) {
NavigationMenuView navigationMenuView = (NavigationMenuView) navigationView.getChildAt(0);
if (navigationMenuView != null) {
navigationMenuView.setVerticalScrollBarEnabled(false);
}
}
}
}
其实Activity的工作很简单,就是监听ToolBar的点击,点击后展开侧边栏,侧边栏展开过程中ToolBar左侧Icon动态变化以及点击主界面侧边栏收回等功能无需复杂代码实现。再一个监听侧边栏的点击(点击后收回)和选中情况(选中不同的item执行不同的事件)。
新增圆形头像