Cara membuat kalkulator di Swift 5

Untuk mengantisipasi dimulainya kursus dasar "pengembang iOS", kami menerbitkan artikel yang ditulis oleh penulis lepas kami.







Halo! Lebih dari satu tahun telah berlalu sejak rilis Swift 5, yang membawa banyak hal baru bagi para pengembang. Pada artikel ini saya ingin berbicara tentang pengembangan seluler untuk iOS, cara kerjanya, apa yang dibutuhkan untuk ini, dan banyak lagi. Artikel ini ditujukan untuk orang yang baru memulai pemrograman mereka di Swift 5 .



Persyaratan sistem operasi dan perangkat keras



Dengan satu atau lain cara, untuk membangun aplikasi untuk iOS versi apa pun, Anda memerlukan komputer yang menjalankan sistem operasi Mac OS (dan sebaiknya versi terbaru, jika tidak, beberapa bagian dari alat pengembang dan Xcode mungkin mulai bekerja sama sekali tidak dapat diprediksi). Kebutuhan akan sistem yang menjalankan Mac OS menjadi penyebab kontroversi dan kebencian dari pengembang lain yang tidak terbiasa dibatasi kemampuannya karena sistem operasi tersebut. Paling sering, ada beberapa cara: membeli atau merakit Hackintosh (namun, dalam kasus perakitan sendiri, saya ingin memperingatkan Anda bahwa tidak akan mudah merakit komputer seperti itu tanpa masalah driver yang konstan). Saya telah melihat menginstal image sistem operasi ke mesin virtual dan menjalankan Mac OS ke laptop biasa, tanpa masalah driver.Namun, jalur ini akan membutuhkan beberapa keterampilan perangkat keras dari Anda dan mengancam akan kurangnya dukungan 100% untuk versi Mac OS mendatang.



Cara alternatif, tentu saja, adalah membeli komputer asli dari Apple. Jika Anda menginginkan laptop, maka Anda mungkin tahu apa yang harus dilakukan (tetapi saya ingin segera memperingatkan Anda bahwa Xcode segera membutuhkan sekitar 25 gigabyte, dan dapat dengan mudah mengambil 44 gigabyte jika Anda mengunduh simulator tambahan ke perangkat. ukuran 128 gigabyte seharusnya hanya untuk pengembangan iOS tanpa potongan tambahan seperti node_modules, cache Pycharm dan Unity, homebrew, dan hal-hal lain untuk pengembang, yang membutuhkan banyak ruang disk. Jika Anda akan melakukan sesuatu yang lain, Anda akan memerlukan disk setidaknya dari 256 gigabyte atau lebih).



Pilihan lingkungan pengembangan



Selain cara yang kurang lebih klasik untuk mengembangkan aplikasi di Xcode menggunakan Swift dan menggunakan pustaka Cocoa dan CocoaTouch, sekarang ada banyak cara lain untuk mengembangkan hampir tanpa menggunakan Xcode (hanya tanpa Xcode Anda tidak dapat lagi membangun aplikasi). Ada beberapa teknologi:



  • Xamarin . Aplikasi pada platform ini ditulis menggunakan C #. Dengan Xamarin, Anda dapat membuat aplikasi Android atau iOS asli. Pengembangan dapat dilakukan dengan menggunakan Visual Studio. Meskipun ada keuntungan seperti itu, kemungkinan besar. beberapa fragmen aplikasi perlu ditulis secara terpisah untuk setiap platform
  • React Native. React , -. . , - , - . , .
  • Flutter. , Flutter Dart Google. , , . , Flutter โ€” React Native, . Dart, -
  • PhoneGap/Cordova. Nitobi, Adobe. , PhoneGap, Apache Cordova, WebView,
  • Unity. IOS, . , . gamedev.




Apple merekomendasikan penggunaan bahasa pemrograman Swift untuk mengembangkan aplikasi. Swift adalah bahasa pemrograman yang relatif baru yang tidak dirilis secara resmi hingga 2014. Ini dapat digunakan untuk pengembangan untuk Mac OS, IOS, dan ada juga dukungan untuk Linux (jadi jika Anda memiliki, katakanlah, bukan Linux yang sangat spesifik, Anda dapat mengunduh dan mencoba bahasanya dengan aman, misalnya, dari tautan ini ).



Swift sendiri adalah bahasa khas generasi baru, seperti Golang.

