iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
自我挑戰組

初見 Tailwindcss系列 第 28

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

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

https://ithelp.ithome.com.tw/upload/images/20210928/20141250WZOXz3RTrS.jpg

初始化

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

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

https://ithelp.ithome.com.tw/upload/images/20210928/20141250zZ0yTSCODD.png

建立 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>

https://ithelp.ithome.com.tw/upload/images/20210928/20141250gNhaunEc8n.png

專輯封面

設置寬高為 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>

https://ithelp.ithome.com.tw/upload/images/20210928/20141250QudFop43Yn.png

歌曲訊息

這邊威爾豬使用 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>

https://ithelp.ithome.com.tw/upload/images/20210928/20141250h0O5JcOFb0.png

播放時間 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>

https://ithelp.ithome.com.tw/upload/images/20210928/20141250k0LMWi2VyU.png

音樂播放 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>

https://ithelp.ithome.com.tw/upload/images/20210928/20141250PY2XzH5ghG.png

音樂音量 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>

https://ithelp.ithome.com.tw/upload/images/20210928/20141250voMOGNdatz.png

下方 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>

https://ithelp.ithome.com.tw/upload/images/20210928/20141250EPmnBHaBrE.png

加入 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>

https://ithelp.ithome.com.tw/upload/images/20210928/20141250kxTHccZj0H.png

上方 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>

https://ithelp.ithome.com.tw/upload/images/20210928/20141250IDcqR7toIw.png

噹噹,終於完成了,看起來應該也有 97% 像。這邊大量使用 Position 和 Flex,如果不熟悉的同學們應該會整個崩潰,看似簡單的介面其實隱藏很多小細節。最後威爾豬再加上了 iPhone 13 的外型,有興趣的看倌們可以看 DEMO

https://ithelp.ithome.com.tw/upload/images/20210928/20141250EaUPsYfvtS.png

好啦~以上就是今天的實戰內容,咱們明天見。


上一篇
Day 27 - [實戰練習] Pricing Sections
下一篇
Day 29 - 一秒使用 Tailwind
系列文
初見 Tailwindcss30

尚未有邦友留言

立即登入留言