ButtonCellViewModel ile Özelleştirilebilir Butonlar Oluşturma

Web tasarımında kullanılan Button bileşenlerini özelleştirmek, kullanıcı deneyimini geliştirmenin kilit bir yoludur. ButtonCellViewModel ile bu özelleştirmeyi daha da kolaylaştırabilirsiniz. Bu rehberde, ButtonCellViewModel ile nasıl özelleştirilebilir butonlar oluşturabileceğinizi adım adım öğreneceksiniz.

let buttonCellViewModel = ButtonCellViewModel()
buttonCellViewModel.identifier = UIConstants.Continue
buttonCellViewModel.buttonTitle = "Lorem ipsum"
buttonCellViewModel.backgroundColor = UIColor.gray_50
buttonCellViewModel.textColor = UIColor.whiteColor()
buttonCellViewModel.cornerRadius = 12.0
buttonCellViewModel.buttonDelegate = self
buttonCellViewModel.buttonBackgroundColor = UIColor.primary_600
buttonCellViewModel.disableBackgroundColor = UIColor.primary_300
buttonCellViewModel.constraintInset = .init(top: 8.0, left: 16.0, bottom: 8.0, right: 16.0)
buttonCellViewModel.useConstraintInset = true

viewModels.append(buttonCellViewModel)

ButtonCellViewModel Özellikleri:

• identifier: Butonu benzersiz hale getiren bir değerdir. Web sitenizde farklı butonları tanımlamak için kullanışlıdır.
• buttonTitle: Butonun üzerinde görünen metin veya başlıktır. Kullanıcılar için anlamlı ve çekici bir metin ekleyebilirsiniz.
• backgroundColor: Butonun arka plan rengini belirler. Web sitenizin temasına uygun bir renk seçimi yapabilirsiniz.
• textColor: Butonun metin rengini belirler. Metnin okunabilirliğini artırmak için uygun bir renk seçimi önemlidir.
• cornerRadius: Butonun köşe yuvarlaklığını ayarlar. Daha modern ve estetik bir görünüm elde etmek için kullanılır.
• buttonBackgroundColor: Butonun etkin durumda (hover veya tıklama) arka plan rengini belirler. Kullanıcı etkileşimlerini vurgulamak için kullanışlıdır.
• disableBackgroundColor: Butonun devre dışı bırakıldığında arka plan rengini belirler. Kullanıcılara devre dışı olduğunu göstermek için kullanılır.
• constraintInset: Butonun etrafındaki boşlukları belirler. Butonun düzenini ve konumunu özelleştirmek için kullanışlıdır.
• useConstraintInset: Boşluk değerinin geçerli olup olmadığını belirler. Bu, butonun düzenini kontrol etmenize olanak tanır.

ButtonCellViewModel ile özelleştirilebilir butonlar oluşturarak, kullanıcı dostu ve çekici olmasını sağlayabilirsiniz. Button delegate’i kullanarak butonlara aksiyonlar ekleyebilir ve kullanıcı etkileşimlerini yönlendirebilirsiniz.

extension PhoneTutorialViewController : ButtonCellViewModelDelegate {
    
    func didButtonTouchUpInside(viewModel: ButtonCellViewModel) {
        
    }
}