Swift / X-code 製作一頁類似Instagram App的畫面

其實現在做這個題目時已經進度有些落後了。不過為了跟上大家的腳步,我還是趕緊把作業跟上。

題目是這樣的:要做出一張類似Instagram App的畫面(下圖)

這個就是題目,那其實在我做這個作業時已經有好多同學都已經做出來了。

所以我也用稍微偷吃步的方式做出這個作業。

首先,先拉出一個ImageView,然後拉到跟整個View Controller一樣大。再把題目的照片放進Assets 資料夾,回到storyboard把ImageView的照片用成題目的照片(如下)

當然就有底圖後,文字的部分就拉Lable,有外框的部分也算是小偷懶,我是拉Button然後再改image。另外圖片imageView的部分就不多說了。因為有底圖當Sample省最多的就是拉的元件要調整大小比較好對照。(省了很多時間)

P.S. 按鈕圖片的部分就直接用截圖的了。所以看起來畫質會比較差一些。

那已經排好版了之後 只要把底圖的Sample ImageView刪除 剩下的就是把照片放一放就可以了。(是不是感覺整個很偷懶啊~哈哈)

不過對新手來說 其實我還是用了老半天拉。 不過有練習感覺很有成就感。

另外有幾個部分可能也提一下。

  1. 大頭貼要做圓角的部分: 一定要勾選Clip To Bounds

2. 然後這邊要選擇新增 layer.cornerRadius Number 後面數值就要看你的照片尺寸了。

★ 圓角的部分要程式執行才看得到喔!!!!!

那當然…這些上課都有說過。 忘記可以去翻 04_UI設計一點通_storyboard精簡 page.139

★還有也要注意到的是因為下方照片是12張,所以最下面三張照片會只顯示一點點。 那要注意的是元件的上下位置。 不能讓照片檔在Tab Bar 上面喔。

基本上以上講的這些講完應該就能做出類似的app畫面了。

最後就看看成品吧:

P.S. 大頭貼跟名字就惡搞一下變自己的吧^_^

比較一下囉~~~呵呵!!

當然因為很多部分的圖片都是截圖來的 Tab Bar 的圖片去背的不是很好 解析度也不太OK 所以我的變有點Q版了..就將就點囉~

還有上方的部分 我是模擬器 就別要求我也要有4G了…

最後po 上GitHub的連結 有需要的都可以參考看看囉~

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.