Android 分享会：Material Design 在 Android 中的应用

时间  2021-08-13
标签 html android git 程序员 github json markdown 网络 架构 app 栏目 Android 繁體版
原文   原文链接

前言

我刚来这个公司的时候，每一个周三都会有分享会，主题自定，分享对象尽可能是面向大众，一开始以为不错，可是到后面发现分享的内容不是那么有养分，并且积极性不是很高，都是当作任务进行分享。 程序员由于较为腼腆，分享的人较少，大部分都是客户部、分析部或者推广部的分享，长此以往，氛围就比较消极。html

为了提升我们程序员发言的积极性，增添技术部的沟通氛围，决定以前的分享形式不变，可是改成月末一次，技术部的分享每周一次。主题能够是当前部门的相关技术，固然最好是可以让大众听懂。分享时可以积极讨论，最终目的提升自身的软实力，我们程序员不能只知道敲代码，是吧？android

那么，轮到我分享了，其实一个月以前就已经通知我让我准备分享，由于公司有个交易项目要上线，比较繁忙，就没太抽出时间准备，直到上个星期五才抽出周末的时间准备。git

准备

说完那么多废话，开始进入正题。最终决定分享主题为『Material Design In Android』。由于以前毕设项目趣闻中有用到「Support Design」库中的控件，因此写起来会顺手一点。我分三部分准备：程序员

  1. APP准备
  2. 文档准备
  3. Keynote准备

1、APP准备

项目已经上传到GitHub上:AndroidMDgithub

运行效果json

MD.gif

花了两个多小时作了这个APP，功能简单，主题明确。markdown

先说说完成这个APP的事前准备:网络

1. 主题

主题是最近很是火的「终结者2:审判日」架构

2. 数据

数据是本身在本地写的json数据，非常尴尬，而后部署到七牛云上。地址是:WeaponInfoapp

3. 语言

用的语言是以前学的Kotlin。Kotlin学习笔记

4. 风格

总体的风格就是我此次分享的主题 Material Desing风格。

2、总体内容结构的准备

在作PPT以前，先把结构搭好，而且把PPT的内容先准备好，到时候直接就能够复制到PPT中。

总体结构:

  1. 什么是 Material Design
  2. Material Desing的特色
  3. 从四个特色结合Android的应用剖析
  4. 在个人公司「口袋」项目中的应用

固然内容须要看官方的文档和其余资料加上总结才能完成，因此在此感谢一下文章的帮助：

Material Design 学习笔记

Material Design 官网介绍文档

Material Design 中文介绍

Material Design in Android Developer

3、PPT 的准备

有了以前内容的编写，作PPT就方便一点。可是由于刚买的MAC，但又不想再装WPS套餐，因而用的是自带的keynote，因此使用上会有点生疏。不过，整个PPT制做下来对其使用也熟练了起来。

若是须要的话，能够加个QQ发给你。

一、封面

封面

进入MD官网首页就是这张图片。

二、介绍

介绍.gif

从MD上截取的动画做为入口，大概讲解一下MD的基础概念和特色。

三、特色

特色.gif

这里抽取了四个点:Material、Elevation、Color和Animation进行分析。

四、风格背景

文字采用圆角+阴影进行包裹，至于高度和圆角效果由于时间紧迫，没有按照严格规范进行设置，若是对这方面有要求能够参考官网详细的规范要求。

image.png

五、动画效果

提及动画，为了可以模仿MD的交互，也是现学现卖了一把。

交互.gif

其实就是背景的放大效果，再加上文字的位移效果。

3、总结

这应该是本人第一次技术分享，除了内容准备的还算充分，分享的过程不是很满意。本人性格偏内向，平时只默默的撸代码、玩游戏，不肯意主动和别人交流，因此不论分享以前仍是期间都表现的很紧张，声音有明显的颤抖，总体节奏把握的很差，很快。

