按照此方法實現的日曆支援以下功能:
可以在中繼器中配置當前日期,當前日期的背景顯示灰色圓圈;
可以在中繼器中配置某天是否顯示紅點;
可以在中繼器中配置本月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. 總結
本文為了描述清晰,將關鍵性的步驟都截了圖供大家參考。這個日曆效果的製作過程看似繁瑣,但如果理解了中繼器的實現原理,實際操作的時候並不複雜。可根據實際專案的需要如需進一步強化功能。