Day 28 - [實戰練習] iOS 15 介面 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 28

自我挑戰組

初見 Tailwindcss系列第 28 篇

Day 28 - [實戰練習] iOS 15 介面

13th鐵人賽

威爾豬

2021-09-28 13:37:36

1227 瀏覽

隨著 iPhone 13 發表後，前幾天 ios 15 已推出正式版，之前威爾豬的 2 篇實戰都是比較偏網頁類，這次咱們來挑戰看看用 Tailwind 做 iOS 15 介面。威爾豬在 apple官網找了一張圖片，一樣會使用到 Font Awesome 5，Let's Go ~

初始化

我們先創建 iPhone 尺寸，寬 375px，高 812px，然後給個上到下的綠漸層背景 (因為等等我們插入的專輯封面會和官方圖片不一樣，所以威爾豬背景色另外做)。

<div class="relative w-[375px] h-[812px] bg-gradient-to-b from-[#207c6b] via-[#016368] to-[#1C1714]"></div>

建立 iPhone 圖標

在上方我們要使用 Flex 來建立兩側的時間和 icon，並設置圖標大小、間距和顏色，注意圖標上方還有一個綠點點，下方我們使用相對定位來建立離底部 5px 的 Home Indicator。

<div class="relative w-[375px] h-[812px] ...">
  <!--   時間、icon   -->
  <div class="flex justify-between px-8 pt-2">
    <p class="text-sm text-white ml-5">9:41</p>
    <div class="relative">
      <div class="h-5 flex justify-end items-center space-x-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" viewBox="0 0 20 20" fill="currentColor">
          <path d="...">
        </svg>
        <i class="fas fa-wifi text-white text-sm"></i>
        <i class="fas fa-battery-full text-white text-sm"></i>
      </div>
      <div class="absolute w-1 h-1 rounded-full bg-[#40C35C] -top-1 left-2"></div>
    </div>
  </div>
  
  <!--  Home Indicator  -->
  <div class="absolute w-2/5 h-[5px] rounded-full bg-white mx-auto inset-x-0 bottom-2"></div>
</div>

專輯封面

設置寬高為 320px 的正方形圖片置中，並給圓角、陰影和上方保持間距。威爾豬擔心專輯封面有版權問題，所以在 Unsplash 找了一張圖代替。

<div class="relative w-[375px] h-[812px] ...">
  ...
  <div class="flex flex-col">
    <img class="w-80 h-80 object-cover rounded-xl shadow-2xl mt-10 mx-auto" src="https://images.unsplash.com/photo-1596387451750-f7bfb51461ef?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2371&q=80" alt="cover">
  </div>
  ...
</div>

歌曲訊息

這邊威爾豬使用 Flex 讓文字和 icon 保持左右兩側，注意和上方專輯的間距，調整文字大小、粗細、不透明度，以及 icon 設定寬高為 36px，並給白色不透明度為 10%。Focus 時記得要給 outline-none，不然按鈕點擊會有邊框。

<div class="relative w-[375px] h-[812px] ...">
  ...
  <div class="flex flex-col">
    ...
    <div class="flex justify-between items-center">
      <div class="block">
        <p class="text-white text-2xl">Red Room</p>
        <p class="text-white/60 text-2xl font-light">Hiatus Kaiyote</p>
      </div>
      <button type="button" class="w-9 h-9 bg-white/10 rounded-full focus:outline-none">
        <svg class="h-5 w-5 mx-auto m-2 text-white" ...>
          <path d="..." />
        </svg>
      </button>
    </div>
  </div>
  ...
</div>

播放時間 Bar

做兩個 Bar，其中一個寬度 100%，高度為 4px ，不透明度 10% 的 Bar，另一個做寬度 185px，高度為 4px ，不透明度 50% 的 Bar，並使用 Position 讓兩個 Bar 重疊，小白點部分因為設置寬高為 8px，所以距離 left 位置要為 185px - 4px。下方數字調整大小、顏色等，一樣使用 Flex 保持左右兩側。

<div class="relative w-[375px] h-[812px] ...">
  ...
  <div class="flex flex-col">
    ...
    <div class="relative mt-6">
      <div class="w-full h-1 rounded-full bg-white/10"></div>
      <div class="absolute top-0 w-[185px] h-1 rounded-full bg-white/50"></div>
      <button type="button" class="absolute w-2 h-2 bg-white/80 rounded-full -top-0.5 left-[181px] focus:outline-none"></button>
      <div class="flex justify-between mt-4">
        <p class="text-sm text-white/20">2:31</p>
        <p class="text-sm text-white/20">4:07</p>
      </div>
    </div>
  </div>
  ...
</div>

音樂播放 Button

使用 Fontawesome icon 來建立播放音樂按鈕，將中間設定比兩側大，使用 Flex 讓其水平排列。

<div class="relative w-[375px] h-[812px] ...">
  ...
  <div class="flex flex-col">
    ...
    <div class="flex justify-around items-center mt-10 mb-16">
      <button type="button" class="focus:outline-none"><i class="fas fa-forward fa-rotate-180 text-4xl text-white"></i></button>
      <button type="button" class="focus:outline-none"><i class="fas fa-pause text-5xl text-white"></i></button>
      <button type="button" class="focus:outline-none"><i class="fas fa-forward text-4xl text-white"></i></button>
    </div>
  </div>
  ...
