Axure教程:如何實(shí)現(xiàn)頂部tab式導(dǎo)航欄?

1 評(píng)論 16339 瀏覽 15 收藏 9 分鐘

如何實(shí)現(xiàn)頂部tab式導(dǎo)航欄?來(lái)文中看看~

實(shí)現(xiàn)的效果:點(diǎn)擊tab,切換對(duì)應(yīng)的內(nèi)容頁(yè)面,指示標(biāo)識(shí)移動(dòng)到對(duì)應(yīng)選中tab。

思路:

  1. 通過(guò)動(dòng)態(tài)面板實(shí)現(xiàn)內(nèi)容頁(yè)面切換,n個(gè)tab設(shè)置n個(gè)狀態(tài);
  2. 指示標(biāo)識(shí)通過(guò)位移,移動(dòng)到對(duì)應(yīng)的位置;
  3. 綁定tab按鈕的點(diǎn)擊事件,設(shè)置動(dòng)態(tài)面板的狀態(tài)切換,以及指示標(biāo)識(shí)的移動(dòng)位置。

1、首先,添加頁(yè)面布局,如下圖

2、為動(dòng)態(tài)面板添加

狀態(tài)頁(yè)面,n個(gè)Tab,增加n個(gè)狀態(tài)頁(yè)。我設(shè)置了3個(gè)Tab,增加了3個(gè)對(duì)應(yīng)的狀態(tài)頁(yè),并且重命名,命名要容易區(qū)分,因?yàn)榻酉聛?lái)即將對(duì)它進(jìn)行編輯。

為狀態(tài)頁(yè)面添加內(nèi)容,為了看出切換效果,每個(gè)頁(yè)面的內(nèi)容不要一樣。

準(zhǔn)備工作做完,以下即將開(kāi)始劃重點(diǎn)。

3、為tab按鈕綁定點(diǎn)擊事件

點(diǎn)擊事件有2個(gè):

  1. 動(dòng)態(tài)面板狀態(tài)切換;
  2. 指示標(biāo)識(shí)位置移動(dòng)。

這個(gè)2個(gè)事件的沒(méi)有順序要求,隨意。

先簡(jiǎn)單介紹以下動(dòng)態(tài)面板切換:

為了將tab1和面板狀態(tài)page1關(guān)聯(lián),在設(shè)置面板狀態(tài)時(shí),需要選擇page1,動(dòng)畫(huà)效果和動(dòng)畫(huà)時(shí)長(zhǎng)按需選擇(同理,如果是tab2,要選擇page2。所以面板狀態(tài)的命名要容易識(shí)別,用途就在這里~)如下圖。

重點(diǎn)中的重點(diǎn),就是元件的位移~

元件位移,在設(shè)置用例當(dāng)中,有個(gè)“移動(dòng)”的操作。選中需要移動(dòng)的元件——命名為“指示標(biāo)識(shí)”的元件(元件的命名方便在操作元件時(shí)快速識(shí)別)。

需要編輯設(shè)置的條件:參考坐標(biāo)系(相對(duì)位置、絕對(duì)位置)、位移的位置(x、y)、動(dòng)畫(huà)效果(非必須),如下圖:

名詞釋義:

  • 絕對(duì)位置:是以當(dāng)前容器的位置(x,y)作為原點(diǎn)(0,0);
  • 相對(duì)位置:是以自己上一次的位置(x,y)作為原點(diǎn)(0,0)。

1)選擇參考坐標(biāo)系

選擇絕對(duì)位置。如果設(shè)置相對(duì)位置,會(huì)發(fā)現(xiàn)位移的位置產(chǎn)生了神奇的偏差,在原來(lái)的位置上,疊加xy的值,比如最初的位置是(2,2),設(shè)置位移x=5,y=5,不會(huì)移動(dòng)到(5,5)的位置,而是移動(dòng)到(7,7)的位置。

2)設(shè)置X、Y的位置

