Mini iOS Apps : Color Converter
Merhabalar Arkadaşlar, her blog yazımda bir mini uygulama yaparak, öğrendiğimiz komponentleri ve yapıları kullanarak bilgilerimizi kalıcı hale getireceğimiz yazı serisinin ikincisiyle karşınızdayım. Hazırsanız vakit kaybetmeden başlayalım :)
RGB’den 16'lık tabana çevirme ve 16'lık tabandan RGB’yi çevirme iki tip dönüşüm kullanılarak kullanıcının girdiği verilere göre uygulamanın arka plan rengi değişecek. Renklerle ilgili güzel bir uygulama olduğunu düşünüyorum.
Serinin 1. bölümünde yazdığım “Catch The Fruits” adlı yazıya aşağıdaki linkten ulaşabilirsiniz :
Öncelikle bu dönüştürme yapacağımız yapıların neler olduğuna bakalım daha sonra uygulamamızı geliştirmeye başlayacağız.
RGB Nedir ?
Red (kırmızı) , Green (yeşil), Blue (mavi) renklerinden oluşmuş, bir renk sistemidir.
RGB renk sistemi, insan gözünü taklit eden dijital sistemlerde (tarayıcılar, dijital kameralar vb.) ve monitörlerde kullanılır.
Hex(Hexadecimal) Nedir ?
Hexadecimal “On altılık” düzenin alabileceği değerler; 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F’dir,
0’dan F’ye kadar olan karakterlerin toplam adedi 16 olduğu için on altılık düzen denilmektedir.
Daha fazla ayrıntı için aşağıdaki README dosyasını okuyabilirsiniz :
Teorik bilgileri öğrendikten sonra artık uygulamamıza başlayabiliriz.
Uygulamanın Tasarımı
Uygulamadaki odaklanacağımız tek ekran bu olacaktır. Ekranda 4 adet Text Field bulunmaktadır. Bu Text Field’larla kullanıcıdan Kırmızı, Yeşil, Mavi ve Alfa değerleri alınmaktadır. Text Field’lara placeholder özelliği verilerek hangi değerlerin girileceği anlaşılmaktadır. 1 adet button kullanılmaktadır. Kullanılan butona basınca girilen değerleri hesaplamaya yarar. Butona basılınca elde edilen sonucu ise Result yazılı Label’da gösterilmektedir. Uygulamadaki iki tip dönüştürmeden hangisinin seçileceğini belirtmek için Segment kontrol kullanılmıştır. Kısaca uygulamanın ekran tasarımı ile ilgili bilgileri vermiş olduk.
Uygulamanın Kodlanması
Uygulamanın tasarımınıda yaptıktan sonra artık kodlamaya başlayabiliriz.
Tasarım bölümünde tanımlamış olduğumuz komponentleri uygulamaya bağlıyoruz. IBOutlet olarak bağlamış olduğumuz elemanlar aşağıdaki gibidir.
Conversion adında bir Enum oluşturduk. Bu Enum’un içine 2 adet ise case ekledik. Dönüştürmelerde kullanacağımız için bu tip bir tanımlama yaptık. Daha sonra conversion nesne oluşturup ona default olarak .hexToRGB değerini atadık. Kullanıcı herhangi bir seçim yapmazsa default olarak bu değer işleme sokulur.
Segment için bir IBAction tanımladık. Tanımlanan bu metod içinde seçilen elemana göre işlemler yapılmaktadır. Seçilen index değeri eğer 0 ise hexToRGB işlemini yap, index değeri 1 ise RGBTohex işlemini yap. Eğer bunlardan başka bir değerde ise default değeri hexToRGB olarak kullan.
Bir dönüştürme ekranında bir başka dönüştürme ekranına gidilince ekranda bulunan değerleri silmek için removeAll() metodu kullanıldı. Bu özelliği kullanmasaydık kullanıcının kafasını karıştırıp işleri zorlaştıracaktık.
Button’a basılınca işlemlerin yapılması gerekir ama hangi değerlerin yapıldığını anlayabilmek için conversion değerlerini kontrol ediyoruz. Eğer hexToRGB seçili ise ona ait metodu çağır ve işlemleri yap dedik. RGBToHex seçili ise ona ait metoda git ve işlemleri yap diye belirttik.
Hex To RGB Dönüşümü
Bir metod oluşturduk. Oluşturulan metodda ise girilen hexadecimal değeri RGB değerine dönüştürdük. Dönüştürülen değeri ekranda gösterip uygulamanın arka planının o elde edilen değere göre güncellenmesini sağladık. Aşağıdaki kodları incelemenizi tavsiye ederim.
RGB To Hex Dönüşümü
Bir diğer dönüşüm ise RGB değerini hexadecimal değere dönüştürmek. Dönüştürülen değere bakılarak uygulamanın arka plan rengi değişmektedir. Diğer metodda kullanılan birçok özellik kullanılmaktadır. Diğer farklılıkları incelemenizi tavsiye ederim.
Uygulamanın Test Edilmesi
Öncelikle HEX to RGB değerini dönüştürme ile ilgili örneklerimizi yaptık. Resimlerde de görüldüğü gibi değerleri girip ekranın arka planının değiştiğini ve verilen değerlerin dönüştürüldüğünü görmüş olduk.
Diğer bir seçeneğimiz olan RGB to HEX değerini kullanıyoruz. Girilen değerlere göre uygulamanın arka plan rengi değişmektedir. Girmiş olduğumuz değeri hex değerinin başında # işareti koyarak kullanması uygulamayı daha efektif hale getirdiğini düşünüyorum.
Uygulamanın tamamına aşağıdaki adresten ulaşabilirsiniz :
Evet arkadaşlar yazımızın sonuna geldik. Bir sonraki yazılarda görüşmek üzere kendinize dikkat edin. Herkese bol kodlu günler dilerim :)
