Android DrawerLayout和NavigationView 的使用方法
16lz
2021-01-23
Android DrawerLayout和NavigationView 的使用方法
1、DrawerLayout
侧拉菜单作为常见的导航交互控件,最开始在没有没有android官方控件时,很多时候都是使用开源的SlidingMenu。使用DrawerLayout可以轻松的实现抽屉效果。DrawerLayout 在android.support.v4.widget.DrawerLayout这个包里。这里只说DrawerLayout最简单的实现,相当于hello world。1.1、布局
DrawerLayout布局分两部分,第一用户内容,就是非菜单部分。第二是菜单。 [html] view plain copy- <android.support.v4.widget.DrawerLayout
- 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:id="@+id/drawer_layout"
- tools:context="com.example.mydraw3.MainActivity" >
- <FrameLayout
- android:id="@+id/container"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- />
- <ListView
- android:layout_width="240dp"
- android:layout_height="match_parent"
- android:id="@+id/lv_drawer"
- android:background="#fff0f0f0"
- android:layout_gravity="start"
- />
- android.support.v4.widget.DrawerLayout>
上面一个FramLayout,是用户内容去,下面一个View,是Drawer,这里用的ListView。
1.2、代码
因为是hello world,所以出去自动生成的,代码中并无太多内容。主要是从给ListView填充一个数组,对应Drawer 里的菜单项。 [java] view plain copy- package com.example.mydraw3;
- import android.os.Bundle;
- import android.support.v4.widget.DrawerLayout;
- import android.support.v7.app.ActionBarActivity;
- import android.view.Menu;
- import android.view.MenuItem;
- import android.view.View;
- import android.widget.AdapterView;
- import android.widget.AdapterView.OnItemClickListener;
- import android.widget.AdapterView.OnItemSelectedListener;
- import android.widget.ArrayAdapter;
- import android.widget.ListView;
- import android.widget.TextView;
- public class MainActivity extends ActionBarActivity {
- private DrawerLayout mDrawerLayout;
- private ListView mLvDrawer;
- private String mTitle;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- initView();
- initDrawer();
- mDrawerLayout.openDrawer(mLvDrawer);
- }
- private void initDrawer() {
- //数组定义在xml 文件中
- String[] items = getResources().getStringArray(R.array.navi_items);
- ArrayAdapter
adapter = new ArrayAdapter ( this, - android.R.layout.simple_expandable_list_item_1);
- //绑定到adapter,并设置给listview
- adapter.addAll(items);
- mLvDrawer.setAdapter(adapter);
- mLvDrawer.setSelection(0);
- //设置点击item事件
- mLvDrawer.setOnItemClickListener(new OnItemClickListener() {
- @Override
- public void onItemClick(AdapterView<?> parent, View view,
- int position, long id) {
- mLvDrawer.setSelection(position);
- }
- });
- mLvDrawer.setOnItemSelectedListener(new OnItemSelectedListener() {
- @Override
- public void onItemSelected(AdapterView<?> parent, View view,
- int position, long id) {
- mTitle = ((TextView) view).getText().toString();
- setFragment();
- mDrawerLayout.closeDrawer(mLvDrawer);
- }
- @Override
- public void onNothingSelected(AdapterView<?> parent) {
- // TODO Auto-generated method stub
- }
- });
- }
- //根据点击,生成一个对应Fragment
- private void setFragment() {
- getSupportFragmentManager().beginTransaction()
- .replace(R.id.container, new HolderFragment(mTitle))
- .commit();
- getSupportActionBar().setTitle(mTitle);
- }
- private void initView() {
- mTitle = getResources().getString(R.string.app_name);
- mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
- mLvDrawer = (ListView) findViewById(R.id.lv_drawer);
- mLvDrawer.setSelection(0);
- }
- @Override
- public boolean onCreateOptionsMenu(Menu menu) {
- getMenuInflater().inflate(R.menu.main, menu);
- return true;
- }
- @Override
- public boolean onOptionsItemSelected(MenuItem item) {
- int id = item.getItemId();
- if (id == R.id.action_settings) {
- return true;
- }
- return super.onOptionsItemSelected(item);
- }
- }
1.3、运行效果图
是不是很简单? 如果觉得菜单有些单调,可以配合NavigationView使用。实现更丰富的效果。2、DrawerLayout+Navigation
NavigationView一把和DrawerLayout配合使用。还是上面的布局文件,将其第二部分,也就是实现Drawer的View的位置,换成NavigationView。NavigationView能实现更丰富的效果。2.1、布局文件
[html] view plain copy- <?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:layout_width="match_parent"
- android:layout_height="match_parent"
- tools:openDrawer="start"
- >
- <LinearLayout
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:background="#E1BEE7"
- android:orientation="vertical">
- <android.support.v7.widget.Toolbar
- android:id="@+id/id_toolbar"
- android:layout_width="match_parent"
- android:layout_height="?attr/actionBarSize"
- android:background="?attr/colorPrimary"
- app:layout_scrollFlags="scroll|enterAlways"
- app:logo="@mipmap/ic_launcher"
- app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
- app:title="laxian" />
- <TextView
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:text="hello navigation" />
- LinearLayout>
- <android.support.design.widget.NavigationView
- android:id="@+id/navi"
- android:layout_width="240dp"
- android:layout_height="match_parent"
- android:background="#99b2b2b2"
- android:layout_gravity="start"
- app:headerLayout="@layout/header"
- app:menu="@menu/activity_main_drawer"
- />
- android.support.v4.widget.DrawerLayout>
和第一部分一样,只是第二部分Drawer部分用NavigationView完成。NavigationView headerLayout 属性和menu属性,分别可以指定Header部分布局文件和menu部分@menu资源,实现各种自定义效果。 同样,也是因为是个hello world,展示效果的demo,NavigationView只需定义好布局文件就能实现我们需要的效果,至于点击事件的逻辑,不在粘贴。
2.2、效果图如下:
更多相关文章
- android下快速检索出媒体文件所在文件夹
- 带你了解Android约束布局ConstraintLayout
- Android 相机 预览 添加蒙板效果的实现
- 【Android开发学习08】SurfaceView显示动画效果