フローティングアクションボタン(固定ボタン)を作成する

ボタンを固定表示させたまま画面をスクロールする"フローティングアクションボタン"が、
画像の加工およびフッター機能の利用によって擬似的に表現できます。

完成イメージはこちら!


基本手順

  1. フローティングボタンを設定したいスクリーンをワイヤーフレーム編集で開き、
    「スクリーンの設定」から背景色チェックボックスをオフにします。
  2. スクリーンの最下部に透明の余白を設置し、その範囲内にフローティングボタンを配置します。
    水色部分を透明の余白、赤色部分をボタンとした以下のイメージです。

    ワイヤーフレーム編集を利用しない場合は、最下部を透明にした範囲内にボタンを配置させた縦長画像をご準備ください。
  3. スクリーン一覧画面にて、2.で設定した透明部分の上辺にフッター機能を設定し、完成です!

プレビュー時に最下部までスクロールすると黒い部分が表示されます。擬似的な表現となるためとなるため、ご了承いただきますようお願いします。

もし解決しない場合 お問い合わせ お問い合わせ