鍍金池/ 教程/ Android/ 紙片
Snackbars 與 Toasts
選擇器
網(wǎng)格
紙片
色彩
手勢(shì)
內(nèi)容選取
準(zhǔn)則
導(dǎo)航過(guò)渡
進(jìn)度和動(dòng)態(tài)
概述
數(shù)據(jù)格式
搜索(Search)
Roboto 字體
副標(biāo)題
Material 屬性
書寫
空狀態(tài)
按鈕
提示框(Dialogs)
開關(guān)
導(dǎo)航
單位和度量
列表
度量與邊框
真實(shí)的動(dòng)作
改進(jìn)的操作
底部動(dòng)作條
加載圖片
卡片
工具提示(Tooltips)
菜單
設(shè)備
可達(dá)性
分隔線(Dividers)
高度和陰影
環(huán)境
抽屜式導(dǎo)航
響應(yīng)式交互
Tabs
圖標(biāo)
滾動(dòng)時(shí)的技巧
更新記錄
錯(cuò)誤
影像處理
設(shè)置
滑塊控件(Sliders)
列表控制
圖像
文本框
布局模板
雙向性
選擇控制器
調(diào)色板
自適應(yīng) UI
貼片集
數(shù)據(jù)表
滑動(dòng)刷新
啟動(dòng)屏幕
按鈕:浮動(dòng)操作按鈕
打動(dòng)用戶的細(xì)節(jié)
應(yīng)用結(jié)構(gòu)
有意義的轉(zhuǎn)場(chǎng)動(dòng)畫
字體排版(Typography)
結(jié)構(gòu)

紙片

Chips (我們暫時(shí)叫他紙片視圖)是一種小塊的用來(lái)呈現(xiàn)復(fù)雜實(shí)體的塊,比如說(shuō)日歷的事件或聯(lián)系人。它可以包含一張圖片,一個(gè)短字符串(必要時(shí)可能被截取的字符串),或者是其它的一些與實(shí)體對(duì)象有關(guān)的簡(jiǎn)潔的信息。Chips 可以非常方便的通過(guò)托拽來(lái)操作。通過(guò)按壓動(dòng)作可以觸發(fā)懸浮卡片(或者是全屏視圖)中的 Chip 對(duì)應(yīng)實(shí)體的視圖,或者是彈出與 Chip 實(shí)體相關(guān)的操作菜單。

聯(lián)系人紙片

聯(lián)系人的紙片視圖用于呈現(xiàn)聯(lián)系人的信息。當(dāng)用戶在輸入框(收件人一欄)中輸入一個(gè)聯(lián)系人的名字時(shí),聯(lián)系人紙片視圖就會(huì)被觸發(fā),用于展示聯(lián)系人的地址以供用戶進(jìn)行選擇。而且聯(lián)系人的紙片可以被直接添加到收件人一欄中去。

聯(lián)系人的紙片視圖主要用于幫助用戶高效的選擇正確的收件人。

http://wiki.jikexueyuan.com/project/material-design/images/components-chips-contactchips-chips_03a_large_mdpi.png" alt="contact chips" />
http://wiki.jikexueyuan.com/project/material-design/images/components-chips-contactchips-chips_03b_large_mdpi.png" alt="contact chips" />

關(guān)閉狀態(tài)的聯(lián)系人紙片視圖

  • 聯(lián)系人名字使用的字體為:Roboto,常規(guī),14sp

  • 當(dāng)點(diǎn)擊關(guān)閉狀態(tài)下的聯(lián)系人紙片視圖,它就會(huì)展開并且顯示出聯(lián)系人的地址

打開狀態(tài)的聯(lián)系人紙片視圖

  • 默認(rèn)狀態(tài)下,最頂?shù)穆?lián)系方式被激活并選中

  • 聯(lián)系人名字的字體為:Roboto,常規(guī),16sp

  • 地址文本的字體為: Roboto,常規(guī),14sp

  • 當(dāng)用戶選擇后,紙片視圖被關(guān)閉

http://wiki.jikexueyuan.com/project/material-design/images/components-chips-contactchips-chips_08_large_mdpi.png" alt="關(guān)閉狀態(tài)的聯(lián)系人紙片視圖" />

http://wiki.jikexueyuan.com/project/material-design/images/components-chips-contactchips-chips_11_large_mdpi.png" alt="打開狀態(tài)的聯(lián)系人紙片視圖" />

http://wiki.jikexueyuan.com/project/material-design/images/components-chips-contactchips-chips_06_large_mdpi.png" alt="打開狀態(tài)的聯(lián)系人紙片視圖各種狀態(tài)" />

原文: Chips 翻譯: Kris 校對(duì): huanglizhuo

上一篇:色彩下一篇:Material 屬性