#秀米排版實驗室#滑動 紅包 信封模板製作

組成一個複雜的佈局結構，我們其實可以從內部先做起，之後慢慢組裝他。

今天這個模板練習，是由一個滑動佈局裡套著一些元件構成，再經過了

上下翻轉的調整，使滑動佈局呈現下拉出現內容的效果

。

裡面的佈局主要由三部分構成：

紅包內容

+

金幣貼紙

+

提示下拉的文字

紅包內容又由兩部分組成，

文字所在的基礎佈局+固定佈局

文字部分的紅色底色設定的是背景色，背景色設定在佈局工具條上可以找到。

文字部分在

元件定位中設定組前組後距

，拉開上下與邊框的距離（留白操作）。

固定佈局部分主要用來設定紅包邊緣的弧度。

新增固定佈局到編輯區，寬度設定為100%佔滿寬度，高度設定個140左右留點高度。背景色與文字所在基礎佈局背景色一致。我們需要該佈局的

下邊倆角有個弧度

，需要對該佈局的

左、下邊框進行弧度設定

。

左上角由上邊框控制；右上角由右邊框控制；左下角由左邊框控制；右下角由下邊框控制。

為了讓它與紅包底圖搭配時顯得有些層次增加立體感，可以對固定佈局增加陰影，這裡不需要太多設定，選一個深點的紅色，只設置點模糊度就好。

固定佈局的陰影效果會出現在基礎佈局上方，為了改變這個預設的層級順序，可以對前面的基礎佈局設定透明度99，使前邊的佈局出現在後邊佈局的上方。

金幣貼紙在

圖文模板→元件→貼紙中搜索關鍵詞

可得！改變貼紙元件定位使之於前邊的固定佈局交疊。

提示文字這部分由

旋轉的>>>

+

垂直文字構成

，這裡的製作中，為兩部分分別添加了佈局。

符號所在佈局，

寬度設定成自適應

，定位選擇

居中

，對

文字部分設定旋轉90°

。這樣他就能垂直向下啦！

垂直的文字，透過

將寬度屬性改成自伸縮→伸縮比設定為0

，使佈局中的文字垂直分佈。設定佈局定位居中。

調整兩個佈局之間的距離。

將這兩個佈局新增進一個固定佈局中，寬度設定成100%，高度設定固定值比如470，使兩部分的高度控制在固定佈局的高度中。

內容部分到這裡就製作完成了，新增一個基礎佈局到編輯區，將前面製作的內容全部選中拖進基礎佈局中，這樣後續對這部分的整體操作，可以直接對這一基礎佈局操作，不用挨個調。

接下來是和滑動佈局的會合！

添加個上下滑動佈局到編輯區，寬度100%，高度根據

提示文字所在的固定佈局高度+貼紙+紅包弧度固定佈局的高度部分

決定，因為希望最後顯示的是這部分。

接下來是關於

調整方向

的操作：

滑動方向：上下滑動模板預設的動作是

從下往上滑讓下方的內容顯示出來

，但在這個模板中需要的是下拉效果——把上方的內容往下拉即由上往下拉，是一個上下翻轉過的操作。

與左右滑動佈局不同的是，上下滑動佈局中存在

更多

的選項，其中就有我們需要的

上下翻轉

。

翻轉過後，滑動佈局就可以把上方的內容往下拉了~

與此同時，裡面的內容也顛倒了過來，不要慌！離操作結束只差最後一步！

將套著內部所有內容的那一個基礎佈局，同樣進行

上下翻轉

操作！之後，所有的內容位置就正過來啦！

之後，檢查無誤，這個模板就製作完成了！

886，明天不知道見不見~