#我是一個可愛的搬磚工系列# 嘗試對照英文翻譯學(xué)習(xí)MD的組件設(shè)計，借此加深各種組件的應(yīng)用~
Material Design鏈接：Material Design——Image lists
圖像列表在有組織的網(wǎng)格中顯示圖像集合。
一、用法
圖像列表表示重復(fù)模式中的項集合。它們有助于提高他們對內(nèi)容的視覺理解。
△ 原則
· 視覺?圖像列表允許用戶根據(jù)圖像瀏覽內(nèi)容
· 比較?圖像列表允許用戶輕松地比較集合中的項
· 完整性?圖像列表與周圍的內(nèi)容和布局相結(jié)合
△ 類型
· 標(biāo)準(zhǔn)圖像列表對于同等重要的項目是最好的。他們有一個統(tǒng)一的容器大小，比率和填充。
·?在一個集合中，拼好的圖像列表強調(diào)特定的項目，它們使用不同的容器大小和比率創(chuàng)建層次結(jié)構(gòu)。
·?機(jī)織圖像列表便于瀏覽對等內(nèi)容，它們在不同比例的容器中顯示內(nèi)容，以創(chuàng)造有節(jié)奏的布局。
·?砌體圖像列表便于瀏覽未經(jīng)裁剪的對等內(nèi)容，容器高度是根據(jù)圖像大小確定的。
二、分析
圖像列表由設(shè)置為特定高寬比的容器組成。圖像列表中的每個項目都可以在圖像容器下面或上方顯示可選文本和圖標(biāo)。
1. Image container
圖像容器顯示圖像列表項的圖像或插圖。
2. Text labels (optional)
文本標(biāo)簽顯示與圖像列表項相關(guān)的一行文本。
3. Actionable iconography (optional)
可操作的圖像可以表示相關(guān)的行為。
4. Text protection (optional)
文本保護(hù)是一個半不透明的條形碼放置在圖像前面，以保持文本上方的可讀性。
5. Image list item
圖像列表項表示圖像列表中的單個項。
△ 間隔
PaddingPadd在圖像列表中的圖像之間可以有所不同。建議使用以下填充值：1、2、4、8、16、20、24、32 dp。
△ 操作
圖像列表項可以被點擊、拖動、篩選或排序。
△ 布局網(wǎng)格
· 定義布局?
圖像列表列結(jié)構(gòu)不需要與布局網(wǎng)格對齊，只有圖像列表本身的周長需要與布局網(wǎng)格對齊。
· 響應(yīng)
圖像列表繼承布局網(wǎng)格的響應(yīng)行為。
△ 滾動
圖像列表可以垂直或水平滾動。圖像列表中的所有項必須作為集合一起滾動。圖像裁剪可用于指示滾動方向。
三、類型
△ 標(biāo)準(zhǔn)圖像列表
對于同等重要的項目，標(biāo)準(zhǔn)圖像列表是最好的，他們有一個統(tǒng)一的容器大小，比率和填充。
標(biāo)準(zhǔn)圖像列表可以與文本標(biāo)簽一起顯示，也可以不帶文本標(biāo)簽顯示。
1.只包含圖像的圖像列表
2.帶有圖像和文本標(biāo)簽的圖像列表
△ 凹凸圖像列表
在一個集合中，拼好的圖像列表強調(diào)特定的項目而不是其他的項目。他們使用不同的容器大小和比率來創(chuàng)建跨圖像的層次結(jié)構(gòu)。
△ 機(jī)織圖像列表
機(jī)織圖像列表使用交替的容器比率來創(chuàng)建有節(jié)奏的布局。機(jī)織圖像列表是瀏覽對等內(nèi)容的最佳選擇。
△?砌體圖像列表
砌體圖像列表使用動態(tài)大小的容器高度來反映每個圖像的高寬比，此圖像列表最好用于瀏覽未裁剪的對等內(nèi)容。
END.THANKS FOR YOUR READING~
如有不當(dāng)，還請多多指教~
