16 Şubat 2015 Pazartesi

IOS Swift - Facebook Login Custom Button Oluşturma

Merhaba, Swift yeni sayılabilir bir dil olduğundan sosyal medya araçları ile login işleminde biraz sıkıntı çektim. Facebook, Twitter ve Google+ ın üçünü kullanabileceğim hazır bir kütüphane bulamadım ve ayrı ayrı yapmaya karar verdim.
Fakat bu 3 uygulamayı beraber kullanırken arayüzün kendi sistemime uygun olması gerekiyordu. Bu yüzden Facebook'un sağladığı Facebook login button ile giriş yapmak tasarımı etkileyecekti. Kendi buttonumu kullanıp bunu facebook ile bağlamam gerekiyordu.

Bunu yapmak için öncelikle Facebook SDK'yı uygulamama ekledim ve aşağıdaki adrestaki adımları takip ederek Facebook Login Buttonu uygulamama entegre ettim. (Aşağıdaki yazının sonunda örnek bir uygulama da mevcut Facebook uygulamanızı oluşturup api keylerini eklediğinizde çalışacaktır. )

http://www.brianjcoleman.com/tutorial-facebook-login-in-swift/

Fakat buradaki uygulamada gördüğünüz gibi Facebook'un kendi login butonu kullanılıyor ve bunun içindeki texti ve buttonun şeklini değiştiremiyoruz. Bu hazır bir yapı ve projeye FBLoginView olarak ekleniyor. Benim istediğim şey kendi oluşturduğum buttona tıkladığımda bu FBLoginView'e tıklanmış gibi işlem yapabilmek ve FBLoginView'i gizleyerek kendi butonumu fb login butonu haline getirmekti.

Bunun için öncelikle AppDelegate.swift dosyamın

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: NSDictionary?) -> Bool metoduna aşağıdaki kodları ekledim.



 




if FBSession.activeSession().state == FBSessionState.CreatedTokenLoaded
{

// If there's one, just open the session silently, without showing the user the login UI
FBSession.openActiveSessionWithReadPermissions(["public_profile"], allowLoginUI: false, completionHandler: {
(session, state, error) -> Void in
self.sessionStateChanged(session, state: state, error: error)
})
}







Bu metodun hemen altına ise aşağıdaki sessionStateChanged metodunu ekledim.





func sessionStateChanged(session : FBSession, state : FBSessionState, error : NSError?)
{
// If the session was opened successfully
if state == FBSessionState.Open
{
println("Session Opened")
}
// If the session closed
if state == FBSessionState.Closed
{
println("Closed")
}
}





AppDelegate.swift dosyamızdaki işlem tamamlandı. Sıra facebook butonumuzu oluşturmaya geldi.
Bunu storyboardda istediğimiz şekilde oluşturduktan sonra ViewController.swift dosyamıza control tuşu ile birlikte sürükleyerek action oluşturuyoruz.
Bu action metodunun içine fb login kodlarını aşağıdaki gibi ekliyoruz. Ben login butonumun action metoduna fbloginButtonAction ismini verdim.





@IBAction func fbloginButtonAction(sender: AnyObject) {

if (FBSession.activeSession().state == FBSessionState.Open || FBSession.activeSession().state == FBSessionState.OpenTokenExtended)
{
// Close the session and remove the access token from the cache
// The session state handler (in the app delegate) will be called automatically
FBSession.activeSession().closeAndClearTokenInformation()
}
else
{
// Open a session showing the user the login UI
// You must ALWAYS ask for public_profile permissions when opening a session
FBSession.openActiveSessionWithReadPermissions(["public_profile"], allowLoginUI: true, completionHandler: {
(session:FBSession!, state:FBSessionState, error:NSError!) in

let appDelegate = UIApplication.sharedApplication().delegate as AppDelegate
// Call the app delegate's sessionStateChanged:state:error method to handle session state changes
appDelegate.sessionStateChanged(session, state: state, error: error)
})
}


}






Artık önceden oluşturduğumuz fbloginview viewini hidden yapabiliriz. Bunun için main.storyboard'da fbloginview'e tıklayıp sağdaki menüden ortadaki view seçeneğine gelip hidden seçeneğine tik atmamız yeterli.

Bu işlemlerden sonra yeni facebook butonumuza tıkladığımızda eskisiyle aynı şekilde çalışacak ve tekrar tıkladığımızda facebooktan çıkış yapılacaktır.

İnşallah yardımcı olmuştur. Güle güle kullanın.

10 Şubat 2015 Salı

IOS Swift ile UIPickerView Kullanımı

