Cara Membuat Kalkulator dalam Xcode Menggunakan Swift: 9 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:12

Dalam tutorial ringkas ini, saya akan menunjukkan kepada anda cara membuat kalkulator mudah menggunakan Swift in Xcode. Aplikasi ini dibina untuk kelihatan hampir sama dengan aplikasi kalkulator asal untuk iOS. Anda boleh mengikuti arahan langkah demi langkah dan membina kalkulator dengan saya, atau anda boleh pergi ke langkah terakhir dan menyalin dan menampal kod tersebut ke pengawal paparan anda. Walau bagaimanapun, jika anda melakukan ini, pastikan untuk menghubungkan semua elemen anda di papan cerita dengan pengawal pandangan anda.

Langkah 1: Membuat Projek

Langkah pertama dalam membuat kalkulator kami adalah membuat projek dalam Xcode. Anda boleh melakukannya dengan mengklik "Buat projek Xcode baru" dan menamakannya mengikut kehendak anda. Saya menamakan milik saya "Kalkulator." Langkah seterusnya adalah memilih "Aplikasi Lihat Tunggal" untuk jenis aplikasi. Simpan semua maklumat lain sebagai nilai lalai.

Langkah 2: Susunatur Papan Cerita

Langkah 2 untuk membuat kalkulator kami menghendaki anda merancang susun atur asas di papan cerita. Sebelum anda memulakannya, saya cadangkan menukar peranti simulator anda ke iPhone 7 Plus. Mulakan dengan menyeret butang ke papan cerita dan mengubah dimensinya menjadi 89 x 89. Tukar warna latar belakangnya menjadi merkuri pada pemeriksa atribut dan warna fonnya ke tungsten. Seterusnya, sesuaikan fon ke Helvetica Light 30. Terus salin dan tampal butang sehingga anda mempunyai jumlah 20. Laraskan susun atur butang ini sehingga anda mempunyai lima baris dan empat lajur.

Langkah 3: Reka Bentuk dan Estetika Papan Cerita

Padamkan butang kedua di baris bawah dan kembangkan butang pertama untuk mengambil alih ruang ini. Tukar nilai tempat letak butang ini menjadi sifar. Terus menukar nilai nombor dan simbol setiap butang sehingga hampir sama dengan gambar yang ditunjukkan di atas. Pada pemeriksa atribut, warna abu-abu gelap berwarna perak, warna oren adalah tangerin, dan warna fon diubah menjadi salji pada butang oren. Seterusnya, klik pada pengawal pandangan dan ubah warna latar belakangnya menjadi hitam. Tambahkan label di atas butang dan sesuaikan ukurannya sehingga anda merasa selesa. Sejajarkan teks ke kanan dan ubah fon label ke Helvetica light 70. Sekiranya anda mahu, anda boleh menambahkan kekangan pada semua elemen agar aplikasi kelihatan sama untuk semua peranti.

Langkah 4: Menghubungkan dan Mengintegrasikan Elemen

Buka pemeriksa atribut dan ubah tag untuk setiap butang nombor. Teg mestilah 1 lebih banyak daripada nilai berangka sebenar. Sebagai contoh, butang # 0 harus mempunyai nilai tag 1, butang # 1 harus mempunyai nilai tag 2, butang # 2 harus mempunyai nilai tag 3, dan seterusnya. Seterusnya, tekan kawalan, klik pada butang # 0, dan seret ke pengawal pandangan. Munculan akan muncul di skrin. Ubah sambungan ke 'tindakan', jenisnya menjadi 'UIButton', acara menjadi 'Touch Up Inside', argumen menjadi 'Pengirim', dan namanya menjadi 'angka'. Anda boleh menukar nama menjadi apa sahaja yang anda mahukan tetapi itu bermakna anda perlu menukar nama itu lagi ketika memanggil fungsi di kemudian hari dalam program. Seterusnya, kawalan, klik, dan seret setiap butang nombor ke fungsi yang baru kita buat. Sekarang, kawalan, klik, dan seret label ke dalam program, tetapi TIDAK ke dalam fungsi. Ini bermakna anda hanya memasukkan label ke dalam fungsi sebagai pemboleh ubah yang berasingan. Ingat, jika anda keliru dengan kod tersebut, saya telah meninggalkan semua kod saya untuk anda gunakan pada langkah terakhir dari Instructable ini.

Langkah 5: Menetapkan Pemboleh ubah

Untuk menjadikan butang nombor kita berfungsi, kita harus menghubungkan nilainya ke label dalam fungsi 'nombor' kita. Anda boleh melakukan ini dengan membuat pemboleh ubah 'numberOnScreen' terlebih dahulu dan menjadikannya jenis dua dan sama dengan 0: var numberOnScreen: Double = 0; Dan jangan lupa, jika kod di sini agak tidak jelas, saya telah meninggalkan kod penuh pada langkah terakhir untuk anda gunakan mengikut keinginan anda. Seterusnya, buat satu lagi pemboleh ubah 'PerformMath' jenis bool dan buat ia salah: var PerformMath = false; Juga, buat pemboleh ubah lain yang disebut 'sebelumnyaNumber' jenis double dan tetapkan sama dengan 0: var sebelumnyaNumber: Double = 0; Pemboleh ubah terakhir yang harus anda buat adalah pemboleh ubah 'operasi'. Tetapkan sama dengan 0: operasi var = 0;

Langkah 6: Fungsi Butang Nombor

