记一次公司的Android分享会
<h2>前言</h2> <p>我刚来这个公司的时候,每个周三都会有分享会,主题自定,分享对象尽量是面向大众,一开始觉得不错,但是到后面发现分享的内容不是那么有营养,而且积极性不是很高,都是当做任务进行分享。 程序员因为较为腼腆,分享的人较少,大部分都是客户部、分析部或者推广部的分享,久而久之,氛围就比较消极。</p> <p>为了提高咱们程序员发言的积极性,增添技术部的沟通氛围,决定之前的分享形式不变,但是改为月末一次,技术部的分享每周一次。主题可以是当前部门的相关技术,当然最好是能够让大众听懂。分享时能够积极讨论,最终目的提高自身的软实力,咱们程序员不能只知道敲代码,是吧?</p> <p>那么,轮到我分享了,其实一个月之前就已经通知我让我准备分享,因为公司有个交易项目要上线,比较繁忙,就没太抽出时间准备,直到上个星期五才抽出周末的时间准备。</p> <h2>准备</h2> <p>说完那么多废话,开始进入正题。最终决定分享主题为『Material Design In Android』。因为之前毕设项目 <a href="/misc/goto?guid=4959756101257268929" rel="nofollow,noindex">趣闻</a> 中有用到「Support Design」库中的控件,所以写起来会顺手一点。我分三部分准备:</p> <ol> <li><code>APP</code> 准备</li> <li>文档准备</li> <li><code>Keynote</code> 准备</li> </ol> <h2>一、APP准备</h2> <p>项目已经上传到 <code>GitHub</code> 上: <a href="/misc/goto?guid=4959756101367283527" rel="nofollow,noindex">AndroidMD</a></p> <p>运行效果</p> <p><img src="https://simg.open-open.com/show/7cf8d1bd0d9bb741a0822c36b8a95c03.gif" alt="记一次公司的Android分享会 " width="362" height="571"></p> <p>MD.gif</p> <p>花了两个多小时做了这个 <code>APP</code> ,功能简单,主题明确。</p> <p>先说说完成这个 <code>APP</code> 的事前准备:</p> <p>1. 主题</p> <p>主题是最近非常火的 <a href="/misc/goto?guid=4959756101470087265" rel="nofollow,noindex"><strong>「终结者2:审判日」</strong></a></p> <p>2. 数据</p> <p>数据是自己在本地写的 <code>json</code> 数据,很是尴尬,然后部署到 <strong><a href="/misc/goto?guid=4959756101572879063" rel="nofollow,noindex">七牛云</a> </strong>上。地址是:WeaponInfo</p> <p>3. 语言</p> <p>用的语言是之前学的 <strong><code>Kotlin</code> </strong>。 <a href="/misc/goto?guid=4959756101681738632" rel="nofollow,noindex">Kotlin学习笔记</a></p> <p>4. 风格</p> <p>整体的风格就是我这次分享的主题 <code>Material Desing</code> 风格。</p> <h2>二、整体内容结构的准备</h2> <p>在做 <code>PPT</code> 之前,先把结构搭好,并且把 <code>PPT</code> 的内容先准备好,到时候直接就可以复制到 <code>PPT</code>中。</p> <p>整体结构:</p> <ol> <li>什么是 <code>Material Design</code></li> <li><code>Material Desing</code> 的特点</li> <li>从四个特点结合 <code>Android</code> 的应用剖析</li> <li>在我的公司「口袋」项目中的应用</li> </ol> <p>当然内容需要看官方的文档和其他资料加上总结才能完成,所以在此感谢一下文章的帮助:</p> <p><a href="/misc/goto?guid=4959756101782892578" rel="nofollow,noindex">Material Design 学习笔记</a></p> <p><a href="/misc/goto?guid=4959756101878772045" rel="nofollow,noindex">Material Design 官网介绍文档</a></p> <p><a href="/misc/goto?guid=4959756101981029303" rel="nofollow,noindex">Material Design 中文介绍</a></p> <p><a href="/misc/goto?guid=4959756102082118382" rel="nofollow,noindex">Material Design in Android Developer</a></p> <h2>三、 <code>PPT</code> 的准备</h2> <p>有了之前内容的编写,做 <code>PPT</code> 就方便一点。但是因为刚买的 <code>MAC</code> ,但又不想再装 <code>WPS</code> 套餐,于是用的是自带的 <code>keynote</code> ,所以使用上会有点生疏。不过,整个 <code>PPT</code> 制作下来对其使用也熟练了起来。</p> <p>如果需要的话,可以加个QQ发给你。</p> <h3>1、封面</h3> <p><img src="https://simg.open-open.com/show/945d21f8c8b3f326f0dcf1de0cd07a4a.png" alt="记一次公司的Android分享会 " width="550" height="362"></p> <p>封面</p> <p>进入 <code>MD</code> 官网首页就是这张图片。</p> <h3>2、介绍</h3> <p><img src="https://simg.open-open.com/show/0ae1b1da41025d72345fc9027b0eced3.gif" alt="记一次公司的Android分享会 " width="1000" height="639"></p> <p>介绍.gif</p> <p>从 <code>MD</code> 上截取的动画作为入口,大概讲解一下 <code>MD</code> 的基础概念和特点。</p> <h3>3、特点</h3> <p><img src="https://simg.open-open.com/show/bd6a03ffbe2d4200168eb07deb0e4f3e.gif" alt="记一次公司的Android分享会 " width="1000" height="639"></p> <p>特点.gif</p> <p>这里抽取了四个点: <code>Material</code> 、 <code>Elevation</code> 、 <code>Color</code> 和 <code>Animation</code> 进行分析。</p> <h3>4、风格背景</h3> <p>文字采用圆角+阴影进行包裹,至于高度和圆角效果因为时间紧迫,没有按照严格规范进行设置,如果对这方面有要求可以参考官网详细的规范要求。</p> <p><img src="https://simg.open-open.com/show/e40af4b3166f421b2d4f860dd932afb4.png" alt="记一次公司的Android分享会 " width="550" height="444"></p> <p>image.png</p> <h3>5、动画效果</h3> <p>说起动画,为了能够模仿 <code>MD</code> 的交互,也是现学现卖了一把。</p> <p><img src="https://simg.open-open.com/show/dce2540dffcae62dc6223061db22ea80.gif" alt="记一次公司的Android分享会 " width="1000" height="639"></p> <p>交互.gif</p> <p>其实就是背景的放大效果,再加上文字的位移效果。</p> <h2>三、总结</h2> <p>这应该是本人第一次技术分享,除了内容准备的还算充分,分享的过程不是很满意。本人性格偏内向,平时只默默的撸代码、玩游戏,不愿意主动和别人交流,所以不论分享之前还是期间都表现的很紧张,声音有明显的颤抖,整体节奏把握的不好,很快。</p> <p>整个分享过程,感觉自己就是为了将 <code>PPT</code> 内容放完就等于完成任务似的,导致听的人迷迷糊糊的,一个点还没有放完就跳到了另一个点,致使整个分享结束,听众吸收的部分很少。在结束后,我们老大 也给了我不少建议:分享的内容不在于多,而在于听众吸收了多少,你匆匆忙忙的说完了,底下的人一脸懵逼,这就失去了分享的意义。</p> <p>确实,技术分享本来的目的不就是为了让那些对分享主题不熟悉的人能有个大概的了解,能够从中收获到一些在自己领域中得到应用的技能,这就足够了。因此,在分享之前,自己要对分享的知识点有个充分的了解。在分享时能将每个知识点都有个透彻而又完整的分析,不要追求速度。实话说这次分享确实给我带了不少的收获,相信在下次分享中能够有一个满意的表现。</p> <p>我--------------是--------------分--------------割--------------线</p> <h2>Material Design in Android</h2> <p>接下来开始分享这次分享的主要内容,因为 <code>MD</code> 的介绍和规范在官网上都有非常详细全面的介绍,所以我就不赘述了,建议自己先看一遍官方网站的介绍,这样你对 <code>MD</code> 的理解会更加深入一些。那我把链接再列出一下:</p> <p><a href="/misc/goto?guid=4959756101878772045" rel="nofollow,noindex">Material Design`官网介绍文档</a></p> <p><a href="/misc/goto?guid=4959756101981029303" rel="nofollow,noindex">Material Design 中文介绍</a></p> <p>当你把官网的内容大致浏览一遍,相信也对 <code>MD</code> 有个初步的了解,当然要想全部弄懂的话,还得需要消化一阵子,毕竟 <code>MD</code> 的设计规范细致入微。越读越能感受到它的妙处,假如你能严格按照它的规范进行开发项目,哪怕你不是专业的UI设计师,相信你的产品一定会难看的。</p> <p>那接下来就主要介绍一下 <code>Material Desing</code> 在 <code>Android</code> 中应用。。</p> <p>跟随着15年 <code>Android 5.0</code> 的问世,谷歌设计师们还给我们带来的一系列的具有 <code>Material Design</code> 风格控件。这些控件被统一放置在 <code>support design</code> 库中,以供开发中使用。使用这些库的前提是 <code>API>=21</code> ,当然如果你想在 5.0 一下的设备这些控件的话,需要添加 <code>appcompat</code>包进行向下兼容。</p> <p><img src="https://simg.open-open.com/show/7dde4eeee2673b9a7be80888cf1cafd6.png" alt="记一次公司的Android分享会 " width="250" height="946"></p> <p>image.png</p> <p>我的 <code>design</code> 版本是 <code>26.1.0</code> ,上图大概就是 <code>design</code> 提供的 <code>API</code> ,这里我只做简单的使用介绍,如果想了解其原理的话,可以看一下官方的介绍。</p> <p>这么多我该从何说起呢?我想了下,就按照我做这个小项目,需要的控件顺序说起吧,这样也相当于大家跟我一起做出一个具有 <code>Material Design</code> 风格的 <code>APP</code> 了。</p> <h3>1、主题</h3> <p>一个项目的开始,你得先确定这个项目的主题颜色是什么?你可以使用谷歌给你提供的 <code>Material Theme</code> :</p> <ul> <li><code>@android:style/Theme.Material</code> (深色版本)</li> <li><code>@android:style/Theme.Material.Light</code> (浅色版本)</li> <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li> </ul> <p>当然,也可以使用自定义的主题,先看一下非常普遍的图片:</p> <p><img src="https://simg.open-open.com/show/82e88e3eccb96760844530596e36cdfa.png" alt="记一次公司的Android分享会 " width="550" height="982"></p> <p>image.png</p> <p>可以通过定制不同的类别的主题颜色,来达到预期的主题效果。</p> <ul> <li><code>colorPrimary</code> 项目主颜色,一般是 <code>Titlebar</code> 的背景颜色</li> <li><code>colorPrimaryDark</code> 比主颜色深一点颜色,一般是状态栏颜色</li> <li><code>textColorPrimary</code> 文字的主颜色</li> <li><code>windowBackground</code> 窗口背景颜色</li> <li><code>navigationBarColor</code> 导航栏颜色</li> </ul> <p>通过在 <code>styles</code> 中配置颜色来定制您的主题,并在 <code>AndroidManifest</code> 中应用。</p> <p>开发</p> <p>[图片上传失败...(image-3f86ab-1513646879600)]</p> <h3>2、BottomNavigationView</h3> <p>主题构建好了,下面就是主要内容架构,我大致分为四个模块:武器简介、人物简介、配件简介和空头简介。那么底下就需要一个 <code>tab</code> 进行切换, <code>BottomNavigationView</code> 便开始登场。从名字就可以看出 「底部导航 <code>view</code> 」,主要的作用在于给每个模块一个导航定位的功能。</p> <p>先看一下效果:</p> <p><img src="https://simg.open-open.com/show/ad5924cf6b7949623a34dc91ca07694b.gif" alt="记一次公司的Android分享会 " width="362" height="620"></p> <p>bottomNavigationView.gif</p> <ol> <li> <p>在 <code>menu/</code> 下创建菜单文件:</p> <pre> <code class="language-xml"><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></code></pre> </li> <li> <p><code>XML</code> 中进行引用</p> <pre> <code class="language-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"/></code></pre> </li> <li> <p>代码中设置点击事件</p> <pre> <code class="language-xml">navigation!!.setOnNavigationItemSelectedListener {}</code></pre> </li> </ol> <h3>3、DrawerLayout、NavigationView</h3> <p>和 <code>BottomNavigationView</code> 相对的,不得不介绍一下 <code>NavigationView</code> ,这两者都是导航 <code>View</code> ,后者一般需要配合 <code>DrawerLayout</code> 实现侧滑菜单效果。</p> <p>请看效果:</p> <p><img src="https://simg.open-open.com/show/ad4dad7fa2d6363fb70754f7d5ec98a9.gif" alt="记一次公司的Android分享会 " width="362" height="620"></p> <p>DrawerLayout.gif</p> <p>在 <code>XML</code> 直接引用</p> <pre> <code class="language-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></code></pre> <p>通过配置 <code>layout_gravity</code> 的属性来设置侧滑的方向: <code>start</code> :从左侧划出, <code>end</code> 从右侧划出。</p> <pre> <code class="language-xml">headerLayout: 设置其头布局 menu: 设置菜单布局</code></pre> <p>详细使用请看我之前写的一篇博客: <a href="/misc/goto?guid=4959756102205460436" rel="nofollow,noindex">高大上的 <code>DrawerLayout</code></a></p> <h3>4、Toolbar</h3> <p>整体的架构搭建好了,剩下就是开始每个模块的内容了,内容当然少不了标题,那么就开始介绍一下 <code>Toolbar</code> 。</p> <p><code>Toolbar</code> 作为早期 <code>Android</code> 中 <code>ActionBar</code> 的替代品,定制性和操作性挺高了不少。使用的时候需要设置 <code>NoActionBar</code> 的主题。</p> <pre> <code class="language-xml"><style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"></style></code></pre> <h3>5、RecyclerView+SwipeRefreshLayout</h3> <p>项目中列表肯定是少不了的,那么这就不得不提 <code>RecyclerView</code> 了,强大之处不用多说,感兴趣的话看一下我之前写的博客,对其使用有个简单的介绍: <a href="/misc/goto?guid=4959756102318783517" rel="nofollow,noindex">简单粗暴 <code>RecyclerView</code></a></p> <p>那如果想实现侧滑删除和长按拖拽的功能怎么办呢? <code>RecyclerView</code> 原生就支持这些,只需要继承 <code>ItemTouchHelper.Callback</code> 的类,并实现它几个抽象方法即可。</p> <ol> <li> <p>创建实现 <code>ItemTouchHelper.Callback</code> 的类</p> <pre> <code class="language-xml">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) } }</code></pre> </li> <li> <p>和 <code>RecyclerView</code> 建立连接</p> <pre> <code class="language-xml">val mItemTouchHelper = ItemTouchHelper(ItemTouchHelperCallback()) mItemTouchHelper.attachToRecyclerView(mRecyclerView)</code></pre> </li> </ol> <p>实现效果如下:</p> <p><img src="https://simg.open-open.com/show/128a5d7f286b8631632ceb9e789725ac.gif" alt="记一次公司的Android分享会 " width="362" height="620"></p> <p>RecyclerView.gif</p> <h3>6、CardView</h3> <p>列表结构写好了,里面内容得优化吧, <code>CardView</code> 自带圆角和阴影效果,让每个 <code>Item</code> 看起来就非常的自然,正如其名像卡片一样,也符合了 <code>Material Design</code> 特点。</p> <p>作为 <code>ViewGroup</code> 包裹子 <code>View</code> 实现圆角和阴影的效果:</p> <pre> <code class="language-xml"><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></code></pre> <p>主要由两个属性控制:</p> <ul> <li><code>cardCornerRadius</code> :圆角半径</li> <li><code>cardElevation</code> :高度(直接影响阴影的大小)</li> </ul> <h3>7、CoordinatorLayout+AppBarLayout+Toolbar</h3> <p>列表写好了,接下来就是滑动的交互, <code>CoordinatorLayout</code> :作为根 <code>View</code> 或者是一个活多个子 <code>View</code> 特定的容器,用于协调子 <code>View</code> 之间滑动的交互,可以说 <code>CoordinatorLayout</code> 是整个 <code>Design</code> 库中最核心的控件。</p> <p><code>AppBarLayout</code> 其实就是 <code>LinearLayout</code> ,通过 <code>layout_scrollFlags</code> 来控制滑动的效果。前提是滑动 <code>view</code> 必须实现 <code>NestedScrollingChild</code> 的接口,且需要配置 <code>behavior</code> ,最基本的使用就是:</p> <pre> <code class="language-xml"><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></code></pre> <p>有两个重点:</p> <ul> <li>滑动的 <code>view</code> 必须实现 <code>NestedScrollingChild</code> 接口。比如 <code>RecyclerView</code> 、 <code>NestedScrollView</code> .</li> <li>必须配置 <code>behavior</code> 。 <code>app:layout_behavior="@string/appbar_scrolling_view_behavior"</code></li> </ul> <p>来看一下 <code>layout_scrollFlags</code> 有哪些属性,为了方便理解,将可以滑动的 <code>view</code> 简称为 <code>ScrollView</code> ,设置了 <code>layout_scrollFlags</code> 称为 <code>DependentView</code> :</p> <p>1. scroll</p> <p>子 <code>view</code> 必须设置该属性其他的属性的才会生效,这个是最基本的属性。</p> <p>2. scroll|enterAlways</p> <p>只要 <code>ScrollView</code> 滑动,滑动事件就会交给设置 <code>DependentView</code> ,当 <code>DependentView</code> 滑动结束才会将事件交给 <code>ScorllView</code> 。也就是下面的效果:</p> <p><img src="https://simg.open-open.com/show/1de41f9b6541ee9cc6cc0e203723519a.gif" alt="记一次公司的Android分享会 " width="362" height="377"></p> <p>enterAlways.gif</p> <p>3. scroll|enterAlwaysCollapsed</p> <p>当 <code>ScrollView</code> 向下滑动时, <code>DependentView</code> 先折叠到最小高度(这里是0),然后将事件交给 <code>ScrollView</code> ,当 <code>ScrollView</code> 滑动结束, <code>DependentView</code> 才继续滑动事件,直至展开,如下图所示:</p> <p><img src="https://simg.open-open.com/show/eb2e296e00a44a252029297daa377ec0.gif" alt="记一次公司的Android分享会 " width="362" height="377"></p> <p>enterAlwaysCollapsed.gif</p> <p>4. scroll|enterAlwaysCollapsed|enterAlways</p> <p>这边就展示一下折叠的效果,我们先设置最小的高度</p> <pre> <code class="language-xml"><android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="100dp" android:minHeight="50dp" app:layout_scrollFlags="scroll|enterAlwaysCollapsed|enterAlways" /></code></pre> <p>展示一下效果:</p> <p><img src="https://simg.open-open.com/show/4fb9cca6dacdee213f0407be6762a7f6.gif" alt="记一次公司的Android分享会 " width="362" height="377"></p> <p>see.gif</p> <p>5. scroll|exitUntilCollapsed</p> <p>这个搭配重点在于上拉的时候, <code>DependentView</code> 会先折叠到最小高度,然后事件全部交给 <code>ScrollView</code> 。那下拉的时候就是当 <code>ScrollView</code> 滑动结束,才开始 <code>DependentView</code> 的滑动事件。</p> <p><img src="https://simg.open-open.com/show/b25da6c7fd409a7fdab8507ee28a5eb8.gif" alt="记一次公司的Android分享会 " width="362" height="377"></p> <p>exitUntilCollapsed.gif</p> <p>6. scroll|enterAlways|snap</p> <p>这个 <code>snap</code> 就是在上面的基础上多了一个回弹的效果,当 <code>DependentView</code> 正在滑动,此时手指离开屏幕时, <code>DependentView</code> 会自动移动到离自己较劲的终点或者始点。效果如下:</p> <p><img src="https://simg.open-open.com/show/0669f8d0f5b36a67339db18249f283e7.gif" alt="记一次公司的Android分享会 " width="362" height="377"></p> <p>snap.gif</p> <p>上面的属性完全可以像第四种情况叠加使用,至于效果自己尝试了了才能感觉到它的奥妙之处。</p> <h3>8、转场动画</h3> <p>交互有了,现在看是添加点击跳转效果了。咱们之前跳转动画都是在 <code>startActivity</code> 之后调用 <code>overridePendingTransition</code> 方法,传入进入和退出的动画实现跳转动画。 <code>Android 5.0</code> 提供了强大的转场动画,给每个 <code>item</code> 赋予了生命,跳转时,仿佛每块布局都参与了这次搬迁大运动。</p> <p>使用时,需在 <code>setContentView()</code> 之前加上</p> <pre> <code class="language-xml">window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)</code></pre> <p>跳转时候这样写:</p> <pre> <code class="language-xml">startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(activity).toBundle())</code></pre> <p>跳转的界面设置转场动画或者出场动画:</p> <pre> <code class="language-xml">window.enterTransition = Explode() window.exitTransition = Slide()</code></pre> <p>为了看出效果我设置了2s的延迟:</p> <p><img src="https://simg.open-open.com/show/2d652b5e657da98aba282964afdfca1a.gif" alt="记一次公司的Android分享会 " width="362" height="573"></p> <p>Transition.gif</p> <h3>9、Toast、SnackBar和AlertDialog</h3> <p>基本的界面写完了,剩下的就是一些逻辑上的操作啦,比如「提示」。那么 <code>Android</code> 提示分为三种:</p> <ul> <li>友好的 <code>Toast</code> (比如网络失败)</li> <li>拥有附加行为的提示 <code>SnackBar</code> (比如误删信息回撤)</li> <li>强制让用户做出选择的 <code>AlertDialg</code> (比如未登录)</li> </ul> <p>那么这三种的效果是什么呢?</p> <p><img src="https://simg.open-open.com/show/69368605ed019ee5842bd5a7ba0ccffe.gif" alt="记一次公司的Android分享会 " width="362" height="573"></p> <p>TSA.gif</p> <p>大概先讲这些,有时间再进行后续补充。</p> <h2><code>Material Design</code> 在「口袋」中的应用</h2> <p>其实在咱们的「口袋贵金属」项目中也到找到很多 <code>MD</code> 的元素。</p> <p>首先是点击的水波纹效果:</p> <p><img src="https://simg.open-open.com/show/72875ce40dd7613ea979867acc98a467.gif" alt="记一次公司的Android分享会 " width="362" height="339"></p> <p>ripple.gif</p> <p>其次是交易圈的滑动交互:</p> <p><img src="https://simg.open-open.com/show/59324e8d36efeec1caaf61932dd8a940.gif" alt="记一次公司的Android分享会 " width="362" height="558"></p> <p>circle.gif</p> <p>还有就是本人在「口袋」接手的第二个需求,「个人中心」。看一下效果:</p> <p><img src="https://simg.open-open.com/show/b2eb9468c4fca7b3c33711fbab1e4ef6.gif" alt="记一次公司的Android分享会 " width="362" height="558"></p> <p>personal.gif</p> <p>严格按照 <code>Material Design</code> 风格进行开发,相信一定能开发出非常漂亮的 <code>APP</code> !</p> <p> </p> <p>来自:<a href="http://www.jianshu.com/p/1f3761aa1a30?utm_source=tuicool&utm_medium=referral">http://www.jianshu.com/p/1f3761aa1a30</a></p> <p> </p>
本文由用户 MeredithKim 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!