</div>

音樂音量 Bar

創建方式和剛剛音樂播放 Bar 差不多，白點設定位置方式也是一樣的，只需注意大小就可以了 [(375-(40 x 2)-(12 x 2)-(2.5 x 2)) / 2] - 12，並使用 Fontawesome icon 放置左右兩側。

<div class="relative w-[375px] h-[812px] ...">
  ...
  <div class="flex flex-col">
    ...
    <div class="flex items-center justify-between space-x-4">
      <i class="fas fa-volume-off text-xs text-white/50"></i>
      <div class="w-full">
        <div class="relative">
          <div class="w-full h-1 rounded-full bg-white/10"></div>
          <div class="absolute top-0 w-1/2 h-1 rounded-full bg-white/50"></div>
          <button type="button" class="absolute w-6 h-6 bg-white rounded-full -top-2.5 left-[121px] focus:outline-none"></button>
        </div>
      </div>
      <i class="fas fa-volume-up text-xs text-white/50"></i>
    </div>
  </div>
  ...
</div>

下方 icon

創建方式和剛剛音樂播放一樣，使用 Fontawesome icon，Flex 讓其水平排列。

<div class="relative w-[375px] h-[812px] ...">
  ...
  <div class="flex flex-col">
    ...
    <div class="flex justify-around my-5">
      <button type="button" class="focus:outline-none"><i class="far fa-comment-alt text-white/50 text-2xl"></i></button>
      <button type="button" class="focus:outline-none"><i class="fas fa-compact-disc text-white/50 text-2xl"></i></button>
      <button type="button" class="focus:outline-none"><i class="fas fa-list-ul text-white/50 text-2xl"></i></button>
    </div>
  </div>
  ...
</div>

加入 FaceTime 視訊對象

將寬高設定為 140px，加入圓角、陰影等，並用 Position 來定位。威爾豬在 Unspalsh 上找了一張人像圖來使用。

<div class="relative w-[375px] h-[812px] ...">
  ...
  <div class="absolute bottom-[168px] right-2">
    <div class="w-[140px] h-[140px] rounded-xl overflow-hidden shadow-md">
      <img class="w-full h-full object-cover" src="..." alt="">
    </div>
  </div>
  ...
</div>

上方 FaceTime 一起聽介面

Position 定位在上方，使用寬度 100%，不透明度為 50% 黑，並切分為上下區塊，再分別 Flex 排列，上方人物頭像旁邊還有一個小小的 icon，威爾豬一樣在官網找了 Apple Music icon，下方 icon 大小和剛剛歌曲訊息的 icon 一樣。這邊可能看起來複雜，其實觀念通了就沒有想像中那麼複雜了。

<div class="relative w-[375px] h-[812px] ...">
  ...
  <div class="absolute top-9 inset-x-0 mx-2">
    <div class="w-full h-auto mx-auto p-2 bg-black/50 rounded-3xl backdrop-blur-xl">
      <!-- 上方人物 -->
      <div class="flex justify-between mb-3">
        <div class="flex">
          <div class="relative">
            <div class="w-8 h-8 bg-white rounded-full overflow-hidden">
              <img class="w-8 h-8 object-cover" src="...">
            </div>
            <div class="absolute w-3 h-3 bottom-1 right-0">
              <img src="...">
            </div>
          </div>
          <div class="block pl-2">
            <p class="text-white text-sm">已開始「Red Room」</p>
            <p class="text-gray-400 text-xs">賈濤 ></p>
          </div>
        </div>
        <button type="button" class="bg-[#FF4538] text-white text-sm h-8 py-0 px-4 rounded-full focus:outline-none">結束</button>
      </div>
            
      <!-- 下方 icon -->
      <div class="flex justify-between">
        <button type="button" class="w-9 h-9 bg-gray-600/90 rounded-full focus:outline-none">
          <svg class="h-5 w-5 mx-auto m-2 text-white" ...">
            <path d="...">
          </svg>
        </button>
        <button type="button" class="w-9 h-9 bg-white rounded-full focus:outline-none">
          <svg class="h-5 w-5 mx-auto m-2" ...>
            <path d="...">
          </svg>
        </button>
        <button type="button" class="w-9 h-9 bg-white rounded-full focus:outline-none">
          <svg class="h-5 w-5 mx-auto m-2" ...>
            <path d="...">
          </svg>
        </button>
        <button type="button" class="w-9 h-9 bg-white rounded-full focus:outline-none">
          <svg class="h-5 w-5 mx-auto m-2" ...>
            <path d="...">
          </svg>
        </button>
        <button type="button" class="w-9 h-9 bg-white rounded-full focus:outline-none">
          <svg class="h-5 w-5 mx-auto m-2" ...>
            <path d="...">
          </svg>
        </button>             
      </div>
    </div>
  </div>
  ...
</div>