先了解一下以下即將用到的函數(shù)的含義(以下函數(shù)解釋內(nèi)容來(lái)自axure非官方中文網(wǎng):https://www.axure.com.cn/5068/

  • This?:獲取當(dāng)前元件對(duì)象。當(dāng)前元件是指當(dāng)前添加交互動(dòng)作的元件。
  • Target?:獲取目標(biāo)元件對(duì)象。目標(biāo)元件是指當(dāng)前交互動(dòng)作控制的元件。
  • width?:獲取元件對(duì)象的寬度值。
  • height?:獲取元件對(duì)象的高度值。
  • top?:獲取元件對(duì)象的上邊界坐標(biāo)值。
  • left?:獲取元件對(duì)象的左邊界坐標(biāo)值。
  • right?:獲取元件對(duì)象的右邊界坐標(biāo)值。
  • bottom?:獲取元件對(duì)象的下邊界坐標(biāo)值。

以tab1按鈕為例說(shuō)明以上元件函數(shù)的意思,看下圖標(biāo)注:

tab1按鈕綁定點(diǎn)擊事件,在點(diǎn)擊事件的用例情境里,tab1是This;

指示標(biāo)識(shí),是tab1通過(guò)點(diǎn)擊事件,需要控制其進(jìn)行位移操作的,所以是目標(biāo)元件,即Target;

  1. tab1按鈕左邊距離畫(huà)布左邊緣的距離:left;
  2. tab1按鈕右邊緣距離畫(huà)布左邊的距離:right;
  3. tab1按鈕上邊緣距離畫(huà)布頂部的距離:top;
  4. tab1按鈕下邊緣距離畫(huà)布頂部的距離:bottom。

了解以上函數(shù)的含義后,看看我們需要什么數(shù)值, 又可以獲取到什么數(shù)值。

移動(dòng)指示標(biāo)識(shí),需要明確每次移動(dòng)指示標(biāo)識(shí)的x,y。

指示標(biāo)簽顯示在tab標(biāo)簽的水平居中位置,指示標(biāo)識(shí)永遠(yuǎn)是跟隨tab標(biāo)簽的,點(diǎn)擊哪個(gè)tab標(biāo)簽跟著移動(dòng)到哪個(gè)tab標(biāo)簽的下方,可以根據(jù)tab標(biāo)簽的位置,進(jìn)行計(jì)算位置。

(1)先確定指示標(biāo)簽的y值

因?yàn)橹甘緲?biāo)識(shí)是在水平位置上移動(dòng),所以y值是固定的,獲取tab標(biāo)簽的底部位置=tab.bottom;布局界面中標(biāo)識(shí)和tab之間3個(gè)單位的間隔,所以指示標(biāo)識(shí)距離畫(huà)布頂部的距離y=tab.bottom+3,即y=This.bottom+3。

(2)x的值稍微復(fù)雜一點(diǎn),由2部分組成:

  1. tab標(biāo)簽左側(cè)距離畫(huà)布左側(cè)的距離=tab.left;
  2. tab標(biāo)簽和指示標(biāo)識(shí)居中顯示時(shí),指示標(biāo)簽左側(cè)距離tab標(biāo)簽左側(cè)的距離=tab標(biāo)簽寬度的一半減去指示標(biāo)識(shí)寬度的一半,即tab.width/2-指示標(biāo)簽.width/2;所以指示標(biāo)簽距離畫(huà)布左側(cè)的距離x=tab.left+tab.width/2-指示標(biāo)識(shí).width/2,即x=This.left+This.width/2-Target.width/2。

完美的獲取到了指示標(biāo)識(shí)的x,y值,接下來(lái),就是設(shè)置到用例中。點(diǎn)擊fx和fy分別編輯x,y的值,如下圖:

其基本語(yǔ)法是用雙方括號(hào)包含,變量值和函數(shù)用英文句號(hào)連接,例如:[[This. width]] 當(dāng)前元件的寬度。

變量值和函數(shù)不要拼寫(xiě)錯(cuò)誤,大小寫(xiě)不敏感~y值同理。

總結(jié)

  • tab按鈕添加點(diǎn)擊事件;
  • 觸發(fā)動(dòng)態(tài)面板切換狀態(tài);
  • 指示標(biāo)識(shí)進(jìn)行位移操作。

元件函數(shù):

  • 絕對(duì)位置:是以當(dāng)前容器的位置(x,y)作為原點(diǎn)(0,0);
  • 相對(duì)位置:是以自己上一次的位置(x,y)作為原點(diǎn)(0,0)。
  • This?:獲取當(dāng)前元件對(duì)象。當(dāng)前元件是指當(dāng)前添加交互動(dòng)作的元件。
  • Target?:獲取目標(biāo)元件對(duì)象。目標(biāo)元件是指當(dāng)前交互動(dòng)作控制的元件。
  • width?:獲取元件對(duì)象的寬度值。
  • height?:獲取元件對(duì)象的高度值。
  • top?:獲取元件對(duì)象的上邊界坐標(biāo)值。
  • left?:獲取元件對(duì)象的左邊界坐標(biāo)值。
  • right?:獲取元件對(duì)象的右邊界坐標(biāo)值。
  • bottom?:獲取元件對(duì)象的下邊界坐標(biāo)值。

 

本文由 @First_Step 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 新人

    來(lái)自湖南 回復(fù)