#004 使用 iOS SDK-做一張長輩圖

使用圖片，文字，emoji，邊框 & 圓角製作漂亮卡片

那就…試試看做成長輩圖好了(?!)

成果

素材

荷花

神明圖

程式碼

import UIKit;
//荷花
let lotusImg = UIImage(named: "lotus.jpg");
let lotusImgView = UIImageView(image: lotusImg);
//神明
let oracleImg = UIImage(named: "oracle.jpeg");
let oracleImgView = UIImageView(image: oracleImg);
//訊息內容
let messageLabel = UILabel();
messageLabel.text = """
親愛的朋友早安～
用一顆感恩的心看待事物
世界將變得更美好
""";
messageLabel.font = UIFont.systemFont(ofSize: 200);
messageLabel.numberOfLines = 0;
messageLabel.sizeToFit();
let messageView = UIView(frame: messageLabel.bounds);
//漸層圖層，大小同訊息圖層
let gradientLayer = CAGradientLayer();
gradientLayer.frame = messageView.bounds;
gradientLayer.colors = [UIColor.red.cgColor, UIColor.yellow.cgColor, UIColor.blue.cgColor, UIColor.purple.cgColor];
//斜漸層
gradientLayer.startPoint = CGPoint(x: 0, y: 0);
gradientLayer.endPoint = CGPoint(x: 1, y: 1);
//在訊息上疊加漸層，只顯示mask裡非透明的區塊
messageView.layer.addSublayer(gradientLayer);
messageView.mask = messageLabel;
//拉大神明圖層，並調整至右下方
oracleImgView.frame = CGRect(x: 1600, y: 700, width: 1100, height: 1100);
//避免拉大後失真，維持圖片比例
oracleImgView.contentMode = .scaleAspectFit;
//在荷花上疊加神明
lotusImgView.addSubview(oracleImgView);
//調整訊息位置(維持原本設定的訊息大小)，並在荷花上疊加文字
messageView.frame = CGRect(x: 100, y: 100, width: messageLabel.frame.width, height: messageLabel.frame.height);
lotusImgView.addSubview(messageView);
//加上外框
lotusImgView.layer.borderWidth = 10;
lotusImgView.layer.borderColor = UIColor.orange.cgColor;
lotusImgView.layer.cornerRadius = 150;
lotusImgView.clipsToBounds = true;
//加上顏文字
let angleLabel = UILabel();
angleLabel.text = "😇😇";
angleLabel.font = UIFont.systemFont(ofSize: 220);
angleLabel.sizeToFit();
angleLabel.frame = CGRect(x: 1800, y: 70, width: angleLabel.frame.width, height: angleLabel.frame.height);
lotusImgView.addSubview(angleLabel);

參考資料

# 142 使用圖片，文字，emoji，邊框 & 圓角製作漂亮卡片

利用 UIView 的 mask 為圖片文字染上美麗的漸層