Cara Membuat Kalkulator di Xcode Menggunakan Swift: 9 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:58

Dalam tutorial singkat ini, saya akan menunjukkan cara membuat kalkulator sederhana menggunakan Swift di Xcode. Aplikasi ini dibuat agar terlihat hampir identik dengan aplikasi kalkulator asli untuk iOS. Anda dapat mengikuti petunjuk langkah demi langkah dan membuat kalkulator dengan saya, atau Anda dapat melanjutkan ke langkah terakhir dan menyalin dan menempelkan kode ke pengontrol tampilan Anda. Namun, jika Anda melakukan ini, pastikan untuk menghubungkan semua elemen Anda di storyboard dengan pengontrol tampilan Anda.

Langkah 1: Membuat Proyek

Langkah pertama dalam membuat kalkulator kita adalah benar-benar membuat proyek di Xcode. Anda dapat melakukan ini dengan mengklik "Buat proyek Xcode baru" dan beri nama apa pun yang Anda inginkan. Saya menamai saya "Kalkulator." Langkah selanjutnya adalah memilih "Single View Application" untuk jenis aplikasi. Simpan semua info lainnya sebagai nilai default.

Langkah 2: Tata Letak Papan Cerita

Langkah 2 membuat kalkulator kami mengharuskan Anda mendesain tata letak dasar di storyboard. Sebelum Anda memulai ini, saya sarankan mengubah perangkat simulator Anda ke iPhone 7 Plus. Mulailah dengan menyeret tombol ke storyboard dan mengubah dimensinya menjadi 89 x 89. Ubah warna latar belakangnya menjadi merkuri pada inspektur atribut dan warna fontnya menjadi tungsten. Selanjutnya, sesuaikan font menjadi Helvetica Light 30. Terus salin dan tempel tombol hingga Anda memiliki total 20. Sesuaikan tata letak tombol-tombol ini sehingga Anda memiliki lima baris dan empat kolom.

Langkah 3: Desain dan Estetika Papan Cerita

Hapus tombol kedua di baris bawah dan perluas tombol pertama untuk mengambil alih ruang ini. Ubah nilai placeholder tombol ini menjadi nol. Lanjutkan untuk mengubah nilai angka dan simbol dari setiap tombol hingga hampir identik dengan gambar yang ditunjukkan di atas. Pada inspektur atribut, warna abu-abu yang lebih gelap adalah perak, warna oranye adalah tangerine, dan warna font diubah menjadi salju pada tombol oranye. Selanjutnya, klik pada pengontrol tampilan dan ubah warna latar belakangnya menjadi hitam. Tambahkan label di atas tombol dan sesuaikan ukurannya sesuai keinginan Anda. Sejajarkan teks ke kanan dan ubah font label menjadi Helvetica light 70. Jika mau, Anda dapat menambahkan batasan ke semua elemen agar aplikasi terlihat sama untuk semua perangkat.

Langkah 4: Menghubungkan dan Mengintegrasikan Elemen

Buka pemeriksa atribut dan ubah tag untuk setiap tombol angka. Tag harus 1 lebih dari nilai numerik yang sebenarnya. Misalnya, tombol #0 harus memiliki nilai tag 1, tombol #1 harus memiliki nilai tag 2, tombol #2 harus memiliki nilai tag 3, dan seterusnya. Selanjutnya, tekan kontrol, klik tombol #0, dan seret ke pengontrol tampilan. Sebuah popup akan muncul di layar. Ubah koneksi menjadi 'action,' type menjadi 'UIButton,' event menjadi 'Touch Up Inside,' argumen menjadi 'Sender,' dan namanya menjadi 'numbers.' Anda dapat mengubah nama menjadi apa pun yang Anda inginkan, tetapi itu berarti Anda harus mengubah nama lagi saat memanggil fungsi nanti dalam program. Selanjutnya, kontrol, klik, dan seret setiap tombol angka ke dalam fungsi yang baru saja kita buat. Sekarang, kontrol, klik, dan seret label ke dalam program, tetapi BUKAN ke dalam fungsi. Ini berarti Anda cukup memasukkan label ke dalam fungsi sebagai variabel terpisah. Ingat, jika Anda pernah bingung tentang kode, saya telah meninggalkan semua kode saya untuk Anda gunakan pada langkah terakhir dari Instructable ini.

Langkah 5: Menetapkan Variabel

Untuk membuat tombol angka kita berfungsi, kita harus menghubungkan nilainya ke label di fungsi 'angka' kita. Anda dapat melakukannya dengan terlebih dahulu membuat variabel 'numberOnScreen' dan membuatnya bertipe double dan sama dengan 0: var numberOnScreen: Double = 0; Dan jangan lupa, jika kode di sini sedikit tidak jelas, saya telah meninggalkan Anda kode lengkap pada langkah terakhir untuk Anda gunakan sesuai keinginan Anda. Selanjutnya, buat variabel lain 'performingMath' dengan tipe bool dan buat menjadi salah: var performingMath = false; Juga, buat variabel lain yang disebut 'previousNumber' bertipe double dan atur sama dengan 0: var beforeNumber: Double = 0; Variabel terakhir yang harus Anda buat adalah variabel 'operasi'. Atur sama dengan 0: var operation = 0;

Langkah 6: Fungsi Tombol Angka

Setelah Anda menetapkan variabel yang sesuai, Anda dapat melanjutkan untuk menyalin dan menempelkan kode ini ke fungsi 'angka' Anda:

