设为首页 加入收藏

TOP

Android Material Design(一)
2017-10-12 17:57:18 】 浏览:857
Tags:Android Material Design

文字输入时的悬浮标签

尽管 EditText 已经为 material design 做了一些改善,但是还不够,譬如它在我们输入第一个字符的时候,就会自动隐藏掉提示标签。现在你该使用 TextInputLayout 了,它会在用户开始输入之后,自动将提示标签悬浮到 EditText 上方,这样用户就永远都能知道输入内容的上下文。

floatinglabel
    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Please input your name" />
    </android.support.design.widget.TextInputLayout>

另外,你也可以通过调用 setError() 方法,在 EditText 下方显示一个出错提示消息。多么贴心的设计,有没有?

Floating Action Button(浮动操作按钮)

Floating action button 是一个圆形按钮,代表当前页面最重要的交互动作。Design Library 里面的 FloatingActionButton 给了你一个简单一致的实现,它会默认使用你主题中 colorAccent 属性定义的色调。

actionbutton

在标准尺寸之外,它也支持 mini 尺寸。FloatActionButton 继承自 ImageView,所以你也可以使用android:src 或者其他方法(如 setImageDrawable())来控制它的外观。

Snackbar

如果要提供一个轻量、快速的操作反馈方式,那就非 Snackbar 莫属了。Snackbar 在屏幕最下方展示,包含文字和一个可选的操作,它会在一定时间后自动消失,用户也可以通过滑动手势来提前消除它。 

Snackbar 可以支持滑动手势,也可以响应点击动作,远比 Toast 强大,但是你会发现它的 API 非常眼熟:

Snackbar
.make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG)
.setAction(R.string.snackbar_action, myOnClickListener)
.show(); // Don’t forget to show!

你会注意到 make 的第一个参数,Snackbar 会试图寻找合适的父视图,来确保它能显示在底部的正确位置。

Tabs(选项卡)

在应用内,通过 tab 在不同视图间切换,这并不是 material design 中才有的新概念。Tabs 一般用来作顶层导航,或者组织、展示应用内不同分组的内容。如下图所示:

tabs

Design Library 的 TabLayout 控件实现了固定 tab(所有 tab 平分秋色,宽度固定)和滚动 tab(宽度根据标题长度自适应,可以水平滑动)两种形式,你可以用代码来添加 tab:

TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

如果你使用 ViewPager 来水平分页,可直接在 PagerAdapter.getPageTitle() 中来创建 tab,最后通过 setupWithViewPager() 方法将它们绑定在一起。这能确保内容变化时 tab 和 ViewPager 会自动同步起来。

CoordinatorLayout、动画和滚屏

打造一个符合 material design 风格的应用,独特的视觉效果只是一方面,动作和手势也是非常重要的一部分。 Material design 里面包含了大量的手势,譬如点击的波纹效果和其他一些有用的转场动画。Design Library 介绍了 CoordinatorLayout 的布局方式,它提供了一个附加层,用来控制子视图间的点击事件,Design Library 里面很多控件都使用了这种布局。

CoordinatorLayout 和浮动操作按钮

FloatingActionButton 就是一个绝好的例子。当你将 FloatingActionButton 作为子元素加入 CoordinatorLayout,然后将 CoordinatorLayout 作为参数传给 Snackbar.make() 的时候,Snackbar 没有显示到 FloatingActionButton 上面。FloatingActionButton 利用了 CoordinatorLayout 提供的额外回调接口,在 Snackbar 展现的时候自动上移,消失的时候自动复位,所有这一切都不需要写任何代码。

CoordinatorLayout 还提供了一个 layout_anchor 的属性,连同 layout_anchorGravity 一起,可以用来放置与其他视图关联在一起的悬浮视图(如 FloatingActionButton)。

CoordinatorLayout 和 App Bar

CoordinatorLayout 的另一个主要使用场景,则与 appbar(以前的 actionBar)和滚屏相关。你可能已经在布局里面使用过 Toolbar,它允许你简单修改外观、整合图标以和其余部分一致。Design Library 将所有这些东西放到了下一级:使用 AppBarLayout,让你的 Toolbar 和其他视图(如 TabLayout 提供的 tab 视图),可以响应 ScrollingViewBehavior 标记的同级视图的滚动事件。此时你可以这样来创建一个布局:

coordinator_appbar

现在,随着用户滚动 RecyclerView, AppBarLayout 也会响应这些事件(通过使用子节点的 scroll flag 来控制它们如何滚入和滚出屏幕)。Flags 包括:

  • scroll: 这个标志会被设置到所有希望滚出屏幕的视图上,如果不设置这一标志,则视图会被一直保留在屏幕顶部。
  • enterAlways: 这个标志会确保任何下滑滚屏都会触发视图的展现,等于开启了一种「快速返回」模式。
  • enterAlwaysCollapsed: 如果设置了 minHeight 和这个标志,你的视图通常会折叠显示,只有当滚动视图已经到达了它的顶点以后才会打开到完整高度。
  • exitUntilCollapsed: 这个标
首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇Android—基于Socket与上传图片到.. 下一篇android-自定义控件之液位指示器

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目