Setelah menetapkan pemboleh ubah yang sesuai, anda kemudian boleh menyalin dan menampal kod ini ke fungsi 'nombor' anda:

jika melakukanMath == benar {

label.text = Rentetan (sender.tag-1)

numberOnScreen = Double (label.text!)!

performMath = salah

}

lain {

label.text = label.text! + Rentetan (sender.tag-1)

numberOnScreen = Double (label.text!)!

}

Pada dasarnya, sekeping kod ini memaparkan nombor tertentu pada label apabila butang yang sesuai ditekan. Walau bagaimanapun, kita masih perlu menggunakan semua butang lain dan menjadikan kalkulator berfungsi. Kami akan melakukan ini dalam beberapa langkah seterusnya.

Langkah 7: Mengintegrasikan Butang Operasi

Buka pemeriksa atribut dan ubah tag untuk semua butang lain-lain. Butang jelas harus mempunyai tanda 11, butang pembelahan harus mempunyai tanda 12, butang pendaraban harus mempunyai tag 13, butang pengurangan harus mempunyai tag 14, butang penambahan harus mempunyai tag 15, dan butang yang sama harus mempunyai tanda 16. Seterusnya, tekan kawalan, klik pada butang kosongkan, dan seret ke pengawal pandangan. Munculan akan muncul di skrin. Ubah sambungan ke 'tindakan', jenisnya menjadi 'UIButton', acara menjadi 'Touch Up Inside', argumen menjadi 'Pengirim', dan namanya menjadi 'butang.' Anda boleh menukar nama menjadi apa sahaja yang anda mahukan tetapi itu bermakna anda perlu menukar nama itu lagi ketika memanggil fungsi di kemudian hari dalam program. Seterusnya, kawalan, klik, dan seret setiap butang lain ke fungsi yang baru kita buat.

Langkah 8: Fungsi Butang Pelbagai

Setelah anda menyambungkan semua butang lain yang ditandai ke fungsi yang sesuai, anda boleh mula memasukkan kod ke dalam fungsi 'butang':

sebelumnyaNumber = Double (label.text!)!

jika sender.tag == 12 {// Bahagikan

label.text = "/";

}

jika sender.tag == 13 {// Gandakan

label.text = "x";

}

jika sender.tag == 14 {// Kurangkan

label.text = "-";

}

jika sender.tag == 15 {// Tambah

label.text = "+";

}

operasi = sender.tag

performMath = benar;

}

lain jika sender.tag == 16 {

jika operasi == 12 {// Bahagikan

label.text = String (sebelumnyaNumber / numberOnScreen)

}

lain jika operasi == 13 {// Gandakan

label.text = String (nombor sebelumnya * numberOnScreen)

}

lain jika operasi == 14 {// Kurangkan

label.text = String (nombor sebelumnya - numberOnScreen)

}

lain jika operasi == 15 {// Tambah

label.text = String (sebelumnyaNombor + nomborOnScreen)

}

}

lain jika sender.tag == 11 {

label.text = ""

nombor sebelumnya = 0;

numberOnScreen = 0;

operasi = 0;

}

Pada dasarnya, sekeping kod ini memaparkan salah satu butang lain apabila ditekan dan meneruskan untuk mengira jawapan terakhir dan memaparkannya pada label.

Langkah 9: Kod Penuh

Sekiranya anda tidak mahu melalui dan membina kalkulator langkah demi langkah dengan saya, maka anda boleh menambahkan elemen ke papan cerita anda dan menyalin dan menampal kod penuh ke dalam pengawal paparan anda. Inilah kodnya:

mengimport UIKit

kelas ViewController: UIViewController {

var numberOnScreen: Double = 0;

var sebelumnyaNumber: Double = 0;

var PerformMath = salah;

operasi var = 0;

Nombor func @IBAction (_ pengirim: UIButton) {

jika melakukanMath == benar {

label.text = Rentetan (sender.tag-1)

numberOnScreen = Double (label.text!)!

performMath = salah

}

lain {

label.text = label.text! + Rentetan (sender.tag-1)

numberOnScreen = Double (label.text!)!

}

}

@IBOutlet label var lemah: UILabel!

Butang @IBAction func (_ pengirim: UIButton) {

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

sebelumnyaNumber = Double (label.text!)!

jika sender.tag == 12 {// Bahagikan

label.text = "/";

}

jika sender.tag == 13 {// Gandakan

label.text = "x";

}

jika sender.tag == 14 {// Kurangkan

label.text = "-";

}

jika sender.tag == 15 {// Tambah

label.text = "+";

}

operasi = sender.tag

performMath = benar;

}

lain jika sender.tag == 16 {

jika operasi == 12 {// Bahagikan

label.text = String (sebelumnyaNumber / numberOnScreen)

}

lain jika operasi == 13 {// Gandakan

label.text = String (nombor sebelumnya * numberOnScreen)

}

lain jika operasi == 14 {// Kurangkan

label.text = String (nombor sebelumnya - numberOnScreen)

}

lain jika operasi == 15 {// Tambah

label.text = String (sebelumnyaNombor + nomborOnScreen)

}

}

lain jika sender.tag == 11 {

label.text = ""

nombor sebelumnya = 0;

numberOnScreen = 0;

operasi = 0;

}

}

ganti pandangan funcDidLoad () {

super.viewDidLoad ()

// Lakukan persediaan tambahan setelah memuatkan paparan, biasanya dari sudut.

}

ganti func didReceiveMemoryWarning () {

super.didReceiveMemoryWarning ()

// Buang sumber yang boleh dibuat semula.

}

}