完美實現Axure8和9的“自動適應文本寬度”

0 評論 3756 瀏覽 9 收藏 5 分鐘

在Axure8和9中,有一個設置叫做“自動適應文本寬度(Fit to Text Width)”,然而實際用起來可能會出現一些問題。本文分享了一個實現Axure8和9的“自動適應文本寬度”的方法,一起來看一下吧。

在Axure8和9中,有一個設置叫做“自動適應文本寬度(Fit to Text Width)”,不過大家發現其實只在設計時有用,在預覽時完全沒有效果,而且放在中繼器中還會出現數據變動時統一寬度的問題。

一、現狀

網上目前的解決方法有用等寬字體的,有用字數乘固定值14px的……但只能解決部分問題,對于富文本或者中英文混和文本無能為力。雖然Axure10已經支持,但是很多人還在用Axure8和9,所以這里教大家一個完美的方案。

演示:

https://5gn5xg.axshare.com/#id=hb5pcx&g=1

二、準備

首先,我們要先做一把“尺”,方法如下:

第1步:拖出一個“動態面板”,將其命名為“ruler”;

第2步:將“ruler”設置為“水平滾動”并取消“自動適應文本寬度”;

第3步:將“ruler”設置為 19999px寬(必須) 和 50px高(隨意)。

第4步:拖出一個“文本標簽(Label)”,命名為“scale”;

第5步:將“scale”設置為:

  • x坐標:20000px
  • y坐標:0px

第6步 刪除所有字符并單擊“自動適應文本寬度”,它會自動變為 1px 寬度。

好了,這把“尺”就快完成了。

三、測試

第1步:拖出“矩形 1(Box 1)”,將其命名為“box no padding”,并將左右填充設置為 0px;

第2步:將“scale”和“box no padding”設置為相同的字體、相同的字體樣式、相同的字體大??;

第3步:拖出“文本字段”;

第4步:添加“文本改變時”交互。

預覽一下,在文本輸入隨便中英文甚至其他語言,都可以,文章后面有文件下載。

最驚奇的在于:它在中繼器中也能用并且很好用。

四、使用方法

您只需要做三件事:

  1. 將文本設置到“scale”里
  2. 滾動到“scale”組件
  3. 將“box”設置為新大?。顺?scrollX + box.padding )

只要保證你的文字組件的字體、樣式大小、內容與“尺”里的一模一樣就可以。

五、文件下載及預覽

Axure 8&9演示文件:

ruler_RP9.rp(78.5 KB)

ruler_RP8.rp(87.2 KB)

預覽:

https://uvji3u.axshare.com/#id=ug4988&g=1

預告:

后面會出一個中繼器實時拖放的教程,比如手機圖標整理:

https://5gn5xg.axshare.com/#id=whwe5s&g=1

敬請期待。

本文由 @最InのAxure 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!