完美實現Axure8和9的“自動適應文本寬度”
在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步:添加“文本改變時”交互。
預覽一下,在文本輸入隨便中英文甚至其他語言,都可以,文章后面有文件下載。
最驚奇的在于:它在中繼器中也能用并且很好用。
四、使用方法
您只需要做三件事:
- 將文本設置到“scale”里
- 滾動到“scale”組件
- 將“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 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!