MaterialDesign设计风格之自定义toolbar的简单实现

MaterialDesign是Google在2014 I/O年发布的一种设计风格. android5.0也是开始使用这种设计风格
英文文档：http://www.google.com/design/spec/material-design/
中文网站：http://wiki.jikexueyuan.com/project/material-design/
今天我们主要学习toolbar，还有Google提供的侧滑控件，DrawerLayout，顺带把Google提供的下拉刷新控件SwipeRefreshLayout举例说明下。

效果如下

上图就是借用的代码家大神的api接口写了一个小demo。用的volley请求，添加缓存，imageloader图片加载，recycleview瀑布流，单一activity，fragment＋viewpager设计模式。有点跑题，有想要源码的可以取下面查看下载连接，交流学习开源为主。

因为toolbar是在v7包中，我们要添加依赖

compile 'com.android.support:appcompat-v7:24.0.0'

首先在自定义toolbar之前一定要把android自带的标题栏给隐藏掉，在theme里面添加行代码

  <item name="windowNoTitle">true</item>

然后单独写一个toolbar的布局，因为android自带的标题栏实在是丑爆了，怎么都不好搭配。于是乎，Google推出了设计风格，自定义toolbar，简直是凤姐变志玲啊。
Google把toolbar放在了supportv7包里面，见代码。

<android.support.v7.widget.Toolbar
    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="wrap_content"
    android:id="@+id/custom_toolbar"
    android:background="@android:color/holo_green_dark"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar">

</android.support.v7.widget.Toolbar>

然而一定要在style里面设置主题添加上toolbar的主题

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  <!-- Customize your theme here. -->
  <item name="colorPrimary">@color/colorOrange</item>
  <item name="colorPrimaryDark">@color/colorOrange</item>
  <item name="colorAccent">@color/colorOrange</item>
  <item name="windowNoTitle">true</item>
  <item name="android:textColorPrimary">@android:color/white</item>
<item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
</style>

    <style name="AppTheme.DrawerArrowToggle"
           parent="Base.Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@android:color/white</item>
    </style>

然后我们开始写DrawerLayout这个就比较简单了，我们可以作为根布局

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dl_left"
    android:layout_width="match_parent"
    android:layout_height="match_parent">



   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <android.support.v4.view.ViewPager
            android:id="@+id/vp_home"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </android.support.v4.view.ViewPager>

    </FrameLayout>
</LinearLayout>


    <FrameLayout
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:id="@+id/fl_left"
        android:layout_gravity="left"
        android:background="@android:color/white">

    </FrameLayout>

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

这里我们要注意下，drawerlayout中侧滑的布局要放在后面，如果写到了侧滑的布局，要设置这个属性android:layout_gravity="left"设置是哪边侧滑，也是一个标记。
这样基本就搞定了，然后设置一些属性直接找到该空间，设置一些文字之类的。非常简单。
当然也可以在style里面设置。是不是感觉非常的炫酷？
下面说一下SwipeRefreshLayout官方提供的下拉刷新控件。
这个控件是在v4兼容包里面。
也可以作为根布局来使用，上代码。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout
              xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/swip_layout"
              android:layout_width="match_parent"
              android:layout_height="match_parent">


        <ListView
            android:id="@+id/ganhuo_lv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="@null"
            android:dividerHeight="10dp"
            android:padding="5dp">

        </ListView>


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

在要下拉刷新的activity中实现这个监听接口

 SwipeRefreshLayout.OnRefreshListener

重写onRefresh方法，我是用的handler来更新的ui布局

    @Override
    public void onRefresh() {
        Message msg = Message.obtain();
        msg.what = 1;
        handler.sendMessage(msg);
    }

里面可以做一些获取数据的操作啊，我这儿简单起见，并没有模拟。

  private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            switch(msg.what){
                case 1:
                    swip_layout.setRefreshing(false);
                    break;
            }
            super.handleMessage(msg);
        }
    };

用起来也是特别的简单，而且这个下拉刷新控件还支持设置不同的颜色

swip_layout.setColorSchemeResources(android.R.color.holo_blue_light, android.R.color.holo_orange_dark,
                android.R.color.holo_green_light, android.R.color.holo_red_dark);

最后，有想看源码的可以戳此连接，https://github.com/Fhui/GankApp
个人网站：http://nexthiman.com