中繼器,從物理層面是一個實體工具,可以作為局域網所有節點的中心,放大信號,增強遠距離的通信,把不同傳輸介質的網絡連在一起。
而在Axure軟件中,中繼器英文是“Repeater”,直譯為“重復器”,但漢化者并沒有使用,而是采用中繼器這個更專業的詞匯。
這樣翻譯其實很有道理,中繼器也相當于一種媒介,把外界信息收集起來,再實現包括基礎數據、操作、操作后的效果。
例如我們常見的增刪改功能、排序篩選等,其本質就是對數據的重復操作。增加數據就是重復再顯示一次,刪除數據就是把重復效果去掉,這樣一想,我們就更容易理解中繼器到底在做什么了。
本文的思路仍然是從基礎理論說起,再講常用效果的實現思路。
一、原理與屬性與樣式
既然中繼器最本質的特點是repeat,那么我們先搞清楚它是如何重復的?重復的規律是什么?
拖入一個中繼器,重點看屬性和樣式,如下圖紅圈
1.1 中繼器屬性
在前文中已經比對過矩形、動態面板、熱區的屬性,每類元件都有其特有的交互用例
中繼器有【每項加載時】【項目調整尺寸時】
● 【每項加載時】
交互事件中有一個默認Case1,意指將某個矩形設置為某個數據。而中繼器數據區域,第一列列名為Column0,下方值顯示為 1/2/3,和中繼器顯示的1/2/3對應。添加第二列數據后,按照同樣的方式設置第二列顯示的數據為數據區Column1。
因此不難得知如下規律
1)中繼器屬性區有N行數據,中繼器就重復N次,每一行數據相當于一個項目
2)每行數據,也即每個項目中包含X個元件,X個元件對應了同一行數據中的多列
如上述示例,三行數據則中繼器重復了三次,每1行數據包含兩列,每一列和項目中的某個元件對應
● 【項目調整尺寸時】
英文原版為 【OnItemResize】,直譯為 【當項目尺寸改變時】,意指當每一項目的尺寸發生變化。那么什么情況才算尺寸發生變化呢?
項目中發生【顯示隱藏、移動、旋轉、設置尺寸】都可認為尺寸改變,而設置文字或設置圖片則不算
1.2 中繼器樣式
● 樣式-布局
分為三種:垂直、水平、網格排布。也就是在中繼器重復時,每個項目是縱向重復、水平重復、網格重復
以下三個中繼器設置了完全相同的數據和每個項目的基礎樣式,只是布局方式不同
● 樣式-背景
背景色,設置了每個項目的背景色,例如設置為綠色,則每次重復時都會自動加上綠色背景
● 樣式-分頁
分頁,原理和我們常見分頁功能相似,例如通常每頁10條
多頁顯示:數據總行數,超過了每頁顯示的數量,則勾選
每頁項目數:設置5,則每一頁顯示5條數據,從第6條開始會顯示到第2頁
起始頁:設置默認開始的頁碼,設置2,則中繼器默認顯示第2頁的數據
● 樣式-間距
也即每個項目之間的間距
如果項目布局是垂直排列,那么設置行間距,如果項目布局是水平排列,那么設置列間距,如果是網格排列,可以設置行和列間距
1.3 中繼器數據
能支持的功能有
可直接Ctrl+V粘貼數據
可導入圖片
建議這樣設置來提高效率
事先把圖片放入到同一個文件夾內
事先把基礎數據填寫到Excel內
事先把項目中元件的名字,和數據區的列名統一
二、初級示例:某網校頁面的課程排列
先找一個網校打開某類課程的頁面,發現每一門課程都有相同的屬性,如下截圖
一門課程的屬性分為7個:圖片、課程名稱、學校、講師、集數、類型、簡介
觀察和分析的步驟如下
1、每門課程的屬性都有這些,重復!————應該使用中繼器
2、縱向垂直排列————中繼器的布局方式應該選 【垂直】
3、每一行課程中間有間隔————中繼器的間隔應該設置【行間距】,具體值需要測量
4、課程有圖片————中繼器每行數據的圖片需要【提前設置并導入】
5、每門課程的屬性有7個且不同————中繼器的項目至少有7個元件,數據區需要7列數據,每列列名需要和元件名稱對應
按照上面的分析,我們先做三個課程,也即三行數據,具體設置如下
設置上圖的最佳步驟是
1、拖入一個中繼器
2、在基礎屬性中畫好一門課程的所有屬性,并把元件名稱寫為英文
3、在中繼器的數據區,粘貼提前寫好的課程內容,并把【列名】修改為【元件名】,均為相同英文名
4、右擊圖片列的單元格,導入圖片
5、Case1中,每項加載時事件設置每個元件的值等于中繼器的列名,再設置圖片顯示為圖片列名
根據上面的設置,預覽效果如下
以上。
中繼器原理和基本屬性就是文中提到的這些了,但其實它遠不止如此,不然怎么會讓我用強大這個詞來形容它呢,下次再總結它常用的案例。
— — — — 系 列 目 錄 — — — —
這不是Axure教程!(四)元件六要素與用例
這不是Axure教程!(五)變量與函數
— — — — 目? 錄? 完 — — — —