Merhaba öncelikle UIPickerView'i ne için kullanacağımdan bahsedeyim. Yapacağım uygulama için kullanıcıların uygulama kategorileri içinden bir tanesini seçmesi gerekiyor. Bunu IOS'da nasıl uygulayabileceğimi araştırdım. Bildiğimiz ComboBox'lar için genelde özelleştirilmiş TableView'ler kullanılıyor. Fakat bu aşamada fazla zamanım olmadığından bu yöntemle uğraşıp yeni Celler oluşturup minik bir tableview yapmak istemedim ve Xcode6'da bulunan elemanlardan UIPickerView dikkatimi çekti. Bu genelde uygulamalarda doğum günümüzü girerken sıklıkla kullandığımız veya alarm kurarken saati ayarladığımız görsele benziyor fakat onun adı UIDatePicker ve UIPickerView'in tarih ve saat için özelleştirilmiş hali zannedersem.

Önce UIPickerView'i main.storyboard'da istediğimiz view'e yerleştiriyoruz. Ve control + click le sürükleyerek view controllerın köşesindeki sarı yere bırakıyoruz. Karşımıza iki seçenek çıkıyor delegate ve dataSource. Burada delegate i seçiyoruz ve view ile UIPickerView'i bağlamış oluyoruz.

Screen Shot 2015-02-10 at 8.12.54 PM

Şimdi bu ViewController'ın Swift dosyasına UIPickerView classını eklememiz gerekiyor bunu aşağıdaki şekilde ekliyoruz.

 

class ViewController: UIViewController , UIPickerViewDelegate{...


 

Şimdi bu picker'ın içini doldurmak için bir array oluşturacağız.


 

var kategoriler = ["pop","rock","..."]


 

ViewControllerimizi UIPickerViewDelegate Classından yukardaki şekilde inherit ettikten sonra  bu classın bazı metodlarını aşağıdaki gibi tanımlayabiliriz.
Bir classın sahip olduğu metodları görmek için xCode6 da cmd tuşuna basılı tutarak classın isminin üzerine gelin. Rengi maviye dönecek ve altı çizili hale gelecektir ve tıkladığınızda bu classın tanımlandığı sayfaya gideceksiniz istediğiniz metodu buradan kopyalayıp kullanabiliriz.



//component sayısı şimdilik 1 kullanıyoruz.
func numberOfComponentsInPickerView(pickerView: UIPickerView) Int{
return 1
}


//pickerdaki kayıt sayısı dizimizin boyutu ile aynı olacak
func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) Int{
return kategoriler.count
}

//burada her satır için dizinin o satırdaki değerini döndürmemiz gerekiyor
func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) String! {
return kategoriler[row]
}

 


// pickerda herhangi bir kayıt seçildiğinde çalıştırılacak metod (seçilen kaydın indexi row değeri)


func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int){

var itemSelected = kategoriler[row]


        label.text = itemSelected


}



 

Son fonksiyon ile seçilmiş olan kaydın indeksine ulaşmış oluyoruz bu index ile de dizideki elemanı alıp istediğimiz şekilde kullanabiliriz.


UIPickerView'i birden çok component ile kullanma


Buradaki componentler aslında sütunlara karşılık geliyor. Bunun için yukarıda kullandığımız metodların aynılarını kullanacağız fakat ilk metodda 1 yerine kaç sütun istiyorsak o sayıyı döndüreceğiz. Diğer metodlarda ise metodun hangi componentten çağırıldığını kontrol edip buna göre işlemimizi gerçekleştireceğiz. Aynı şekilde pickerviewi main storyboarda ekleyip Classını View Controller'ımıza ekledikten sonra UIPickerViewDelegate classının metodlarını tanımlıyoruz.


 

//component sayısı bu defa 2 olsun. Yani 2 sütunlu bir pickerımız olacak


func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int{


    return 2


}


//ilk sütun için kategoriler dizisi ikinci sütun için altkategoriler dizisinin boyutları döndürülüyor.


func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int{


    if(component == 0){


        return kategoriler.count


    }else{


        return altkategoriler.count


    }


}


//aynı şekilde ilk sütun için kategoriler ikincisi için altkategoriler dizisinin elemanlarını döndürüyoruz


    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String!{


 if(component == 0){


    return kategoriler[row]


}else{


    return altkategoriler[row]


}


}


 

//burada bir değişiklik yaptım ve ikinci sütunu birinci sütunda seçilen değere göre tekrar yükledim.

// altKategoriler = [["pop","rock"],["a","b"],["x","y"]] şeklinde bir dizim var. bu iki boyutlu bir dizi ve her indexi bir kategorinin alt kategorilerini tutuyor.

//row değeri seçilen kategori değerini belirtiyor ve altKategoriler dizisinin seçilen kategorideki indexinde bulunan altkategoriler dizisi pickerın altkategoriler dizisine eşitleniyor ve bu yeni değerler için picker yeniden yükleniyor.

//buradaki pickerControl değeri mainstoryboarddan control + click pickerı sürükleyerek view controllera bırakarak oluşturuldu.

