在以前,做策划导航的时候,最常用的组件便是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啦!欢迎互相学习!

如有疑问,欢迎留言探讨。

Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果的更多相关文章

  1. Android——使用Toolbar + DrawerLayout快速实现高大上菜单侧滑(转)

    今天就来使用官方支持库来快速实现这类效果,需要使用到Toolbar和DrawerLayout,详细步骤如下:(如果你还不知道这两个Widget,先自己Google吧~) 1.首先需要添加appcomp ...

  2. 仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)

    在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的 ...

  3. 使用Toolbar + DrawerLayout快速实现高大上菜单侧滑

    如果你有在关注一些遵循最新的Material Design设计规范的应用的话(如果没有,假设你有!),也许会发现有很多使用了看起来很舒服.很高大上的侧滑菜单动画效果,示例如下(via 参考2): 今天 ...

  4. Android使用ToolBar+DrawerLayout+NavigationView实现侧滑抽屉效果

    学会使用DrawerLayout 学会使用NavigationView 学会使用ToolBar+DrawerLayout+NavigationView实现侧滑抽屉效果 学会实现Toolbar在顶部以及 ...

  5. Android 自定义View修炼-仿QQ5.0 的侧滑菜单效果的实现

    有一段时间没有写博客了,最近比较忙,没什么时间写,刚好今天有点时间, 我就分享下,侧滑菜单的实现原理,一般android侧滑的实现原理和步骤如下:(源码下载在下面最后给出哈) 1.使用ViewGrou ...

  6. 仿知乎/途家导航栏渐变文字动画效果-b

    demo.gif 效果图如上,简单分析下 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了 ...

  7. Android DrawerLayout 高仿QQ5.2双向侧滑菜单

    1.概述 之前写了一个Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭 ,恰逢QQ5.2又加了一个右侧菜单,刚好看了下DrawerLayout,一方面官方的东西,我都比较感兴趣:另一方面 ...

  8. Android之官方导航栏之Toolbar(Toolbar+DrawerLayout+ViewPager+PagerSlidingTabStrip)

    通过前几篇文章,我们对Android的导航栏有了一定的了解认识,本次文章将对Toolbar进行综合应用,主要结合DrawerLayout.ViewPager.PagerSlidingTabStrip一 ...

  9. Android 仿知乎创意广告

    代码地址如下:http://www.demodashi.com/demo/14904.html 一.概述 貌似前段时间刷知乎看到的一种非常有特色的广告展现方式,即在列表页,某一个Item显示背后部分广 ...

随机推荐

  1. VSCode 配置阿里云CentOS 7.6 远程开发

    配置步骤 一.windows 10 开发机配置 windows 10 1809后支持ssh命令 1.生成ssh密钥.使用以下命令,先生成本地公钥和私钥ssh-keygen -t rsa -b 4096 ...

  2. 日志lombok插件安装及配置

    安装lombok插件 下载Lombok.jar http://projectlombok.googlecode.com/files/lombok.jar 运行Lombok.jar java -jar ...

  3. Django中的orm的惰性机制

    惰性机制:Publisher.objects.all()或者.filter()等都只是返回了一个QuerySet(查询结果集对象)[https://www.cnblogs.com/chaojiying ...

  4. PyCharm常用技巧集合

    PyCharm常用技巧集合 一.添加或者修改文件模板 File>settings>Editor>File and Code Templates>Python Script 你可 ...

  5. java-静态-单例-继承

    概要图 一.静态 1.1 静态方法 创建对象就是为了产生实例,并进行数据的封装. 而调用功能时,确没有用到这些对象中封装的数据. 该对象的创建有意义吗?虽然可以编译并运行,但是在堆内存中空间较为浪费. ...

  6. 洛谷P1006 NOIP提高组2008 传纸条

    P1006 传纸条 题目描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n 列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无 ...

  7. 【模板】tarjanLCA [2017年6月计划 学习tarjanLCA]

    P3379 [模板]最近公共祖先(LCA) 题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询 ...

  8. Vue.js NPM 安装方法

    由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v ...

  9. 优化 Tengine HTTPS 握手时间

    背景 网络延迟是网络上的主要性能瓶颈之一.在最坏的情况下,客户端打开一个链接需要DNS查询(1个 RTT),TCP握手(1个 RTT),TLS 握手(2个RTT),以及最后的 HTTP 请求和响应,可 ...

  10. listview显示固定条数

    看了很多网上其他大神的,感觉还是在listview的adapter中的getCount中下手比较好点 毕竟计算高度等等,那会让辅助的布局会一团糟,例如下面的搜索历史只显示四条,布局中有横向listvi ...