【Win 10應用開發】Adaptive磁貼模闆的XML文檔結構

在若幹天之前，老周給大家講了Adaptive Toast通知的XML模闆，是以相應地，今天老周給大家介紹一下Adaptive磁貼的新XML模闆。

同樣道理，你依舊可以使用8.1時候的磁貼模闆，在win 10的API中也是支援的，此外，Win10 App還支援全新的自适應磁貼模闆，本文老周就給大家先講一下基本結構，下一篇文章中咱們再說一說複雜排版。

應用程式的圖示可以分為兩類：第一類是應用商店上專用的，就是你的應用送出到商店後，給使用者看的圖示；另一類就是應用本身的一些圖示或磁貼。

磁貼其實也就這麼幾種，大家隻需要知道這麼幾個尺寸就可以了。

1、44乘44，顯示在所有應用程式清單中的圖示，這是尺寸最小的。

2、71乘71，顯示在開始螢幕上的小圖示。

3、150乘150，顯示在開始螢幕上的中圖示。

4、310乘150，顯示在開始螢幕上的寬圖示。

5、310乘310，顯示在開始螢幕上的大圖示。

用于圖示的圖像應選用PNG格式，背景可以透明，顯示出來比較晶瑩清透。如果你要使用多種比例的圖示，可以在放圖示的目錄下，比如預設的Assets目錄，在目錄下建兩個子目

\scale-100

\scale-200

scale-xx表示縮放比例，這個會被系統自動識别，然後這兩個目錄下分别放對應大小的圖檔，圖檔的檔案名必須相同。

用PS制作圖示時，可以先做大尺寸的，因為圖檔縮小不會模糊，但放大有可能模糊。以做44X44為例，我先做200%比例的，44乘以2等于88，是以200%大小的圖檔為88x88。

做完200%的圖檔并導出為PNG檔案後，再在PS中按快捷鍵Ctrl + Alt + I，把圖像大小進行縮小，按比例縮小為50%，這樣表示44x44的圖像就得到了。再導出PNG就可以了。這樣實際每個圖示我們隻做一次即可。

組織好的資源目錄如下圖所示。

然後在清單檔案中就好辦了，因為正式版的SDK已經有清單編輯器了。

對号入座即可，我就不多說了。

其實在實際開發中，你未必一定需要所有尺寸的圖示，我這裡是為了示範各個大小版本的磁貼，是以才弄齊全了。

接下來我們開始了解自适應磁貼了，都說是磁貼了，自然它的根節點是tile了（是以Toast通知的根節點是toast）。

<tile>
   ……
</tile>      

磁貼是展示文本和圖像給使用者看的，當然是可視化的元素了，是以tile下面是visual元素。

<tile>
  <visual>
    
  </visual>
</tile>      

我們也知道，磁貼有N種大小的，而每一種大小對應不同的視圖，每一種視圖用一個binding元素來包裝，比如我這個例子，它支援所有尺寸的磁貼，因而應該包含多個binding元素。

<tile>
  <visual>
    <binding template="TileSmall">
      
    </binding>
    <binding template="TileMedium">
      
    </binding>
    <binding template="TileWide">
      
    </binding>
    <binding template="TileLarge">
      
    </binding>
  </visual>
</tile>      

binding元素的template屬性，現在已統一為四個值：

TileSmall：小圖示，71x71

TileMedium：中圖示，150x150

TileWide：寬圖示，310x150

TileLarge：大圖示，310x310

模闆的名字是大小寫敏感的，是以在輸入時，大小寫不能輸錯。visual元素下可以有1到4個binding，你需要哪些大小的圖示，就聲明多少個binding。

每個binding元素下可以放text和image元素，text表示文本，image表示圖像。

比如這樣：

<tile>
  <visual>
    <binding template="TileSmall">
      <text>小圖示</text>
    </binding>
    <binding template="TileMedium">
      <text>中圖示</text>
    </binding>
    <binding template="TileWide">
      <text>寬圖示</text>
    </binding>
    <binding template="TileLarge">
      <text>大圖示</text>
    </binding>
  </visual>
</tile>      

更新磁貼後如下所示。

我們還可以在裡面使用圖像。

<tile>
  <visual>
    <binding template="TileWide">
      <text>很好玩。</text>
      <image src="ms-appx:///Assets/Images/2.png" />
    </binding>
  </visual>
</tile>      

image元素的src屬性指定圖像的來源，可以是ms-appx:（安裝目錄内）、ms-appdata:（本地資料目錄），或者網絡上的圖像都行。

磁貼更新後如下。

把image元素的placement屬性設定為background，可以讓圖檔作為磁貼的背景。

<tile>
  <visual>
    <binding template="TileWide">
      <image src="ms-appx:///Assets/Images/bg1.png" placement="background" />
      <text>看看背景圖。</text>
    </binding>
  </visual>
</tile>      

更新後的磁貼如下圖。

如果文本的内容太長，你還可以考慮讓它自動換行。例如：

<tile>
  <visual>
    <binding template="TileLarge">
      <text hint-wrap="true">看看，前面山坡上坐着個傻二愣，張開他那垃圾鏟一樣的大嘴巴，也沒有人知道他在嚷什麼。說的也不知道是哪個星球的語言。其聲音就像老驢拉石磨似的。</text>
    </binding>
  </visual>
</tile>      

hint-wrap屬性是布爾值，如果自動換行，則為true，否則為false。更新後的磁貼如下圖所示。

你還能夠設定文本的對齊方式，有效的對齊方式為左、中、右。

<tile>
  <visual>
    <binding template="TileWide">
      <text hint-align="left">左對齊</text>
      <text hint-align="center">居中對齊</text>
      <text hint-align="right">右對齊</text>
    </binding>
  </visual>
</tile>      

hint-align屬性設定文本的水準對齊方式，有效值為：

left——左對齊。

center——居中對齊

right——右對齊

磁貼更新後如下圖所示。

text元素不能設定文本的垂直對齊方式，隻能通過binding元素的hint-textStacking屬性來設定，有效的取值為；

top——頂部對齊

bottom——底部對齊

比如下面例子，文本對齊到磁貼的頂部。

<tile>
  <visual>
    <binding template="TileMedium" hint-textStacking="top">
      <text>文本對齊到頂部</text>
    </binding>
  </visual>
</tile>      

如果你喜歡圓形圖像，你還可以選擇把圖像裁剪為圓形。看看下面的例子：

<tile>
  <visual>
    <binding template="TileLarge">
      <image src="ms-appx:///Assets/Images/7.png" hint-crop="circle" />
    </binding>
  </visual>
</tile>      

hint-crop預設為none，即不裁剪，是以如果不想裁剪圖像就不用加這個屬性，如果要剪為圓形，就設定為circle。

磁貼更新後得到的結果如下圖所示。

看到沒，狄大人和元芳一起去手機店買手機。

好的，今天給大家展示了自适應磁貼的幾個新特性，下一篇文章就介紹一下如何在磁貼進行分列布局。

本文示例源碼下載下傳：https://files.cnblogs.com/files/tcjiaan/AdaptiveTileDemoApp.zip