Mini iOS Apps : Color Converter

Halil Özel
Jan 16, 2019 · 4 min read

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.

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.

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.

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 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.

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.

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.

Ö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 :)

NSIstanbul

A publication with content filled by NSIstanbul members

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store