Awalnya, bahasa ini dipahami sebagai bahasa yang lebih mudah dibaca dan tahan kesalahan bagi pemrogram daripada Objective C. Pada saat yang sama, Swift dapat bekerja di proyek yang sama dengan C dan Objective C.



Alih-alih mencoba memberikan deskripsi bahasa ini (yang sekilas adalah C ++, baru saja dimodifikasi ke realitas modern dengan fungsi pengetikan otomatis yang modis), saya menyarankan pembaca untuk mempelajari dokumentasi yang sangat bagus dari Apple, yang menjelaskan secara detail cara kerja bahasa tersebut. dan apa sintaksnya. Versi bahasa Inggris dapat ditemukan di sini , terjemahan bahasa Rusia dapat ditemukan di sini . Setelah Anda terbiasa dengan dasar-dasar bahasa Swift, kita dapat melanjutkan ke apa yang kita lakukan hari ini - membuat kalkulator sederhana menggunakan Xcode.



Membuat kalkulator



Untuk membuat aplikasi, kita membutuhkan Xcode yang dapat diunduh secara gratis dari AppStore. Jangan terintimidasi oleh peringkatnya - terlepas dari kenyataan bahwa lima ulasan pertama memberi 1 bintang, ini tidak berarti Anda akan terkejut. Mungkin sintaks dan petunjuk benar-benar tidak disertakan terlalu cepat saat mengedit - tetapi secara umum, Xcode memberi saya tayangan yang lebih disukai berkali-kali lipat daripada Android Studio yang sama (meskipun mungkin saya tidak tahu cara menyiapkannya). Jika Anda tiba-tiba memiliki keinginan untuk mencoba pengembangan di luar Xcode dan Anda lebih memilih produk JetBrains, maka Anda dapat mencoba AppCode - ini mendukung interoperabilitas dengan Xcode, bekerja dengan Swift dan Objective C, dan banyak fitur bagus lainnya. Saya pribadi belum mencobanya, tetapi jika Anda memiliki langganan ke semua perangkat lunak dari JetBrains - mengapa tidak mengunduh dan menjalankannya.



Jadi Anda telah menginstal Xcode. Sekarang Anda bisa mulai berkembang. Mulai proyek baru dan pilih Aplikasi Halaman Tunggal:







Setelah itu, Anda akan diminta untuk memasukkan data tentang aplikasi Anda. Jika ini adalah pertama kalinya Anda meluncurkan Xcode, Anda harus memasukkan ID Apple di sana. Setelah itu, Anda harus mengisi informasi tentang nama proyek Anda (dalam kasus kami, hanya Kalkulator) dan nama perusahaan dan aplikasi Anda. Anda dapat menulis apa pun yang Anda inginkan di sini jika Anda tidak bermaksud untuk menerbitkan aplikasi ini di masa mendatang. Saya memilih Swift sebagai bahasa dan Storyboard sebagai Antarmuka Pengguna. Saya telah membuang tes sejauh ini karena saya hebat , karena tidak ada yang benar-benar untuk diuji di sini.







Setelah kami membuat aplikasi kami, Anda dapat membuka file diCalculator.xcodeprojdan sesuaikan pengaturan apa pun jika Anda mau. Untuk saat ini, saya membiarkan semuanya seperti itu, mengembangkan untuk versi terbaru iOS 13.6 untuk Iphone dan Ipad. Pada prinsipnya, Anda dapat mengecualikan iPad untuk saat ini - antarmuka kami kemungkinan besar tidak akan terlihat bagus. Namun, saya ingin memperingatkan Anda bahwa jika Anda tiba-tiba menerbitkan - karyawan Apple sedang menguji aplikasi untuk iPhone untuk verifikasi, sehingga setidaknya berfungsi di Ipad. Tetapi sebelum itu, Anda masih harus mengeluarkan $ 99 untuk kunci pengembang).



Setelah membuat aplikasi, Anda bisa langsung memanggil emulator untuk melacak apa yang terjadi. Untuk melakukan ini, Anda cukup menekan kombinasi tombol CMD + R. Di kiri atas, Anda dapat memilih perangkat tempat Anda menjalankan emulator, dan Anda juga dapat menghubungkan perangkat fisik Anda yang sebenarnya melalui kabel dan langsung mengujinya).



Ada banyak cara untuk membuat antarmuka dan widget di dalamnya, saya akan menggunakan opsi netral - buat dudukan utama, letakkan di seluruh layar, dan kemudian secara terprogram mulai memposisikan widget saya. Oleh karena itu, pertama-tama kita pergi ke file Main.storyboarddan membuat tampilan utama menjadi hitam, agar lebih nyaman menempatkan elemen kita:







