title
author
date
CreateTime
categories
Xamarin Forms 進度條控件
lindexi
2018-2-13 17:23:3 +0800
本文翻譯：http://xamlnative.com/2016/04/14/xamarin-forms-a-simple-circular-progress-control/ 裡面都是胡說的，如果看不懂可以聯系郵箱 源代碼：https://github.com/billreiss/xamlnative/tree/master/XamarinForms/CircularProgress 最近作者需要做一個簡單的圓形的等待控件在一個Xamarin Forms應用，效果可以看
看起來很容易做，不知道怎麼微軟就沒有弄個這麼好看，微軟沒有，我們來直接做，看起來這個很簡單
原來的進度條是一個線，沒有UWP那個ring，我要做一個，可以使用本地控制、自定義渲染器渲染、使用元件裡面弄很多我之前做的、到Nuget找，這些都覺得不是我要的。
看到他們沒有，我就很高興，我可以做一個很厲害的，自然這裡我是原文的那個，寫了Xaml的大神
我首先拿出一個本子，我應該弄矢量圖形，在Xamarin原生還沒有，我會為每個平台定制渲染，是以他不支援我不能使用，我想到使用圖檔，矢量圖檔，既然想要圖檔我如何讓很多圖檔看起來是一個
我想到簡單使用兩圖，實際對稱兩圖是表示4圖，不停覆寫的兩個圖檔表示進度，兩個圖檔顔色不同
圖檔可以在：https://github.com/billreiss/xamlnative/tree/master/XamarinForms/CircularProgress/CircularProgress/CircularProgress.Droid/Resources/drawable
兩個儲存格式Png圖檔，一個圖表示0-50%，我們叫第一圖“completed”，第二“pending”，顔色深的是第一，進度我們需要一個completed，兩個pending，我們先放completed，然後在它上面放pending，在pending對面放pending，第一個圖在代碼叫“progress1”，第二“background1”，第二個覆寫第一個，第三個pending旋轉180，總的一個藍色圓，這是0%
25%：我們旋轉pending第二個，可以讓看到下面的圖，這個我們覆寫原來的pending因為顔色一樣，是以我們就可以看到25%
50%：我們需要改變，兩個completed，一個pending，pending覆寫completed，但是隻是覆寫一個，他們的層次：
completed
pending
可以讓pending覆寫右邊的completed，超過50%讓pending右旋
如果覺得上面說的還是不知道，可以看代碼
我們需要把圖檔放在不同平台的檔案夾，ios放在Resources檔案夾，Android放在 AndroidResource
我們把控件放MainPage.xaml
我們讓time進度加0.1每0.02s
不使用自定義渲染，可以在各個平台沒有使用厲害的技術覆寫兩個圖做出從0-100%，可以使用不同角度表示0.001