iOS PickerView টিউটোরিয়াল

আজ আমরা দেখব কিভাবে আইওএস এ পিকার ভিউ নিয়ে কাজ করা যায়। যে অ্যাপটা তৈরি করব, তা হচ্ছে Pick Your Flag নামে। একটা পিকার ভিউতে কয়েকটা দেশের নাম থাকবে। পিকার ভিউ থেকে দেশের নাম সিলেক্ট করলে একটা ইমেজ ভিউতে ঐ দেশের পতাকা দেখাবে। একটা প্রজেক্ট তৈরি করে নি।

 

স্টোরিবোর্ডে একটা ইমেজ ভিউ, একটা লেভেল এবং একটা পিকার ভিউ যুক্ত করি। স্টোরি বোর্ড এ আমরা উপরের দিকে তিনটা অপশন দেখি। একটা হচ্ছে  View Controlar একটা হচ্ছে  First Responder এবং শেষরটা হচ্ছে Exit। আমরা আমাদের পিকার ভিউকে ভিউ কন্ট্রোলারের সাথে যুক্ত করতে হবে।

পিকার ভিউ সিলেক্ট করে Control + Click করে ভিউ কন্ট্রোলারের উপর ছেড়ে দিলে দুইটা অপশন পাওয়া যাবে। একটা হচ্ছে DataSource আরেকটা delegate. দুই বার কানেক্ট করে দুইটা সিলেক্ট করে দিব। বুঝতে অসুবিধে হলে নিচের ইমেজটি দেখতে পারিঃPicker View Connect

 

এবার Assistant Editor এ ক্লিক করে আমাদের লেভেল এবং ইমেজ ভিউ ভিউ কন্ট্রোলারের সাথে যুক্ত করি। পিকার ভিউতে আমরা কোন কোন দেশ সিলেক্ট করতে দিব, তার একটা অ্যারে তৈরি করে নি।

পিকার ভিউ ব্যবহার করতে হলে আমাদের UIPickerViewDelegate প্রোটোকলটি আমাদের ভিউ কন্ট্রোলারে যুক্ত করতে হবে। এবং UIPickerViewDelegate এর মেথড গুলো ইমপ্লিমেন্ট করতে হবে। যে মেথড গুলো অবশ্যই ইমপ্লিমেন্ট করতে হবে, সে গুলো হচ্ছেঃ

 

  func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {

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

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

        
    }

 

numberOfComponentsInPickerView দিয়ে আমরা সেট করে দিব কয়েটা কম্পোনেন্ট হবে আমাদের পিকার ভিউতে। আমরা চাইলে একের অধিক কম্পোনেন্ট যুক্ত করতে পারি। আমাদের অ্যাপটা তৈরি করতে একটাই কম্পোনেন্ট লাগবে।

এর পড়ের মেথড দিয়ে বলে দিব কয়েটা রো লাগবে। এটা সেট করে দিব আমাদের অ্যারে সাইজ এর সমান।

এরপরের ফাংশন দিয়ে  প্রতিটা রোঁ এর টাইটেল দিয়ে দেওয়ার জন্য ব্যবহৃত হয়। এগুলো হচ্ছে রিকোয়ার্ড। পিকার ভিউ ব্যবহার করতে হলে এগুলো লাগবেই। আরেকটা মেথড আমাদের লাগবে। তা হচ্ছে পিকার ভিউতে কোন আইটেম সিলেক্ট করলে কি কাজ করবে, তা সেট করে দেওয়া। আপাতত আমরা পিকার ভিউ থেকে কেউ কোন দেশ সিলেক্ট করলে আমরা ইমেজ ভিউতে ঐ দেশের পতাকা দেখাবো। এটা করার জন্য আমরা switch-case ব্যবহার করেছি। আমাদের সম্পূর্ণ ViewControlar.swift:

 


import UIKit

class ViewController: UIViewController, UIPickerViewDelegate {
    var country = ["Pick your Country","Bangladesh", "India", "Pakistan", "Srilanka", "Nepal"]
    
    @IBOutlet var imageView: UIImageView!
    @IBOutlet var labelView: UILabel!
   

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
        
        return 1;
    }
    
    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent: Int) -> Int{
        
        return country.count
    }
    
    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String?{
        
        return country[row]
        
    }
    
    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int){
        
        let countrySelected = country[row]
        
        switch (countrySelected){
            
        case "Bangladesh":
            imageView.image = UIImage(named: "Bangladesh.jpg ")
            labelView.text = "You selected Bangladesh"
            
        case "India":
            imageView.image = UIImage(named: "India.png")
            labelView.text = "You selected India"
            
        case "Pakistan":
            imageView.image = UIImage(named: "Pakistan.png")
            labelView.text = "You selected Pakistan"
            
        case "Srilanka":
            imageView.image = UIImage(named: "Srilanka.jpg")
            labelView.text = "You selected Srilanka"
            
        case "Nepal":
            imageView.image = UIImage(named: "Nepal.jpg")
            labelView.text = "You selected Nepal"
            
        default:
            imageView.image = UIImage(named: "music.jpg")
            labelView.text = "You selected "
            
            
            
        }// end switch
        
        return
    }// end of didSelect
}


 

 

অ্যাপটা রান করলে আমাদের অ্যাপ দেখতে পাবো।

 

Leave a Reply