Setelah itu, kami akan menambahkan View, yang sebagian besar akan kami kerjakan. Untuk melakukan ini, klik pada tanda plus di kanan atas, di mana Anda dapat menambahkan widget, dan menambahkan widget baru, ketik uiview dalam pencarian :







Setelah itu, kami menyeret widget ini ke layar utama, dan kami perlu memperluasnya ke layar penuh. Untuk ini kita perlu bekerja sama constaint. Untuk melakukan ini, klik ikon di kiri bawah, yang terlihat seperti kapal Darth Vader, dan tetapkan 0 di setiap sisi:







Setelah itu, widget baru Anda akan meluas agar sesuai dengan seluruh layar. Selanjutnya sama seperti sebelumnya, kita perlu mengganti warna widget kita, hanya sekarang menjadi Clear Color agar tidak mengganggu kita dan kita dapat menempatkan widget di dalamnya.



Sekarang Anda dapat membuka file tersebutViewController.swift, di mana kita akan memiliki semua program lainnya. Pertama, kita perlu menggunakan penanda khusus @IBOutletagar dapat menautkan Storyboard ke kode kita. Untuk melakukan ini, kita harus menulis baris berikut:



@IBOutlet var holder: UIView!


Sekarang kita dapat menautkan kode ke widget. Untuk melakukan ini, sebenarnya, Anda perlu menghubungkan pemegang kami dengan Pemegang. Untuk melakukan ini, klik kanan viewControllerdan seret penahan ke layar kami:







Akhirnya, kami telah selesai menautkan kode ke Storyboard dan kami dapat memulai pemrograman.



Selanjutnya, kita akan menambahkan dua variabel, yang pertama hanya berupa angka di mana nilai pertama dapat ditulis, dan yang kedua akan menjadi nilai yang dihasilkan. Variabel ketiga akan sedikit lebih spesifik, karena kita akan menggunakan deklarasi opsional (Anda dapat membaca hewan jenis apa, Anda dapat membaca selengkapnya di sini). Opsional dapat berisi nilai apa pun atau nihil. Opsional juga memastikan bahwa nilai nihil diproses secara eksplisit. Selain itu, kami akan menambahkan dari awal daftar operasi matematika yang didukung kalkulator:



    var firstNumber = 0
    var resultNumber = 0
    var currentOperations: Operation?
        enum Operation {
        case add, subtract, multiply, divide
    }


Selanjutnya, kita harus membuat Label, di mana kita akan menampilkan angka dan hasil perhitungan. Secara default, akan ada 0 dan font yang cukup besar. Segala sesuatu yang lain, menurut saya, sangat jelas:



    private var resultLabel: UILabel = {
        let label = UILabel()
        label.text = "0"
        label.textColor = .white
        label.textAlignment = .right
        label.font = UIFont(name: "Helvetica", size: 100)
        return label
    }()



Setelah itu, dengan melewatkan metode built-in yang memanggil kita rendering (yang sedang saya bicarakan viewDidLoad), kita perlu memanggil metode yang akan memanggil fungsi yang akan menarik semua tombol tempat fungsi handler akan digantung.



    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        setupNumberPad() //,      
    }


