前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Android Design Support Library初探-更新中

Android Design Support Library初探-更新中

作者头像
小小工匠
发布2021-08-16 10:18:25
发布2021-08-16 10:18:25
1.1K00
代码可运行
举报
文章被收录于专栏:小工匠聊架构小工匠聊架构
运行总次数:0
代码可运行

导读

这个兼容库容易和Google之前发布的 Android Support Library 22.1 混淆,两者的区别在于:

  • Android Support Library 22.1 只是支持了一些基本空间的材料设计化,
  • Android Design Support Library 更多的是对一些特效的实现,这个库和github上的很多开源的项目有很大的关系,material design的很多效果,同一种效果在github上有太多的实现,现在官方将其标准化了。
  • -

原文地址

如果你的英文666666,那就来这里看吧~ Android Design Support Library

重要控件

Android 5.0是有史以来最重要的Android版本之一,这其中大部分归功于material design的引入,这种新的设计语言让整个Android的用户体验焕然一新。 官方的详细专题有更详细的说明来介绍使用material design带来的好处。但我们也知道,这种设计对于开发者来讲,尤其是在意向后兼容的开发者来说是一种挑战。

在Android Design Support Library的帮助下,我们为所有的开发者,所有的2.1以上的设备,带来了一些重要的material design控件。 比如: navigation drawer view, floating labels for editing text, a floating action button, snackbar, tabs, and a motion and scroll framework to tie them together.

  • navigation drawer view,
  • floating labels for editing text(输入控件的悬浮标签)
  • floating action button (悬浮操作按钮)
  • snackbar
  • tabs(选项卡)
  • a motion and scroll framework to tie them together(将这些控件结合在一起的手势滚动框架)

官方视频简介

Navigation View

抽屉导航是app识别度与内部导航的关键,保持这里设计上的一致对app的可用性至关重要,尤其是对第一次使用的用户。NavigationView 通过提供抽屉导航所需要的框架让实现更简单,同时它还能够直接通过菜单资源文件来直接生成导航元素。

把NavigationView 作为DrawerLayout的内容视图来使用,比如下面的布局:

代码语言:javascript
代码运行次数:0
运行
复制
<android.support.v4.widget.DrawerLayout
        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:fitsSystemWindows="true">

    

    <android.support.design.widget.NavigationView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/drawer_header"
            app:menu="@menu/drawer"/>
android.support.v4.widget.DrawerLayout>

你会注意到NavigationView的两个属性:

  • app:headerLayout :控制头部的布局(可选)
  • app:menu:导航菜单的资源文件(必选),也可以在运行时配置。

NavigationView处理好了和状态栏的关系,可以确保NavigationView在API21(5.0)设备上正确的和状态栏交互。

最简单的抽屉菜单就是几个可点击的菜单集合:

代码语言:javascript
代码运行次数:0
运行
复制
<group android:checkableBehavior="single">
    <item
        android:id="@+id/navigation_item_1"
        android:checked="true"
        android:icon="@drawable/ic_android"
        android:title="@string/navigation_item_1"/>
    <item
        android:id="@+id/navigation_item_2"
        android:icon="@drawable/ic_android"
        android:title="@string/navigation_item_2"/>
group>

被点击过的item会高亮显示在抽屉菜单中,让用户知道哪个菜单被选中。

你也可以在menu中使用subheader来为菜单分组:

代码语言:javascript
代码运行次数:0
运行
复制
<item
    android:id="@+id/navigation_subheader"
    android:title="@string/navigation_subheader">
    
        <item
            android:id="@+id/navigation_sub_item_1"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_sub_item_1"/>
        <item
            android:id="@+id/navigation_sub_item_2"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_sub_item_2"/>
    
item>

你可以设置一个OnNavigationItemSelectedListener,使用起setNavigationItemSelectedListener()来获取元素被选中的回调时间,它为你提供被点击的 菜单元素 ,让你可以处理选择事件,改变复选框状态,加载新内容,关闭导航菜单,以及其他任何你想做的操作。

效果和Code请移步 NavigationDrawer和NavigationView-Android M新控件


输入框控件的悬浮标签

在material design中,即使是简单的EditText,也有提升的余地。 通常EditText会在用户输入第一个字母后隐藏提示信息,但是现在可以使用TextInputLayout来将EditText封装起来,提示信息(hint)会变成一个显示在EditText之上的floating label,这样用户就始终知道他们现在输入的是什么了。

TextInputLayout:

Layout which wraps an EditText (or descendant) to show a floating label when the hint is hidden due to the user inputting text. Also supports showing an error via setErrorEnabled(boolean) and setError(CharSequence).

效果图

Code

第一步 加入依赖

本工程的build.gradle中

代码语言:javascript
代码运行次数:0
运行
复制
 compile 'com.android.support:design:23.1.1'

悬浮操作按钮 Floating Action Button

Snackbar

选项卡

CoordinatorLayout, 手势, 以及滚动

CoordinatorLayout与悬浮操作按钮

CoordinatorLayout与app bar

可伸缩折叠的Toolbar (Collapsing Toolbar)

CoordinatorLayout与自定义view


参考文档

官方博客

官方文档

官方Demo

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016/03/03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 导读
  • 原文地址
  • 重要控件
    • Navigation View
    • 输入框控件的悬浮标签
      • 效果图
      • Code
    • 悬浮操作按钮 Floating Action Button
    • Snackbar
    • 选项卡
    • CoordinatorLayout, 手势, 以及滚动
    • CoordinatorLayout与悬浮操作按钮
    • CoordinatorLayout与app bar
    • 可伸缩折叠的Toolbar (Collapsing Toolbar)
    • CoordinatorLayout与自定义view
  • 参考文档
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档