Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果

  1. 云栖社区>
  2. 博客>
  3. 正文

Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果

无名公子 2016-03-31 21:05:00 浏览4951
展开阅读全文

  在以前,做策划导航的时候,最常用的组件便是SlidingMenu了,当初第一次用它的时候觉得那个惊艳啊,体验可以说是非常棒。 后来,Android自己推出了一个可以实现策划导航的组件DrawerLayout,也相当的不错,更加简洁,好使。当前,很多的APP都会采用侧滑导航的设计,不仅体验上很好,而且这种为APP节省了很多“空间”的交互,给人的感觉更加舒服。

 Android已经越来越追求用户体验,在APP功能越来越成熟稳定的情境下,把用户体验做到极致,是开发者应有的追求!

 除了DrawerLayout的设计外,Android还推出了Toolbar,用于取代传统的ActionBar,这是一种符合Material Design设计规范的组件,越来越被更多的开发者接受,并应于自己的项目中,如最新的“知乎”客户端,就采用该种设计,体验的感觉非常好。

 关于DrawerLayout和Toolbar分别是如何使用,原理又是什么,我不在此处过多介绍,不会的或者有兴趣的人可以参考几篇不错的博文:

1. ANDROID – TOOLBAR STEP BY STEP

2. android官方侧滑菜单DrawerLayout详解


  我要介绍的,是如何使用Toolbar和DrawerLayout快速侧滑导航,先看下接下来要实现的效果:


1. 首先,新建项目,并在buile.gradle中添加appcompat-v7支持。

dependencies {
    compile 'com.android.support:appcompat-v7:23.1.1'
}


2. 创建ToolBar标题栏布局layout_tool_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize">

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

3. 创建DrawerLayout侧滑页面layout_custom_drawer.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--主布局-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:background="#00c7c0"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="主页面"
            android:textSize="40sp"
            android:layout_centerInParent="true"
            />
    </RelativeLayout>
    <!--侧滑菜单-->
    <LinearLayout
        android:id="@+id/drawerContent"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:background="#F5F5F5"
        android:orientation="vertical"
        android:layout_gravity="start">

        <TextView
            android:id="@+id/text1"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="我的收藏"
            android:gravity="center"
            android:textSize="16sp"
            />

        <TextView
            android:id="@+id/text2"
            android:layout_width="match_parent"
            android:layout_marginTop="20dp"
            android:layout_height="50dp"
            android:text="我的关注"
            android:gravity="center"
            android:textSize="16sp"
            />

    </LinearLayout>

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

4. 在主页面中,引用上面的ToolBar布局及DrawerLayout布局activity_main.xml

<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">
    <!--Toolbar-->
    <include layout="@layout/layout_tool_bar" />
    <!--DrawerLayout-->
    <include layout="@layout/layout_custom_drawer" />
</LinearLayout>


5. 编写Activity代码,控制ToolBar及DrawerLayout相应的逻辑

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Toolbar toolbar;

    private DrawerLayout drawerLayout;

    private LinearLayout drawerContent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        drawerContent = (LinearLayout) findViewById(R.id.drawerContent);
        // 设置Toolbar
        toolbar.setTitle("掌阅宝");
        toolbar.setTitleTextColor(Color.parseColor("#ffffff"));

        // 设置toolbar支持actionbar
        setSupportActionBar(toolbar);

        // 使用ActionBarDrawerToggle,配合DrawerLayout和ActionBar,以实现推荐的抽屉功能。
        ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open, R.string.close);
        mDrawerToggle.syncState();
        drawerLayout.setDrawerListener(mDrawerToggle);


        TextView text1 = (TextView) findViewById(R.id.text1);
        TextView text2 = (TextView) findViewById(R.id.text2);

        text1.setOnClickListener(this);
        text2.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        // 关闭DrawerLayout
        drawerLayout.closeDrawer(drawerContent);
        switch (v.getId()) {

            case R.id.text1:

                Toast.makeText(MainActivity.this, "我的收藏", Toast.LENGTH_SHORT).show();
                break;
            case R.id.text2:
                Toast.makeText(MainActivity.this, "我的关注", Toast.LENGTH_SHORT).show();
                break;
        }
    }
}


代码中注释已经够简单明了,关于ActionBarDrawerToggle是什么,可参考《ActionBarDrawerToggle的简要介绍》。


6. 配置系统的theme

<resources>

    <style name="AppTheme.Base" 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>

        <!--返回键样式-->
        <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>

        <item name="windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
        <!-- 使用 API Level 22编译的話,要拿掉前綴字 -->
        <item name="windowNoTitle">true</item>
    </style>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base"></style>

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

</resources>

通过以上六步,你就可以使用Toolbar+DrawerLayout来快速实现类似“知乎APP”侧滑导航效果了。


源码下载地址:https://github.com/zuiwuyuan/DrawerLayout_ToolBar



如此这般,就OK啦!欢迎互相学习!
如有疑问,欢迎留言探讨。

如此这般,就OK啦!欢迎互相学习!
如有疑问,欢迎留言探讨。

网友评论

登录后评论
0/500
评论
无名公子
+ 关注