這不是Axure教程!(七)強大的中繼器__1

中繼器,從物理層面是一個實體工具,可以作為局域網所有節點的中心,放大信號,增強遠距離的通信,把不同傳輸介質的網絡連在一起。

而在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教程!(二)素材獲取

這不是Axure教程!(三)流程與標注

這不是Axure教程!(四)元件六要素與用例

這不是Axure教程!(五)變量與函數

這不是Axure教程!(六)動態面板之一:屬性和動效

這不是Axure教程!(六)動態面板之二:經典實踐

這不是Axure教程!(七)強大的中繼器__1

— — — — 目? 錄? 完 — — — —

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容