android 侧滑栏教程,Android侧滑栏的实现【高度撑满屏幕】

使用ToolBar,DrawerLayout,NavigationView实现侧滑栏

image

image

如果不能使用DrawerLayout请在Projec Structure里面添加依赖项：

image

image

官方推荐把DrawerLayout放在根布局，避免覆盖点击事件。看以看到main_activity.xml由两部分组成，main_layout，NavigationView.其中NavigationView的layout_gravity=“start”,表示在屏幕左侧。

app:headerLayout表示侧滑栏的头部部分，我放的是一个headlayout,里面是一张图片。

app:menu表示侧滑栏里面的菜单项，我放的是left_menu.

image

由Toobar【作为工具栏】，FrameLayout【当选择侧滑栏的按钮时，替换FrameLayout里面的Fragment】组成。

headlayout.xml: 里面放了一张图片作为侧滑栏，顶部的图片

image

left_menu.xml Navigation里面用 app:menu="left_menu"来引用: 这个是菜单项

image

接下来是java代码：

main_activity.java:

package com.example.copylooklook;

import android.content.res.Configuration;

import android.support.annotation.NonNull;

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.os.Bundle;

import android.support.v7.widget.Toolbar;

import android.util.Log;

import android.view.MenuItem;

import android.view.View;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

private DrawerLayout mDrawerLayout;

private Toolbar mToolbar;

private ActionBarDrawerToggle mDrawerToggle;

private NavigationView mNavigationView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mToolbar = findViewById(R.id.toolbar); //main_layout里面的toolbar

setSupportActionBar(mToolbar); //将toolbar设置到工具栏

mNavigationView = findViewById(R.id.nav_view);

mDrawerLayout = findViewById(R.id.drawer_layout); //将toolbar与Drawerlayout绑定，实现点击toolbar图标打开它

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,mToolbar,R.string.ic_open,R.string.ic_close){

@Override //可参考官方教程 ：

https://developer.android.com/training/implementing-navigation/nav-drawer.html?hl=zh-cn

public void onDrawerClosed(View drawerView) {

super.onDrawerClosed(drawerView);

Log.d("mainactivity", "onDrawerClosed: ");

}

@Override

public void onDrawerOpened(View drawerView) {

super.onDrawerOpened(drawerView);

Log.d("Mainactivity", "onDrawerOpened: ");

}

};

mDrawerLayout.setDrawerListener(mDrawerToggle); //===这里真正进行将DrawerLayout与ToolBar绑定

mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

@Override //NavigationView的点击侦听，这里监听了菜单的点击

public boolean onNavigationItemSelected(@NonNull MenuItem item) {

updateItemCheckedView();

switch (item.getItemId()){

case R.id.zhihu:

Toast.makeText(MainActivity.this,"点击了知乎",Toast.LENGTH_SHORT).show();

item.setChecked(true);

break;

case R.id.wangyii:

Toast.makeText(MainActivity.this,"点击了网易",Toast.LENGTH_SHORT).show();

item.setChecked(true);

break;

case R.id.meiri:

Toast.makeText(MainActivity.this,"点击了每日",Toast.LENGTH_SHORT).show();

item.setChecked(true);

break;

}

return true;

}

});

}

@Override

protected void onPostCreate(Bundle savedInstanceState) {

super.onPostCreate(savedInstanceState);

// Sync the toggle state after onRestoreInstanceState has occurred.

mDrawerToggle.syncState();

}

@Override

public void onConfigurationChanged(Configuration newConfig) {

super.onConfigurationChanged(newConfig);

mDrawerToggle.onConfigurationChanged(newConfig);

}

public boolean onOptionsItemSelected(MenuItem item) {

// Pass the event to ActionBarDrawerToggle, if it returns

// true, then it has handled the app icon touch event

if (mDrawerToggle.onOptionsItemSelected(item)) {

return true;

}

// Handle your other action bar items...

return super.onOptionsItemSelected(item);

}

private void updateItemCheckedView(){ //当点击侧滑栏选项时，将其余

for(int i = 0; i < 3; i ++){ // 选项设置成未选中

mNavigationView.getMenu().getItem(i).setChecked(false);

}

}

}

此时，虽然有侧滑栏，但是侧滑栏的高度不是撑满屏幕的：

因此还要更改主题风格：

image