func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int){


 if(component == 0){


    itemSelected = kategoriler[row]

    altkategoriler = altKategoriler[row]


    pickerControl.reloadAllComponents()


    self.fileUrlLabel.text = itemSelected


}else{


    var itemSelected = altkategoriler[row]


    self.fileUrlLabel.text = itemSelected 


}}


 

UIPickerView'in son hali böyle oldu. Güle güle kullanın :)

Screen Shot 2015-02-11 at 1.02.15 AM

9 Şubat 2015 Pazartesi

IOS Swift UIButton Textini ve Rengini Değiştirme

Malum yazı yazmak için çok fırsat bulamıyor insan ama unutmamak için kısa kısa notlar tutacağım. Bu notta main.storyboard'a yerleştirdiğimiz bir butonun Title'ını ve Buton rengini Swift programlama ile nasıl değiştirebileceğinizi yazmak istedim.

Button texti için;

button.setTitle("Yeni Text", forState: UIControlState.Normal)

Button rengi için;


button.setTitleColor( UIColor(red: 252/255, green: 88/255, blue: 46/255, alpha: 1), forState: UIControlState.Normal)

UIColor(red: ,green: ,blue: ,alpha: ) metodu ile RGB değerini bildiğiniz herhangi bir rengi elde edebilirsiniz. RGB değerleri 255 üzerinden olduğundan ve burada float değer istendiğinden elinizdeki RGB değerlerini 255e bölüp 0 ile 1 arasında bir float değer elde etmeniz gerekiyor.

6 Şubat 2015 Cuma

Swift ile IOS Programlamaya Genel Bakış

Japonca macerası yazılarımdan sonra biraz da teknik bişeyler yazayım da blogumun çeşitliliği yerine gelsin dedim.

Bunun yanında Japoncamı da geliştirmek için yazıyı Japonca yazmaya karar ver.... şaka şaka :P

Bu yazımda iOS'a yeni başlayan ve Objective C bilmeyen biri olarak Swift ile programlamanın benim için ne ifade ettiğinden bahsedeceğim.

Öncelikle Objective C bilmiyorum ama gördüğüm kadarı ile yapısı C ile benzer ve okunması zor gibi duruyor. Swift'e başladığımda ilk hissettiğim şey herşeyin programcıların işini kolaylaştıracak biçimde hafifletilmiş olması, dilin yapısının çok basit olduğu ve geliştirme ortamının da tasarım ve programlamayı bütünleştiren bir yapıda olduğu idi.
Swifti öğrenmeye bugün başlasanız bir hafta içinde çok çok güzel uygulamalar çıkartabilirsiniz.

Mobil programlama hakkında çok şey bilmiyorum fakat bu alanda tasarım ile ilgili Android'de de iOS'da da bir açık var gibi duruyor. Native bir mobil uygulama yapıyorsanız arayüzde bazı kısıtlarla karşılaşıyorsunuz. Yada ben henüz kısıtları nasıl aşacağımı öğrenemedim. Başlangıçta bu bir sorun gibi gözükse de aslında iOS sizi diğer uygulamalarla bütünleşebilecek, telefonun akışını bozmayacak bir tasarıma itiyor gibi. Bu da kullanıcı alışkanlıkları açısından aslında güzel bir durum.

Uygulamanın arayüz tasarımını Main.storyboard'da hazırlıyoruz ve daha sonra oluşturduğumuz ViewController'lar ile Main.storyboard'a eklediğimiz viewlere ait bileşenleri controller'lara bağlıyoruz. (Burda ne dedim niye dedim bana bunu kim dedirtti ben de anlamadım .)

Şöyle ki Main.storyboard dosyamıza eklediğimiz ve düzenlediğimiz bir ViewController aşağıdaki gibi görünüyor.
Bu ViewController'a sürükle bırak yöntemi ile aşağıdaki gibi label, button, navigation bar, table view gibi birçok eleman ekleyebiliyoruz.

Screen Shot 2015-02-06 at 7.52.27 PM

Bu eklediğimiz elemanları yönetebilmek için ise ViewController.swift dosyamızı kullanıyoruz. Bu dosyada Label'ların değerini değiştirmek, Tableview'e data yüklemek, kullanıcı tarafından Textbox'lara girilen değerleri kontrol etmek gibi işlemleri Swift programlama dili ile yapıyoruz.

Swift ile iOS programlamada genel olarak uğraşacağınız dosyalar Main.storyboard ve .swift dosyaları olacak.

Programlama akışı storyboard'da görseli hazırlayıp .swift dosyasına elemanları bağlayıp istediğiniz işlemi yapmak bu kadar... :)

Şimdi yeni başlayanlar için ihtiyaç duyulabilecek bazı özelliklerden bahsetmek istiyorum.

Segue

