探索v28 Android Support 库的增补

原文:Exploring the v28 Android Design Support Library Additions

Android支持库的第28版最近发布了——在当前的alpha版本中,有一系列令人兴奋的新组件,我们现在可以访问它。在本文中,我想了解一下以Material view组件的形式对支撑库进行的添加。

Material Button

Material按钮是一个小部件,可用于在应用程序用户界面中显示Material style按钮。这个类从appapp button类扩展,您可能已经在您的项目中使用了这个类,但是这有什么不同呢?这个按钮将会被设计成一种材质的外观,而不需要使用样式标志来定制它。我们可以使用材料按钮类,在我们的视图中,它已经有了我们所追求的材料外观和感觉——把它看作是一个方便的类。

我们可以把这个按钮添加到我们的布局文件中:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MATERIAL BUTTON"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

默认情况下,这个类会使用你的主题的重音颜色来填充背景色,以及白色的按钮文本颜色。如果按钮没有被填满,那么你的主题的重音颜色将被用于按钮文本颜色,以及一个透明的背景。
如果我们希望自己添加一些进一步的样式,那么我们可以通过使用来自于材料按钮样式的属性集合来做到这一点。

  • app:icon--用于定义在按钮开始时显示的绘图


  • app:iconTint-- 用于从app:icon属性着色正在使用的图标
  • app:iconTintMode--定义用于图标色调的模式


  • app:iconPadding--在应用中使用的图标的填充:图标属性


  • app:additionalPaddingLeftForIcon--定义在应用程序中使用的图标左边的填充:图标属性


  • app:additionalPaddingRightForIcon--定义在应用程序中使用的图标右边的填充物:图标属性


  • app:rippleColor--用于按钮波纹效果的颜色,这种颜色将被使用
  • app:backgroundTint--用于在按钮的背景上涂上一层颜色。如果你想要改变按钮的背景颜色,使用这个属性而不是背景来避免打破按钮的样式
  • app:backgroundTintMode--用于定义用于背景色的模式


  • app:strokeColor--按钮描边的颜色
  • app:strokeWidth--按钮行程的宽度



    app:cornerRadius--用于定义按钮的圆角的半径

Chip

chip组件允许我们在布局中显示一个芯片视图。这本质上是一个具有圆形背景的文本——这些文本的目的是向用户显示某种形式的文本集合,这些文本可能是可选的,也可能是不可选择的。例如,可以根据应用程序中的当前上下文向用户显示一组可选择的建议列表。


我们可以像这样在我们的布局中添加一个chip,使用这个app:chipText属性来设置在chip上显示的文本:

<android.support.design.chip.Chip
    android:id="@+id/some_chip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:chipText="This is a chip" />

还有一组其他属性可以用来进一步对chip进行样式化:

  • app:checkable--用于声明chip是否可以按选定的/未被选择的方式进行。如果禁用,检查的行为方式与按钮相同
  • app:chipIcon--用于在chip中显示一个图标
  • app:closeIcon --用于在chip内显示一个关闭图标


我们也可以在我们的chip实例上设置一些侦听器,这对于侦听来自我们的用户的交互是很有用的。如果我们的chip是可检查的,那么我们很可能会想要监听这个检查状态被更改的时间。我们可以使用setonchecchangelistener监听器:

some_chip.setOnCheckedChangeListener { button, checked ->  }

同样的道理也适用于当我们想要在使用的时候监听与关闭图标的交互。为此,我们可以利用setOnCloseIconClickListener函数来注册密切的交互事件:

some_chip.setOnCheckedChangeListener { button, checked ->  }

Chip Group

如果我们向用户显示一组chip,我们希望确保它们在我们的视图中正确地组合在一起。为此,我们可以使用ChipGroup视图组件:


如果我们想要使用ChipGroup,我们只需要将chip视图封装在ChipGroup组件中:

<android.support.design.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="This" />

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="is" />

    // more chips...

</android.support.design.chip.ChipGroup>

默认情况下,你的chip视图可能会显得有点拥挤。如果是这样,您可以通过在ChipGroup本身中使用以下属性为子视图添加一些间隔:

  • app:chipSpacing --在水平和垂直轴上增加间距
  • app:chipSpacingHorizontal --在水平轴上增加间距
  • app:chipSpacingVertical--在纵轴上增加间距



    我们还可以声明我们的子Chip视图将显示在我们的ChipGroup容器内的单个行内。使用app:singleLine属性:


在这样做的时候,您需要将ChipGroup包装成一个滚动视图,比如水平滚动视图,这样用户就可以滚动显示的chip:

<HorizontalScrollView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.design.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleLine="true">

        <android.support.design.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Some chip" />

        // more chips...
    </android.support.design.chip.ChipGroup>

</HorizontalScrollView>

Material Card View

在我们的应用程序中,我们可能在某些时候使用了CardView组件。支持库现在包含一个名为Material Card View的组件,它为我们提供了一个开箱即用的实物样式cardview实现。

cardview可以像这样添加到你的布局中:

<android.support.design.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp">
    ... child views ...
</android.support.design.card.MaterialCardView>

您可以使用以下两个属性来进一步对cardview进行样式化:

  • app:strokeColor--在给定的笔触中使用的颜色,必须设置为显示笔触
  • app:strokeWidth--在视图的边框上应用的宽度

除了这两个属性,您还可以使用原始可用的属性,如app:cardBackgroundColor等,来对cardview进行样式化。

Bottom App Bar

底部的应用程序栏是一个新的组件,它允许我们在布局的底部显示一个类似于工具栏的组件。这允许我们以一种比标准工具栏更容易交互的方式向我们的用户显示组件

您可以将下面的appbar添加到布局文件中:

<android.support.design.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

看起来,底部的应用程序栏必须有一个分配给它的菜单,以便它能显示在屏幕上。这可以像这样进行编程:

bottom_app_bar.replaceMenu(R.menu.main)

当涉及到对底部应用程序条进行样式化时,你可以使用几个属性来实现这一点。

  • app:fabAttached--无论FAB是否已附加到最底层的应用程序栏。
    您可以使用app:layout_anchor在您希望附加的FAB组件上附加一个晶圆厂,使用底部应用栏的ID。
    如果连接了FAB,它将插入底部应用程序栏,否则FAB将保持在底部应用程序栏上方
  • app:fabAlignmentMode--声明了FAB的位置,它已经连接到底部的应用程序栏。这可以是两头



    或者在中心:


  • app:fabCradleVerticalOffset --声明所使用的芯片的垂直偏移量。默认情况下,这是0dp:


然而,设置一个dp值将允许该芯片垂直向上移动:


  • app:backgroundTint--用于在视图的背景中应用一种色调。如果您希望设置视图的背景颜色,那么应该在android:后台属性上使用。这样做将确保视图的主题保持稳定。

总结

在我看来,这些是支持库的一些简洁的补充——我期待着能够直接使用材料主题的组件。我也很高兴能找到一个用例来说明底部应用程序栏的使用情况,但我确信在此之前,支持库版本还需要一些时间。像往常一样,我很想听听你对这些新组件的想法或评论!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容