前言
从事Android开发近4年，在工作中根据开发需求不断的去学习新的东西。有些东西用过之后很长时间都没有继续使用，渐渐忘差不多了。再次使用的时候，去翻之前的笔记和demo发现记录的不全，导致自己的学习成本变的很高。所有打算自己把之前用过的做一个详细的笔记，方便自己。
现在有个新项目需要自己完成，就以此为契机，按照项目的需求以此记录更新该系列，第一部分介绍Design Support Library里用到的相关内容。
Material Design
Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，Google为Android推出了适用于Material Design的兼容库（Design Support Library）
使用DrawerLayout和NavigationView
gradle引入
implementation 'com.android.support:design:26.1.0'
使用Android studio新建project时有一个选项提供模板生成Navigation Drawer Activity，可以大大减少我们的工作量，但是为了讲解如何使用，没有采用此方法，新建空白的Activity。
在xml里添加DrawerLayout和NavigationView
<?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/layout_drawer"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--内容-->
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="@+id/view_navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/layout_nav_header"
app:menu="@menu/drawer"
app:itemIconTint="@color/colorAccent"
app:itemTextColor="@color/primary_text"
android:fitsSystemWindows="true"
/>
</android.support.v4.widget.DrawerLayout>
DrawerLayout为根布局，其中有两个子layout：分别是FrameLayout和NavigationView；FrameLayout展示主页面的内容，NavigationView展示抽屉的内容
NavigationView关键属性讲解
android:layout_gravity="start"start从屏幕左方滑出，end从屏幕右侧滑出；如果没有该属性打开页面直接显示抽屉内容，点击报错。
app:headerLayout="@layout/layout_nav_header"NavigationView头部布局，用于展示信息
app:menu="@menu/drawer"菜单选项，用于展示菜单
layout_nav_header.xm
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="?attr/colorPrimaryDark"
android:gravity="bottom"
android:orientation="vertical"
android:padding="16dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="头部信息"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
menu/drawer.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/home"
android:checked="true"
android:icon="@mipmap/home"
android:title="主页" />
<item
android:id="@+id/theme"
android:icon="@mipmap/theme"
android:title="主题" />
<item
android:id="@+id/settings"
android:icon="@mipmap/setting"
android:title="设置" />
<item android:title="子菜单">
<menu>
<item
android:id="@+id/tablayout"
android:icon="@mipmap/favorite"
android:title="TabLayout" />
<item
android:id="@+id/ablum"
android:icon="@mipmap/ablum"
android:title="menu2" />
<item
android:id="@+id/friends"
android:icon="@mipmap/friends"
android:title="menu3" />
</menu>
</item>
</group>
</menu>
Activity中java代码
public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener{
private DrawerLayout mDrawerLayout;
private NavigationView mNavigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
mNavigationView.setNavigationItemSelectedListener(this);
openFragment(HomeFragment.newInstance());//
}
private void initView() {
mDrawerLayout = (DrawerLayout) findViewById(R.id.layout_drawer);
mNavigationView = (NavigationView) findViewById(R.id.view_navigation);
/*去掉navigation中的滑动条*/
mNavigationView.getChildAt(0).setVerticalScrollBarEnabled(false);
}
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
String title = (String) item.getTitle();
//int itemId = item.getItemId();
Toast.makeText(MainActivity.this, "点击了 " + title, Toast.LENGTH_SHORT).show();
item.setChecked(true);//
mDrawerLayout.closeDrawer(mNavigationView);
return true;
}
}
使用其他布局替代NavigationView
上边完美实现了抽屉效果。但是在实际使用过程中，Navigation抽屉布局不能满足我们的需求，例如像qq侧滑抽屉，底部有按钮，不能使用NavigationView；
微信截图_20180103172511.png
只需要用合适的布局替代NavigationView即可，不能缺少android:layout_gravity="start"属性
<android.support.v4.widget.DrawerLayout
android:id="@+id/layout_drawer"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--内容-->
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<LinearLayout
android:layout_width="300dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="start"
android:background="@color/primary_light"
>
<TextView
android:layout_width="match_parent"
android:text="z这是一个textview"
android:layout_height="wrap_content"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button2"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
和ToolBar实现联动
Android提供了Toolbar替代ActionBar
implementation 'com.android.support:appcompat-v7:26.1.0'support:appcompat-v7提供Toolbar
修改theme，取消Actionbar
使用Theme.AppCompat.Light.NoActionBar作为父Style
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
修改activity_main.xml，DrawerLayout不能继续作为根布局
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.musejianglan.app4md.activity.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="@color/colorPrimary"
app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
<android.support.v4.widget.DrawerLayout
android:id="@+id/layout_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--内容-->
<FrameLayout
。。。
</FrameLayout>
<!--抽屉-->
<android.support.design.widget.NavigationView
。。。。 />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
代码修改
private Toolbar toolbar;
/*创建一个Drawerlayout和Toolbar联动的开关*/
private ActionBarDrawerToggle toggle;
initView:
toolbar = findViewById(R.id.toolbar);
/*设置ActionBar*/
setSupportActionBar(toolbar);
/*显示Home图标*/
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
/*设置Drawerlayout的开关,并且和Home图标联动*/
toggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, 0, 0);
mDrawerLayout.addDrawerListener(toggle);
/*同步drawerlayout的状态*/
toggle.syncState();
至此常用的Drawerlayout和NavigationView实现方法讲解完毕，后续会添加在使用过程中遇到的问题和根据特殊需求实现的定制。
