#58 文字的縮放和字數 — UISlider & UITextField 自製賀卡

學習偵測 UISlider & UITextField 的 action。

看到這個作業，就在想可以把它做成什麼樣的APP，如果畫面內容是可以控制文字大小與偵測文字字數

後來覺得可以用來設計自製賀卡

功能設計：

• 可以自訂卡片大標題與內文
• 有三種賀卡樣式可選
• 可以調整標題與內文的文字大小
• 可以獲得輸入的字數
• 輸入文字後點擊Return或點任意空白處會收起鍵盤
• 按下套用按鈕可以把輸入框的文字傳送到卡片上

完成預覽

物件建立IBOutlet

@IBOutlet weak var cardImageView: UIImageView!
    @IBOutlet weak var titleTextField: UITextField!
    @IBOutlet weak var contentTextField: UITextField!
    
    //字數
    @IBOutlet weak var titleTextNumber: UILabel!
    @IBOutlet weak var contentTextNumber: UILabel!
    
    @IBOutlet weak var sizeSlider: UISlider!
    @IBOutlet weak var titleFontSizeLabel: UILabel!
    @IBOutlet weak var contentFontSizeLabel: UILabel!
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var contentLabel: UILabel!
    @IBOutlet weak var styleSegmented: UISegmentedControl!

標題與內文輸入框 TextField 拉 IBAction

輸入欄位的設定收鍵盤

Text Fidel 拉 Outlet 時 選擇 Did End On Exit 點擊 Return 會收起鍵盤

// 輸入匡預設值
    var noteText = ""
@IBAction func inputTitle(_ sender: UITextField) {
        //取得字數
        let text = titleTextField.text?.count
        titleTextNumber.text = "\(text!)"
        //收鍵盤
        noteText = "\(sender.text!)"
    }
    
    @IBAction func inputContent(_ sender: UITextField) {
        //取得字數
        let text = contentTextField.text?.count
        contentTextNumber.text = "\(text!)"
        //收鍵盤
        noteText = "\(sender.text!)"
    }

Tap Gesture 觸控設定

// 點空白收起鍵盤
    @IBAction func topGesture(_ sender: UITapGestureRecognizer) {
        view.endEditing(true)
    }

Slider 改變文字大小

分別設定標題與內文Slider的程式

利用 font.withSize 取得目前 text field 文字的字體，然後生成指定大小的字體。

String(format: “%.2f”, size) 數字變字串，指定小數點位數

@IBAction func changeTitleFontSize(_ sender: UISlider) {
        //取得slider數值並小數二位
        let size = sender.value
        let numberString = String(format: "%.2f", size)
        titleLabel.font = titleLabel.font?.withSize(CGFloat(size))
        
        //顯示文字大小
        titleFontSizeLabel.text = "\(numberString)"
    }
    @IBAction func changeContentFontSize(_ sender: UISlider) {
        //取得slider數值並小數二位
        let size = sender.value
        let numberString = String(format: "%.2f", size)
        contentLabel.font = contentLabel.font?.withSize(CGFloat(size))
        //顯示文字大小
        contentFontSizeLabel.text = "\(numberString)"
    }

套用自訂文字

把 TextField 的文字顯示到 卡片上的 Label

// 套用按鈕
    @IBAction func Apply(_ sender: UIButton) {
        //顯示輸入文字
        titleLabel.text = titleTextField.text
        contentLabel.text = contentTextField.text
    }

SegmentedControl 選擇卡片樣式

三張卡片樣式分為三種不同用途：

聖誕節賀卡、生日賀卡或其他用途、情人節賀卡

卡面上文字有預設值，若使用者想修改文字內容就可以字型在輸入框輸入文字

@IBAction func ChooseCard(_ sender: UISegmentedControl) {
        if styleSegmented.selectedSegmentIndex == 0{
            cardImageView.image = UIImage(named: "card-1")
            titleLabel.text = "聖誕快樂"
            contentLabel.text = "I hope you have a Merry Christmas!"
            
        } else if styleSegmented.selectedSegmentIndex == 1{
            cardImageView.image = UIImage(named: "card-2")
            titleLabel.text = "生日快樂"
            contentLabel.text = "把我所有的愛送給你，用我所有的情關心你！親愛的，願你在生日這天裡，快樂幸福！一天都有好心情，晚上有好夢！"
        } else {
            cardImageView.image = UIImage(named: "card-3")
            titleLabel.text = "情人節快樂"
            contentLabel.text = "伸指摘一片玫瑰點在唇邊，你鮮紅的嘴唇是那愛情的顏色。一縷幽香，只是那靜悄悄的綻放，卻漫天飛舞著你的傳說。情人節快樂！"
            
        }
    }

重設按鈕

這個按鈕是為了如果使用者未輸入文字就按下套用，卡片上就會完全沒文字

重設按鈕會把聖誕卡的預設文字加上去

override func viewDidLoad() {
        super.viewDidLoad()
        reset()
    }
  @IBAction func clear(_ sender: UIButton) {
        reset()
    }
    
    // 顯示輸入匡文字
    func reset() {
        titleLabel.text = "聖誕快樂"
        contentLabel.text = "I hope you have a Merry Christmas!"
        
    }

完成畫面

參考文章

#41 文字的縮放和字數 — UISlider & UITextField 練習

Github

dearbunny/UITextFieldHolidayCard