Axure 教程：用中繼器實現日曆效果

按照此方法實現的日曆支援以下功能：

可以在中繼器中配置當前日期，當前日期的背景顯示灰色圓圈；

可以在中繼器中配置某天是否顯示紅點；

可以在中繼器中配置本月1日從星期幾開始。

本文僅適用於具有一定Axure使用經驗的使用者閱讀。

Axure版本：9.0

實現步驟

新增星期 -> 新增天 -> 新增今日背景 -> 新增紅點效果。

1. 新增星期

1）在頁面中新增一箇中繼器控制元件，使用中繼器中預設的圖形，去掉其邊框線並設定圖形的寬度和高度。寬度等於原型圖的寬度除以7（這裡以小米MIX2S的螢幕寬度392/7=56設定），高度設定為40（高度根據自己的喜好設計即可），這些都設定好之後效果如下：

2）為中繼器中的矩形命名，如weekday，命名的目的是為了方便為其賦值。

3）修改中繼器繫結的資料，將列名修改為weekday（不修改也可以，這裡是我個人的職業習慣），新增7行資料，分別填入資料一、二、三、四、五、六、日，配置之後效果如下：

4）此時預覽效果發現數據是縱向排列的，如下圖：

5）選擇中繼器，設定其佈局方式為橫向換行，每行7項，如下圖：

6）再次預覽，星期就變成橫向的啦。至此，星期就新增完成了。

2. 新增天

1）在頁面中再次新增一箇中繼器控制元件，使用中繼器中預設的圖形，去掉其邊框線並設定圖形的寬度和高度，這裡寬度、高度都設定為56（與上述的星期寬度相等）。

2）為中繼器中的矩形命名，如days，命名的目的是為了方便為其賦值。

3）修改中繼器繫結的資料，將列名修改為days（這裡最好修改一下列名以方便資料繫結），新增30行，資料分別錄入1-30，輸入時有一個小技巧，滑鼠點選某一行後直接輸入值然後回車輸入下一行的值，無需讓單元格變為編輯狀態再輸入。

完成後效果如下：

4）同理設定中繼器的佈局方式為橫向換行，每行7項，設定好之後預覽效果如下：

5）如果想要1號從週三開始，需要在中繼器的資料前兩行插入兩個空行即可，如下圖示：

6）至此，日曆的效果已經做好了。

3. 新增“今日”背景

1）編輯章節2《新增天》的中繼器，在正方形元件上層新增一個圓形，命名為todayBg，寬高與正方形相同，且位於正方形的中心，填充色設定為藍色，字型設定為白色加粗，如下圖：

2）設定藍色背景只在今日日期顯示（可以設定任意一天為今日），為了達到這個效果，需要為中繼器新增條件，如下：

a) 中繼器增加一列，命名為today，並隨意設定某行的該列值為1，這裡我把15號設定為1，即15為“今日”。

b) 將藍色背景設定為隱藏，且放置於正方形的下一層，即被正方形遮住。

c) 設定中繼器“每項載入時”的條件邏輯，判斷如果today值為1時顯示藍色背景，並設定藍色背景todayBg的文字為將該行的days值。

d) 上述步驟如果設定正確，今日的樣式就可以顯示了出來了，如下：

3）此時，再為“每項載入時”新增一個條件邏輯，用於顯示非今日的日期即可，如下：

4）到這一步今日背景也新增完成了，效果圖如下：

4. 新增紅點效果

一般而言，需要在日曆上的某一天顯示一個標記，以表示該天有相關記錄，下面我們為日曆在新增紅點效果。

1）繼續編輯上述中繼器，在靠近正方形上邊緣的地方放置一個圓形，命名為mark，寬度和高度都設定為8，填充色為紅色，效果圖如下：

2）為中繼器資料增加一列，命名為mark，在需要顯示紅點標記的行設定mark列的值為1，如下圖示：

3）設定紅點mark隱藏。

4）同上所述，為中繼器“每項載入時”再新增一個條件邏輯，當mark值等於1時顯示紅點標記，並置於頂層，如下圖設定：

注意：一定要像截圖這樣將ELSE IF切換為IF，切換之後的條件如下圖：

5）至此，日曆的功能就全部完成了。最終的實現的效果見下圖：

5. 總結

本文為了描述清晰，將關鍵性的步驟都截了圖供大家參考。這個日曆效果的製作過程看似繁瑣，但如果理解了中繼器的實現原理，實際操作的時候並不複雜。可根據實際專案的需要如需進一步強化功能。