jika performMath == benar {

label.text = String(pengirim.tag-1)

numberOnScreen = Ganda(label.text!)!

performMath = salah

}

lain {

label.teks = label.teks! + String(pengirim.tag-1)

numberOnScreen = Ganda(label.text!)!

}

Pada dasarnya, potongan kode ini menampilkan angka-angka tertentu pada label ketika tombol yang sesuai ditekan. Namun, kita masih harus dapat menggunakan semua tombol lain dan membuat kalkulator berfungsi. Kami akan melakukan ini dalam beberapa langkah berikutnya.

Langkah 7: Mengintegrasikan Tombol Operasi

Buka pemeriksa atribut dan ubah tag untuk semua tombol lain-lain. Tombol hapus harus memiliki tag 11, tombol pembagian harus memiliki tag 12, tombol perkalian harus memiliki tag 13, tombol pengurangan harus memiliki tag 14, tombol penambahan harus memiliki tag 15, dan tombol sama harus memiliki tag 16. Selanjutnya, tekan kontrol, klik tombol hapus, dan seret ke pengontrol tampilan. Sebuah popup akan muncul di layar. Ubah koneksi menjadi 'action,' jenis menjadi 'UIButton,' event menjadi 'Touch Up Inside,' argumen menjadi 'Sender,' dan namanya menjadi 'buttons.' Anda dapat mengubah nama menjadi apa pun yang Anda inginkan, tetapi itu berarti Anda harus mengubah nama lagi saat memanggil fungsi nanti dalam program. Selanjutnya, kontrol, klik, dan seret setiap tombol lain-lain ke dalam fungsi yang baru saja kita buat.

Langkah 8: Fungsi Tombol Lain-Lain

Setelah Anda menghubungkan semua tombol lain-lain yang ditandai ke fungsi yang sesuai, Anda dapat mulai memasukkan kode ke dalam fungsi 'tombol':

sebelumnyaNumber = Ganda(label.teks!)!

if sender.tag == 12 { //Membagi

label.teks = "/";

}

if sender.tag == 13 { //Multiply

label.teks = "x";

}

if sender.tag == 14 { //Kurangi

label.teks = "-";

}

if sender.tag == 15 { //Tambah

label.teks = "+";

}

operasi = pengirim.tag

performMath = benar;

}

lain jika pengirim.tag == 16 {

jika operasi == 12{ //Bagi

label.text = String(sebelumnyaNumber / numberOnScreen)

}

else if operasi == 13{ //Multiply

label.text = String(sebelumnyaNumber * numberOnScreen)

}

else if operasi == 14{ //Kurangi

label.text = String(nomor sebelumnya - nomorDiLayar)

}

else if operasi == 15{ //Add

label.text = String(sebelumnyaNumber + numberOnScreen)

}

}

lain jika pengirim.tag == 11{

label.teks = ""

sebelumnyaNumber = 0;

nomorPadaLayar = 0;

operasi = 0;

}

Pada dasarnya, potongan kode ini menampilkan salah satu tombol lain-lain ketika ditekan dan mulai menghitung jawaban akhir dan menampilkannya pada label.

Langkah 9: Kode Lengkap

Jika Anda tidak ingin melalui dan membangun kalkulator langkah demi langkah dengan saya, maka Anda cukup menambahkan elemen ke storyboard Anda dan menyalin dan menempelkan kode lengkap ke pengontrol tampilan Anda. Berikut kodenya:

impor UIKit

kelas ViewController: UIViewController {

var numberOnScreen: Ganda = 0;

var sebelumnyaNumber: Ganda = 0;

var performMath = salah;

operasi var = 0;

Nomor fungsi @IBAction(_ pengirim: UIButton) {

jika performMath == benar {

label.text = String(pengirim.tag-1)

numberOnScreen = Ganda(label.text!)!

performMath = salah

}

lain {

label.teks = label.teks! + String(pengirim.tag-1)

numberOnScreen = Ganda(label.text!)!

}

}

@IBOutlet label var lemah: UILabel!

@IBAction tombol fungsi(_ pengirim: UIButton) {

if label.text != "" && sender.tag != 11 && sender.tag != 16{

sebelumnyaNumber = Ganda(label.teks!)!

if sender.tag == 12 { //Membagi

label.teks = "/";

}

if sender.tag == 13 { //Multiply

label.teks = "x";

}

if sender.tag == 14 { //Kurangi

label.teks = "-";

}

if sender.tag == 15 { //Tambah

label.teks = "+";

}

operasi = pengirim.tag

performMath = benar;

}

lain jika pengirim.tag == 16 {

jika operasi == 12{ //Bagi

label.text = String(sebelumnyaNumber / numberOnScreen)

}

else if operasi == 13{ //Multiply

label.text = String(sebelumnyaNumber * numberOnScreen)

}

else if operasi == 14{ //Kurangi

label.text = String(nomor sebelumnya - nomorDiLayar)

}

else if operasi == 15{ //Add

label.text = String(sebelumnyaNumber + numberOnScreen)

}

}

lain jika pengirim.tag == 11{

label.teks = ""

nomor sebelumnya = 0;

nomorPadaLayar = 0;

operasi = 0;

}

}

menimpa fungsi viewDidLoad() {

super.viewDidLoad()

// Lakukan penyiapan tambahan setelah memuat tampilan, biasanya dari pena.

}

menimpa fungsi didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

// Buang semua sumber daya yang dapat dibuat ulang.

}

}