整个分享过程，感受本身就是为了将PPT内容放完就等于完成任务似的，致使听的人迷迷糊糊的，一个点尚未放完就跳到了另外一个点，导致整个分享结束，听众吸取的部分不多。在结束后，咱们老大 也给了我很多建议：分享的内容不在于多，而在于听众吸取了多少，你匆匆忙忙的说完了，底下的人一脸懵逼，这就失去了分享的意义。

确实，技术分享原本的目的不就是为了让那些对分享主题不熟悉的人能有个大概的了解，可以从中收获到一些在本身领域中获得应用的技能，这就足够了。所以，在分享以前，本身要对分享的知识点有个充分的了解。在分享时能将每一个知识点都有个透彻而又完整的分析，不要追求速度。实话说此次分享确实给我带了很多的收获，相信在下次分享中可以有一个满意的表现。

我--------------是--------------分--------------割--------------线

Material Design in Android

接下来开始分享此次分享的主要内容,由于MD的介绍和规范在官网上都有很是详细全面的介绍，因此我就不赘述了，建议本身先看一遍官方网站的介绍，这样你对MD的理解会更加深刻一些。那我把连接再列出一下：

Material Design`官网介绍文档

Material Design 中文介绍

当你把官网的内容大体浏览一遍，相信也对MD有个初步的了解，固然要想所有弄懂的话，还得须要消化一阵子，毕竟MD的设计规范细致入微。越读越能感觉到它的妙处，假如你能严格按照它的规范进行开发项目，哪怕你不是专业的UI设计师，相信你的产品必定会不难看的。

那接下来就主要介绍一下Material Desing在Android中应用。。

跟随着15年Android 5.0的问世，谷歌设计师们还给咱们带来的一系列的具备Material Design风格控件。这些控件被统一放置在support design库中，以供开发中使用。使用这些库的前提是API>=21，固然若是你想在 5.0 一下的设备这些控件的话，须要添加appcompat包进行向下兼容。

image.png

个人design版本是26.1.0,上图大概就是design提供的API，这里我只作简单的使用介绍，若是想了解其原理的话，能够看一下官方的介绍。

这么多我该从何提及呢？我想了下，就按照我作这个小项目，须要的控件顺序提及吧，这样也至关于你们跟我一块儿作出一个具备Material Design风格的APP了。

一、主题

一个项目的开始，你得先肯定这个项目的主题颜色是什么？你可使用谷歌给你提供的Material Theme:

  • @android:style/Theme.Material（深色版本）
  • @android:style/Theme.Material.Light（浅色版本）
  • @android:style/Theme.Material.Light.DarkActionBar

固然，也可使用自定义的主题，先看一下很是广泛的图片:

image.png

能够经过定制不一样的类别的主题颜色，来达到预期的主题效果。

  • colorPrimary 项目主颜色，通常是Titlebar的背景颜色
  • colorPrimaryDark 比主颜色深一点颜色，通常是状态栏颜色
  • textColorPrimary 文字的主颜色
  • windowBackground 窗口背景颜色
  • navigationBarColor 导航栏颜色

经过在styles中配置颜色来定制您的主题，并在AndroidManifest中应用。 开发

[图片上传失败...(image-3f86ab-1513646879600)]

二、BottomNavigationView

主题构建好了，下面就是主要内容架构，我大体分为四个模块:武器简介、人物简介、配件简介和空头简介。那么底下就须要一个tab进行切换，BottomNavigationView便开始登场。从名字就能够看出 「底部导航view」，主要的做用在于给每一个模块一个导航定位的功能。

先看一下效果:

bottomNavigationView.gif

  1. 在menu/下建立菜单文件:

    <menu xmlns:android="http://schemas.android.com/apk/res/android">
     <group android:checkableBehavior="single">
         <item
             android:id="@+id/bottom_weapon_inc"
             android:icon="@drawable/about"
             android:title="@string/weapon_inc" />
         <!--  省略部分代码     -->
     </group>
 </menu>
复制代码

  2. XML中进行引用

    <android.support.design.widget.BottomNavigationView
     android:id="@+id/navigation"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:itemBackground="@color/colorPrimary"
     app:itemIconTint="@android:color/white"
     app:itemTextColor="@android:color/white"
     app:menu="@menu/bottom_menu"/>
复制代码

  3. 代码中设置点击事件

    navigation!!.setOnNavigationItemSelectedListener {}
复制代码

三、DrawerLayout、NavigationView

和BottomNavigationView相对的，不得不介绍一下NavigationView，这二者都是导航View，后者通常须要配合DrawerLayout实现侧滑菜单效果。

请看效果：

DrawerLayout.gif

在XML直接引用

<android.support.v4.widget.DrawerLayout
            android:id="@+id/dl_main"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="0dp">
            <!-- 主内容 -->
            <FrameLayout
                android:fitsSystemWindows="true"
                android:id="@+id/fl_content"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    
            </FrameLayout>
            <!-- 侧滑菜单内容 -->
            <android.support.design.widget.NavigationView
                android:id="@+id/nv_left"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                app:headerLayout="@layout/nav_header"
                app:menu="@menu/nav_menu"/>
        </android.support.v4.widget.DrawerLayout>
复制代码

经过配置layout_gravity的属性来设置侧滑的方向：start：从左侧划出，end从右侧划出。

headerLayout: 设置其头布局
menu: 设置菜单布局
复制代码

详细使用请看我以前写的一篇博客：高大上的DrawerLayout

四、Toolbar

总体的架构搭建好了，剩下就是开始每一个模块的内容了，内容固然少不了标题，那么就开始介绍一下Toolbar。

Toolbar做为早期Android中ActionBar的替代品，定制性和操做性挺高了很多。使用的时候须要设置NoActionBar的主题。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"></style>
复制代码

五、RecyclerView+SwipeRefreshLayout

项目中列表确定是少不了的，那么这就不得不提RecyclerView了，强大之处不用多说，感兴趣的话看一下我以前写的博客，对其使用有个简单的介绍：简单粗暴RecyclerView

那若是想实现侧滑删除和长按拖拽的功能怎么办呢？RecyclerView原生就支持这些，只须要继承ItemTouchHelper.Callback的类，并实现它几个抽象方法便可。

  1. 建立实现ItemTouchHelper.Callback的类

    internal inner class ItemTouchHelperCallback : ItemTouchHelper.Callback() {
     override fun getMovementFlags(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder): Int {
         val dragFlags = ItemTouchHelper.UP or ItemTouchHelper.DOWN
         val swipeFlags = ItemTouchHelper.START or ItemTouchHelper.END
         return makeMovementFlags(dragFlags, swipeFlags)
     }

     override fun onMove(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder, target: RecyclerView.ViewHolder): Boolean {
         myAdapter!!.onItemMove(viewHolder.adapterPosition, target.adapterPosition)
         return false
     }

     override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
         myAdapter!!.onItemDismiss(viewHolder.adapterPosition)
     }
 }
复制代码

  2. 和RecyclerView创建链接

    val mItemTouchHelper = ItemTouchHelper(ItemTouchHelperCallback())
 mItemTouchHelper.attachToRecyclerView(mRecyclerView)
复制代码

实现效果以下：

RecyclerView.gif

六、CardView

列表结构写好了，里面内容得优化吧，CardView自带圆角和阴影效果，让每一个Item看起来就很是的天然，正如其名像卡片同样，也符合了Material Design特色。

做为ViewGroup包裹子View实现圆角和阴影的效果：

<android.support.v7.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="2dp"
    app:cardCornerRadius="5dp"
    app:cardElevation="5dp">
</android.support.v7.widget.CardView>
复制代码

主要由两个属性控制：

  • cardCornerRadius：圆角半径
  • cardElevation：高度(直接影响阴影的大小)

七、CoordinatorLayout+AppBarLayout+Toolbar

列表写好了，接下来就是滑动的交互，CoordinatorLayout：做为根View或者是一个活多个子View特定的容器，用于协调子View之间滑动的交互，能够说CoordinatorLayout是整个Design库中最核心的控件。

AppBarLayout其实就是LinearLayout,经过layout_scrollFlags来控制滑动的效果。前提是滑动view必须实现NestedScrollingChild的接口，且须要配置behavior，最基本的使用就是：

<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"
            android:background="?attr/colorPrimary"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
            app:popupTheme="@style/Theme.AppCompat.Light" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:foregroundGravity="center" />
    </android.support.v4.widget.SwipeRefreshLayout>

</android.support.design.widget.CoordinatorLayout>
复制代码

有两个重点：

  • 滑动的view必须实现NestedScrollingChild接口。好比RecyclerView、NestedScrollView.
  • 必须配置behavior。app:layout_behavior="@string/appbar_scrolling_view_behavior"

来看一下layout_scrollFlags有哪些属性，为了方便理解，将能够滑动的view简称为ScrollView,设置了layout_scrollFlags称为DependentView：

1. scroll

子view必须设置该属性其余的属性的才会生效，这个是最基本的属性。

2. scroll|enterAlways

只要ScrollView滑动，滑动事件就会交给设置DependentView，当DependentView滑动结束才会将事件交给ScorllView。也就是下面的效果:

enterAlways.gif

3. scroll|enterAlwaysCollapsed

当ScrollView向下滑动时，DependentView先折叠到最小高度(这里是0),而后将事件交给ScrollView，当ScrollView滑动结束，DependentView才继续滑动事件，直至展开，以下图所示：

enterAlwaysCollapsed.gif

4. scroll|enterAlwaysCollapsed|enterAlways

这边就展现一下折叠的效果，咱们先设置最小的高度

<android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:minHeight="50dp"
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed|enterAlways" />
复制代码

展现一下效果：

see.gif

5. scroll|exitUntilCollapsed

这个搭配重点在于上拉的时候，DependentView会先折叠到最小高度，而后事件所有交给ScrollView。那下拉的时候就是当ScrollView滑动结束，才开始DependentView的滑动事件。

exitUntilCollapsed.gif

6. scroll|enterAlways|snap

这个snap就是在上面的基础上多了一个回弹的效果,当DependentView正在滑动，此时手指离开屏幕时，DependentView会自动移动到离本身较劲的终点或者始点。效果以下:

snap.gif

上面的属性彻底能够像第四种状况叠加使用，至于效果本身尝试了了才能感受到它的奥妙之处。

八、转场动画

交互有了，如今看是添加点击跳转效果了。我们以前跳转动画都是在startActivity以后调用overridePendingTransition方法，传入进入和退出的动画实现跳转动画。Android 5.0提供了强大的转场动画，给每一个item赋予了生命，跳转时，仿佛每块布局都参与了此次搬迁大运动。

使用时，需在setContentView()以前加上

window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
复制代码

跳转时候这样写:

startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(activity).toBundle())
复制代码

跳转的界面设置转场动画或者出场动画：

window.enterTransition = Explode()
    window.exitTransition = Slide()
复制代码

为了看出效果我设置了2s的延迟：

Transition.gif

九、Toast、SnackBar和AlertDialog

基本的界面写完了，剩下的就是一些逻辑上的操做啦，好比「提示」。那么Android提示分为三种：

  • 友好的Toast(好比网络失败)
  • 拥有附加行为的提示SnackBar(好比误删信息回撤)
  • 强制让用户作出选择的AlertDialg(好比未登陆)

那么这三种的效果是什么呢？

TSA.gif

大概先讲这些，有时间再进行后续补充。

Material Design 在「口袋」中的应用

其实在我们的「口袋贵金属」项目中也到找到不少MD的元素。

首先是点击的水波纹效果：

ripple.gif

其次是交易圈的滑动交互:

circle.gif

还有就是本人在「口袋」接手的第二个需求，「我的中心」。看一下效果：

personal.gif

严格按照Material Design风格进行开发，相信必定能开发出很是漂亮的APP！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程