Setelah itu baru kita punya fungsinya setupNumberPad. Pertama, saya akan mengatur konstanta untuk ukuran font kita, sehingga nanti, jika ada, Anda bisa langsung menambah / mengurangi ukuran font di aplikasi, karena saya bekerja tanpa layout. Setelah itu saya akan membuat ukuran tombol - lebarnya akan sama dengan seperempat ukuran layar aplikasi kita.



    private func setupNumberPad() {
        let FontSize:CGFloat = 25 
        //      
        let buttonSize: CGFloat = view.frame.size.width / 4 
        //    1/4
        let zeroButton = UIButton(frame: CGRect(x: 0, y: holder.frame.size.height-buttonSize, width: buttonSize*3, height: buttonSize))
        //  UIButton     
        zeroButton.setTitleColor(.black, for: .normal) 
        //    
        zeroButton.backgroundColor = .white
        //   
        zeroButton.setTitle("0", for: .normal) 
        //    0
        zeroButton.titleLabel?.font = UIFont(name: "Helvetica", size: FontSize)
        // , family    
        zeroButton.tag = 1 
        //         
        holder.addSubview(zeroButton)  //    holder 
        zeroButton.addTarget(self, action: #selector(zeroTapped), for: .touchUpInside) 
        //       
 


0 menempati sepertiga layar sehingga kita bisa pergi ke kolom kanan untuk operan matematika. Selanjutnya, kita perlu merender semua tombol dengan cara tertentu. Tentu saja, itu mungkin untuk menggambarnya satu per satu, tetapi kemudian akan menjadi panjang dan suram. Karena kita hanya akan memiliki serangkaian angka dari 1 hingga 9, maka keputusan untuk menggunakan siklus cukup di permukaan. Saya akan memberikan siklus pertama dengan komentar, dan sejak dua lainnya pada dasarnya adalah pengulangan, saya akan memberikannya tepat di bawah potongan:



        for x in 0..<3 {
            let button_row_1 = UIButton(frame: CGRect(x: buttonSize * CGFloat(x), y: holder.frame.size.height-(buttonSize*2), width: buttonSize, height: buttonSize))
            //   x     x
            button_row_1.setTitleColor(.black, for: .normal) //
            button_row_1.backgroundColor = .white // 
            button_row_1.setTitle("\(x+1)", for: .normal) //  
            holder.addSubview(button_row_1) //    
            button_row_1.tag = x+2 // .. 1  ,   2
            button_row_1.addTarget(self, action: #selector(numberPressed(_:)), for: .touchUpInside)
            // 
        }


Sisa kode nomor kita




       for x in 0..<3 {
            let button_row_2 = UIButton(frame: CGRect(x: buttonSize * CGFloat(x), y: holder.frame.size.height-(buttonSize*3), width: buttonSize, height: buttonSize))
            button_row_2.setTitleColor(.black, for: .normal)
            button_row_2.backgroundColor = .white
            button_row_2.setTitle("\(x+4)", for: .normal)
            button_row_2.addSubview(button_row_2)
            button_row_2.tag = x+5
            button_row_2.addTarget(self, action: #selector(numberPressed(_:)), for: .touchUpInside)
        }
        
        for x in 0..<3 {
            let button_row_3 = UIButton(frame: CGRect(x: buttonSize * CGFloat(x), y: holder.frame.size.height-(buttonSize*4), width: buttonSize, height: buttonSize))
            button_row_3.setTitleColor(.black, for: .normal)
            button_row_3.backgroundColor = .white
            button_row_3.setTitle("\(x+7)", for: .normal)
            holder.addSubview(button_row_3)
            button_row_3.tag = x+8
            button_row_3.addTarget(self, action: #selector(numberPressed(_:)), for: .touchUpInside)
        }
    




Setelah itu, kita perlu menempatkan tombol CE kita, di mana kita akan mengatur ulang data yang dimasukkan. Kami akan menempatkannya di atas, dan kami akan menjelaskan beban fungsionalnya nanti. Untuk saat ini, kita hanya perlu memposisikannya dan menghubungkan penangannya:



        let clearButton = UIButton(frame: CGRect(x: 0, y: holder.frame.size.height-(buttonSize*5), width: view.frame.size.width - buttonSize, height: buttonSize))
        clearButton.setTitleColor(.black, for: .normal)
        clearButton.backgroundColor = .init(red: 0, green: 2, blue: 0.8, alpha: 1) //       rgb
         clearButton.titleLabel?.font = UIFont(name: "Helvetica", size: FontSize-4) //     
        clearButton.setTitle("CE", for: .normal)
        holder.addSubview(clearButton) //     holder
        clearButton.addTarget(self, action: #selector(clearResult), for: .touchUpInside) //  


Kami selesai dengan bagian berulang yang membosankan ini, sekarang kami siap untuk hal lain - operan kami yang dengannya kami dapat melakukan operasi matematika. Untuk memulainya, kami akan menempatkan operan yang diperlukan di dalam array, dari mana kami akan membawanya. Kami akan menempatkan tombol operan sendiri di kolom dan menambahkan fungsi handler yang akan bereaksi saat menekan operan kami. Saya akan membuat tombol dengan warna kejutan kekanak-kanakan yang menyenangkan , kuning, dan ukurannya sedikit lebih besar dari angka kita.



        let operations = ["=","+", "-", "x", "รท"] //  

        for x in 0..<5 {
            let button_operand = UIButton(frame: CGRect(x: buttonSize * 3, y: holder.frame.size.height-(buttonSize * CGFloat(x+1)), width: buttonSize, height: buttonSize))
            button_operand.setTitleColor(.black, for: .normal)
            button_operand.backgroundColor = .init(red: 2, green: 0.8, blue: 0, alpha: 1) // 
            button_operand.setTitle(operations[x], for: .normal)
            holder.addSubview(button_operand)
            button_operand.tag = x+1 
            // ,       
            button_operand.titleLabel?.font = UIFont(name: "Helvetica", size: FontSize)
            button_operand.addTarget(self, action: #selector(operationPressed(_:)), for: .touchUpInside)
        }


Setelah operasi global ini, kita hanya perlu memposisikan Label, di mana kita akan menulis hasilnya, dan menutup fungsinya:



    resultLabel.frame = CGRect(x: 20, y: clearButton.frame.origin.y - 110.0, width: view.frame.size.width - 40, height: 100)
    holder.addSubview(resultLabel)
} //    


Sekarang Anda dapat melanjutkan ke penangan:



Bekerja dengan penangan



Semua ini pada dasarnya hanyalah sebuah tata letak, sekarang kita harus menghirup logika ke dalam aplikasi. Untuk melakukan ini, kita akan menggunakan metode dari runtime Objective C untuk menyederhanakan kode kita. Jika Anda tidak mengerti apa yang sedang terjadi, saya dapat merekomendasikan artikel ini untuk Anda baca.



Jadi, inilah fungsi kami:



    @objc func clearResult() {
        resultLabel.text = "0" //    0
        currentOperations = nil //    
        firstNumber = 0 //      0
    }
    
    @objc func zeroTapped() {
        //    
        if resultLabel.text != "0" {
            if let text = resultLabel.text {
                resultLabel.text = "\(text)\(0)" //  
            }
        }
    }


Selanjutnya, kita perlu menambahkan fungsi handler ke tombol kita:



    @objc func numberPressed(_ sender: UIButton) {
        let tag = sender.tag - 1
        
        if resultLabel.text == "0" {
            resultLabel.text = "\(tag)"
        }
        else if let text = resultLabel.text {
        //   
            resultLabel.text = "\(text)\(tag)"
        }
    }



Selanjutnya adalah logika bisnis terpenting dari aplikasi kita. Kami akan menggunakan konstruksi sakelar untuk mengontrol operasi matematika kami:



 @objc func operationPressed(_ sender: UIButton) {
        let tag = sender.tag
        
        if let text = resultLabel.text, let value = Int(text), firstNumber == 0 {
            //   
            firstNumber = value
            resultLabel.text = "0"
        }
        
        if tag == 1 {
            if let operation = currentOperations {
                var secondNumber = 0
                if let text = resultLabel.text, let value = Int(text) {
                    secondNumber = value
                }
                
                switch operation {
                case .add:
                    
                    firstNumber = firstNumber + secondNumber
                    secondNumber = 0 //  
                    resultLabel.text = "\(firstNumber)" 
                    currentOperations = nil
                    firstNumber = 0 //     Label 
                    
                    break
                    
                case .subtract:
                    firstNumber = firstNumber - secondNumber
                    secondNumber = 0
                    resultLabel.text = "\(firstNumber)"
                    currentOperations = nil
                    firstNumber = 0
                    
                    break
                    
                case .multiply:
                    firstNumber = firstNumber * secondNumber
                    secondNumber = 0
                    resultLabel.text = "\(firstNumber)"
                    currentOperations = nil
                    firstNumber = 0
                    
                    break
                    
                case .divide:
                    firstNumber = firstNumber / secondNumber
                    secondNumber = 0
                    resultLabel.text = "\(firstNumber)"
                    currentOperations = nil
                    firstNumber = 0
                    break
                }
            }
        }
        else if tag == 2 {
            currentOperations = .add 
            //     .    ,    
        }
        else if tag == 3 {
            currentOperations = .subtract
        }
        else if tag == 4 {
            currentOperations = .multiply
        }
        else if tag == 5 {
            currentOperations = .divide
        }
    }
}



Itu saja! Kode sumber untuk aplikasi ini dapat ditemukan di tautan ini . Hasilnya, tampilannya menjadi seperti ini:







Secara tradisi, saya akan memberikan beberapa sumber berguna yang mungkin berguna untuk pengembang IOS pemula:








Awal yang cepat untuk pengembangan iOS. Webinar gratis







All Articles