Axure8.0設計展開、收縮界面,就像ExpandableListView

Axure8.0設計展開、收縮界面,就像ExpandableListView

1、準備兩張圖片,展開,收縮:
2、添加三個矩形,模擬三行列表:

3、右鍵單擊最後一項-->選擇‘交互樣式’--->彈出的對話框選擇‘選中’--->填充顏色,將選中的顏色改成其他顏色,模擬選擇狀態


4、在第三個item的下方插入一個矩形,命名爲‘顯示內容’,模擬展開顯示的內容--->右鍵點擊,選擇‘設爲隱藏’

5、接下來,開始做點擊展開,收縮事件了。點擊第三個item-->在右邊屬性欄雙擊‘鼠標單擊時’-->添加條件-->點擊下方的值,選擇‘選中狀態’,右邊條件爲true-->在添加動作列表中選擇‘隱藏’--->配置動作列表中選中‘顯示內容’,就是我們要顯示的內容--->點擊設置選中,選擇‘取消選中’。這樣設置效果就是,如果item的選擇狀態是true時,點擊的話,顯示的內容會被隱藏起來。


6、再次雙擊‘鼠標點擊時’,在添加一個用例,彈出的對話框中選擇‘添加條件’-->彈出的條件設立中選中‘選中狀態’,值設置爲false-->添加動作,選擇‘顯示’,配置動作選擇‘顯示內容’(即我們的內容)-->點擊設置狀態,選擇‘選中’。這樣當item爲非選中狀態時,點擊item,內容就會被展開。




7、最終的動作視圖如圖,則這個功能就做好啦!



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章