Android Design Support Library控件使用总结(二)

之前的控件总结第一部分讲过了CoordinatorLayout、CollapsingToolBarLayout、AppBarLayout。这一节来总结一下ToolBar、DrawerLayout、NavigationLayout的使用方法以及使用上遇到的一些问题及解决办法。

ToolBar

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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="match_parent">

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

</android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

看一下以上的xml代码，toolBar在xml中的配置很简单，高度使用的是？attr/actionBarSize系统values文件的一个属性，点进去发现是56dp（这个应该是Google推荐的高度吧）。下面我们看一下在Activity中的代码：

mToolBar = findView(R.id.mToolBar);
mToolBar.setTitle("博客地址");
mToolBar.setTitleTextColor(Color.WHITE);
setSupportActionBar(mToolBar);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
//actionBar.setHomeAsUpIndicator(R.drawable.mycat);
mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});

如上代码所示，在使用ToolBar的时候一定要调用setSupportActionBar( )这个方法，这样ToolBar才能取代原本已经过时的ActionBar,如果要给ToolBar设置标题的话，一定要在setSupportActionBar( )这个方法之前设置，否则不会产生效果。如果想在这个方法之后设置的话，就需要在getSupportActionBar(）方法之后利用得到的对象来进行设置。



大家可以看到，可以给它设置logo，设置标题，设置二级标题，设Menu等这里对这些方法不再赘述，需要具体说明的是这几个方法：

setDisplayHomeAsUpEnabled(true) 给左上角图标的左边加上一个返回的图标 。

setDisplayShowHomeEnabled(true) 使左上角图标是否显示，如果设成false，则没有程序图标，仅仅就是个标题，否则，显示应用程序图标

setDisplayShowCustomEnabled(true) 使自定义的普通View能在title栏显示即actionBar.setCustomView能起作用

setHomeAsUpIndicator（Drawable indicator）修改返回图标的样式

代码的运行效果如下：



可以看到左上角有一个白色的箭头，其实默认是黑色的，我将他的颜色改成了白色。要改变箭头的颜色只需要在styles.xml中定义一个属性即可

<style name=""  parent="ThemeOverlay.AppCompat.Dark.ActionBar">
....
<item name="colorControlNormal">@color/myColor</item>
</style>

setNavigationOnClickListener（）可以为这个箭头添加点击事件。

DrawerLayout

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"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<!-- your content-->
<include layout="@layout/maint_content" />

<!-- the navigationMenu-->
<android.support.design.widget.NavigationView
android:id="@+id/navigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@layout/layout_menu"
/>

</android.support.v4.widget.DrawerLayout>

xml中的配置很简单，上面的是屏幕内的布局，二下面是侧滑菜单的布局。这里用到的是NavigationView(下面进行讲解)。一般我们可以使用DrawerLayout来做App的导航栏这样比较符合AndroidDesign，在Activity中的使用代码如下：

toolbar = findView(R.id.toolbar);
drawer_layout = findView(R.id.drawer_layout);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
//注意该方法一定要在 mDrawerToggle.syncState()方法之前调用否则显示的箭头不会与drawerlayout同步
actionBar.setDisplayHomeAsUpEnabled(true);

ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(
this, drawer_layout, toolbar,
R.string.navigation_drawer_open, R.string.navigation_drawer_close
);

drawer_layout.setDrawerListener(mDrawerToggle);
mDrawerToggle.syncState();//Toggle与drawerLayout状态一致

可以看到我使用了一个ActionBarDrawerToggle，使用它会使得原本左上角的返回按钮变成一个打开菜单的指示按钮，使用它的时候别忘了调用drawer_layout.setDrawerListener(mDrawerToggle)这个方法，这样才会与DrawerLayout关联，然后调用mDrawerToggle.syncState()会使得taggle的动画效果状态与drawerLayout的一致，效果图如下：



在创建ActionBarDrawerToggle这个对象的时候遇到了一点问题，就是构造方法最后两个参数提示不出来，我在StackOverFlow上找到了解决办法



在Strings.xml文件创建这两个条目即可。接下来讲一下NavigationLayout。

NavigationLayout

NavigationLayout大大简化了抽屉菜单的使用，其中NavigationView 中的 android:layout_gravity=”start” 属性来控制抽屉菜单从哪边滑出，一般“start ”从左边滑出，“end”从右边滑出。在这里重点说下两个属性：

app:headerLayout: 给NavigationView添加头部布局

app：menu：给NavigationView添加menu菜单布局

app:headerLayout布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:orientation="vertical">

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_pic"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="centerCrop"
fresco:roundAsCircle="true"
fresco:roundingBorderColor="@android:color/white"
fresco:roundingBorderWidth="2dp" />

<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="斑斑啦啦啦啦啦"
android:textColor="@android:color/white"
android:textSize="18sp" />

</LinearLayout>

pp：menu 布局如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<group
android:checkableBehavior="single"
android:title="Home items">

<item
android:id="@+id/nav_blog"
android:title="博客地址" />

<item
android:id="@+id/nav_ver"
android:title="版本信息" />

<item
android:id="@+id/nav_about"
android:title="关于我" />

</group>

<item android:title="Sub items">
<menu >
<item

android:id="@+id/sub_exit"
android:title="退出应用" />

<item
android:id="@+id/sub_switch"
android:title="切换主题" />
</menu>
</item>

</menu>

在Activity中给NavigationLayout设置选择监听：

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()) {
//退出应用
case R.id.sub_exit:
finish();
break;
//切换主题
case R.id.sub_switch:

break;
//博客地址
case R.id.nav_blog:
startActivity(new Intent(MainActivity.this, BlogActvity.class));
break;
//版本信息
case R.id.nav_ver:

break;
//关于
case R.id.nav_about:

break;
}

item.setChecked(true);
drawer_layout.closeDrawers();
return true;
}
});

效果图如下，是不是觉得比使用ListView加适配器方便多了？



在使用它的时候也遇到了一个问题，对头布局里控件的一些操作在xml里不太好控制，例如在头布局里有点击事件或者其他的业务需求。这个时候我们可以不在xml中配置app:headerLayout，可以在JAVA代码中实现：

navigationView = findView(R.id.navigationView);
View headerView = navigationView.inflateHeaderView(R.layout.header_layout);//nivigationViewJ加载headerView
my_pic = (SimpleDraweeView) headerView.findViewById(R.id.my_pic);
my_pic.setImageURI(Uri.parse("res:///" + R.drawable.header));//simpledraweeView加载本地图片

好了基本所有我用到的控件都介绍和总结完了，喵的终于写完了-。-