Navigation Drawer的基本用法(SlidingMenu的替代品)
来源:互联网 发布:大二申请国外大学知乎 编辑:程序博客网 时间:2024/05/20 05:27
Navigation Drawer是谷歌用来代替SlidingMenu的,其使用方法远远比SlidingMenu要简单的多。
今天在这里将Navigation Drawerde 使用方法详细的介绍给大家。博客很详细大家认真读争取一步到位。
1,第一步,万年不变添加依赖。Navigation Drawer是属于design包的。
compile 'com.android.support:design:25.3.1'
记住其同样依赖于v4包,不过如果你有v7包也因该是可以的。如果不可以要同时导入两个包的话一定记得两个包要用同一版本。不然的话就gg了。
2.干货来了,本文基于AS开发,EC回避。如果都到了这个时候了你还在用ec也不用看什么Navigation Drawer了还是好好去研究一下SlidingMenu吧。这种新出的东西ec弄不了。
我们可以在新建项目的时候选择Navigation Drawer Activity。
也可以在新建Activity 的时候选择Navigation Drawer Activity,总之一定要选这个。
在新建完成的时候进入.java主文件会看到如下代码:
public class NavigationDrawerActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_navigation_drawer); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) .setAction("Action", null).show(); } }); DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); ActionBarDrawerToggle toggle = new ActionBarDrawerToggle( this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close); drawer.setDrawerListener(toggle); toggle.syncState(); NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view); navigationView.setNavigationItemSelectedListener(this); } @Override public void onBackPressed() { DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); if (drawer.isDrawerOpen(GravityCompat.START)) { drawer.closeDrawer(GravityCompat.START); } else { super.onBackPressed(); } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.navigation_drawer, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } @SuppressWarnings("StatementWithEmptyBody") @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) { } DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); drawer.closeDrawer(GravityCompat.START); return true; }}
其中这部分是没有用的,可以删掉。
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) .setAction("Action", null).show(); } });
然后将
drawer.setDrawerListener(toggle);
换成
drawer.addDrawerListener(toggle);
然后将app_bar_main中的以下部分删除
<android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin" app:srcCompat="@android:drawable/ic_dialog_email" />
删除部分都是design包中的其他内容与本次讲解知识点无关。
3.现在我们来讲解以上代码的含义
ToolBar的具体知识点就不说了,不会的自己先去看toolbar,先说这部分。
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); ActionBarDrawerToggle toggle = new ActionBarDrawerToggle( this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close); drawer.addDrawerListener(toggle); toggle.syncState();
这里看似就是简单的标题栏设置,但是我们会发现Drawerlayout的对象在这里设置了一个监听。
而传入的是ActionBar的对象,这是因为这个ActionBar是一个实现了DeawerLayout监听接口的标题栏。
public class ActionBarDrawerToggle implements DrawerLayout.DrawerListener {...}
这里发个彩蛋,正常我们集成完这个框架之后如图所示:
下面的抽屉都是可点击的,官方都给我们预留出来了监听回调方法区,后面会讲。
但是绿色部分的头像和文字是不允许点击的,如果你们天真的认为我们findViewById(头像ID)在OnCreate方法里设置监听就错了,程序一经运行马上崩溃,那么我们应该怎么处理呢。
将此行代码中的toggle换成new DrawerLayout.Drawerlistener()
drawer.setDrawerListener(toggle);
然后万能快捷键实现他的方法
drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() { @Override public void onDrawerSlide(View drawerView, float slideOffset) { //抽屉滑动时回调 } @Override public void onDrawerOpened(View drawerView) { //抽屉打开后回调 } @Override public void onDrawerClosed(View drawerView) { //抽屉关闭后回调 } @Override public void onDrawerStateChanged(int newState) { //抽屉滑动状态改变时回调 switch (newState) { case DrawerLayout.STATE_DRAGGING: //拖动状态 break; case DrawerLayout.STATE_IDLE: //静止状态 break; case DrawerLayout.STATE_SETTLING: //设置状态 break; default: break; } }});
在onDrawerOpened方法中进行findViewById,然后设置监听。
这时的toggle.syncState();方法已经没有用了我们可以把他删除。
也可以在其上侧再加一行代码
drawer.setDrawerListener(toggle);
此行代码与以上代码并不冲突。还有 toggle.syncState();方法基本没有什么用。
4.接下来我们发现的这两行代码
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);navigationView.setNavigationItemSelectedListener(this);
是为抽屉按钮设置监听的,监听方法如下:
@SuppressWarnings("StatementWithEmptyBody") @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) { } DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); drawer.closeDrawer(GravityCompat.START); return true; }
我们可在此方法中设置抽屉按钮的监听。其他代码先不要管。
我们来看一下布局,主布局中主要注意到
<android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/navigation_drawer_header" app:menu="@menu/navigation_drawer_menu"/>
headerLayout和menu这两个添加进来的文件。
我们先进入headerLayout
<?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: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>
这里我们可以写我们自己的头布局,自己随意。
然后进入menu中定义我们自己的分组与图片文字
<?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="QQ" /> <item android:id="@+id/nav_gallery" android:icon="@drawable/ic_menu_gallery" android:title="微信" /> <item android:id="@+id/nav_slideshow" android:icon="@drawable/ic_menu_slideshow" android:title="陌陌" /> <item android:id="@+id/nav_manage" android:icon="@drawable/ic_menu_manage" android:title="探探" /> </group> <item android:title="外卖"> <menu> <item android:id="@+id/nav_share" android:icon="@drawable/ic_menu_share" android:title="美团" /> <item android:id="@+id/nav_send" android:icon="@drawable/ic_menu_send" android:title="饿了吗" /> </menu> </item></menu>
记得顶起来偶。
- Navigation Drawer的基本用法(SlidingMenu的替代品)
- Android官方的SlidingMenu--Navigation Drawer
- Android官方的SlidingMenu--Navigation Drawer
- Navigation Drawer的使用
- Android开发模板------SlidingPaneLayout、Navigation Drawer的基本介绍
- DrawerLayout的基本用法SlidingMenu
- Android的导航抽屉---Navigation Drawer
- 菜单键控制navigation drawer的滑入滑出
- Android的导航抽屉---Navigation Drawer
- Android – Toolbar 上的 Navigation Drawer
- Android – Toolbar 上的 Navigation Drawer
- Material Design (三) Navigation Drawer的使用
- Android – Toolbar 上的 Navigation Drawer
- react-native-navigation-drawer的使用
- 安卓背景模糊的Navigation Drawer
- (4.1.34.1)Navigation Drawer
- 改变navigation drawer中item被选中时的样式
- navigation drawer与action bar顶部菜单栏的冲突
- WordPress 自定义链接
- 暴力(Cake,HDU 5355)
- DOM中的一些概念
- UDS的CAN刷新软件
- Codis2迁移到Codis3
- Navigation Drawer的基本用法(SlidingMenu的替代品)
- Kotlin的Spring之旅(二):AOP(面向切面编程)
- 电商时代已经要过去了。接下来是零售
- day01
- 使用Web Worker
- Redux(1)
- Hdu 1531 King 差分约束 解题报告
- HDU-2571-命运
- 悲观锁和乐观锁的区别和应用场景