Başlangıçta SingleView projesi ile oluşturulmuş tek sayfalık uygulamalar yeterli olacaktır fakat biraz ilerlediğinizde birden çok view'e ihtiyaç duyacaksınız. Ve bu viewleri birbirine bağlamanız gerekecek. Bunu segue'ler yardımıyla yapıyoruz. Butona tıkladığında otomatik olarak sayfa geçişlerini main.storyboard'dan ekleyebildiğiniz gibi controller.swift dosyalarınızda programlama yaparak kontrollü biçimde sayfalar arası geçişi de sağlayabilirsiniz. İleride bununla ilgili bir yazı yazacağım.

Navigation Controller

Uygulamanızın bir bütün olarak görünmesi için oluşturduğunuz viewleri kontrol edebileceğiniz bir navigation controller'a ihtiyaç duyacaksınız.
Araştırmalarım sonucunda bu yapıyı basit bir şekilde sağlayan bir kütüphaneye rastladım. Bu kütüphane uygulamanın hangi sayfasında olursanız olun sağdan veya soldan(seçiminize göre) parmağınızla sürüklediğinizde menüyü görmenizi sağlıyor. Aşağıdaki linkten son sürümünü indirip uygulamanızı bu yapının üzerine kolayca oluşturabilirsiniz.

Kütüphanenin Github Linki:  https://github.com/evnaz/ENSwiftSideMenu

Fontlar ve İconlar

Mobil uygulamalarda olmazsa olmaz arayüzü güzelleştiren şeyler bence iconlardır. Uygulamanız iconlarla bir anda çok değişebilir. Bu yüzden iconlar için uygulamanıza font ekleme ihtiyacı duyabilirsiniz.

Bunu yapmak için öncelikle istediğiniz fontu indirip uygulamanıza kopyalamanız gerekecek. Ben Font Awesome'ı kullandım.

Github Linki: http://fortawesome.github.io/Font-Awesome/

Kullanabileceğiniz iconlar : http://fortawesome.github.io/Font-Awesome/icons/

Githubdan indirdiğiniz dosyanın içinden .ttf uzantılı dosyayı xcode'a sürükleyip kopyalayın.

Projenize eklendiğinden emin olmak için Projenizin ismine tıklayıp Build Phases menüsündeki Copy Bundle Resources kısmında ekli olduğundan emin olun. Eklenmemişse kendiniz buraya ekleyin.

Projenizin içinde Supporting Files dizini altında Info.plist dosyasının içine fontawesome'ı eklememiz gerekiyor. Bunun için bir satıra tıklayıp + işaretine basarak yeni bir alan oluşturun bu alana "Fonts provided by application" yazın ve tipini Array olarak değiştirip kaydedin.

Daha sonra yandaki ok işareti ile Array'i genişletip Item 0 String değerini font dosyanızın adıyla değiştirin

FontAwesome için : "fontawesome-webfont.ttf"

Artık fontunuz eklendiğine göre istediğiniz label'ın veya button'un fontunu Font Awesome ile değiştirdikten sonra değerini istediğiniz iconun unicode değerine aşağıdaki şekilde eşitleyebilirsiniz.

Button için ;

button.setTitle("\u{f04b}", forState: UIControlState.Normal)


Label için ;


label.text = "\u{f027}"


Custom Cell 

Table view'e şimdiye kadar çok ihtiyaç duydum büyük ihtimalle siz de uygulamanızın bir yerinde mutlaka ihtiyaç duyacaksınız. Uygulamanıza eklediğiniz Table'ın cell'lerine yani her bir satırına kayıtla ilgili resim button veya buna benzer bileşenler ekleyerek tablonuzu Swift'te tanımlı olmayan bir yapıda oluşturmak isteyebilirsiniz. Bunun için TableView içine yerleştireceğiniz Cell yapısını kendiniz tanımlamanız gerekiyor ve bu Cell yapısını kontrol edebilmek için bir CellController Swift dosyası yazmanız gerekiyor. Bununla ilgili de ayrıntılı bir yazı yazmayı planlıyorum bu yüzden şimdilik sadece böyle birşeye ihtiyaç duyarsanız Swiftte kolayca yapabileceğinizi bilmenizi istiyorum. Custom Cell yazımı paylaşana kadar bu konuyla ilgili sorularınız olursa yorum yazabilirsiniz.

Bu yazıyı genel olarak Swift ile ilgili bir fikir edinmenize elimden geldiği kadar katkıda bulunmak ve şimdiye kadar ihtiyaç duyduğum şeylere nasıl çözüm bulduğumla ilgili tecrübeleri paylaşmak için yazdım.

Swift ile şunu yapmak için neyi araştırmam gerekiyor gibi sorularınız varsa şimdiye kadar denediğim ve bildiğim kadarıyla cevap verebilmem için yorum yazabilirsiniz.