SwiftUI Academy · Pelajaran

Memuat Gambar dari Aset

Tambahkan aset gambar dan tampilkan menggunakan Image.

Pelajaran 3 dari 413 langkah

Memuat Gambar dari Aset adalah pelajaran SwiftUI Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar SwiftUI Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Gambar Menghidupkan Aplikasi

Teks hanyalah separuh cerita. Pelajaran ini menunjukkan cara menambahkan file gambar ke proyek dan menampilkannya di layar. 🖼️

Katalog Aset

Gambar disimpan di Assets, yaitu katalog aset dalam proyek Anda. Seret gambar ke sana dan Xcode akan memberinya nama yang dapat Anda gunakan dalam kode.

Menampilkan Gambar Aset

Gunakan Image bersama nama aset untuk menampilkannya. Nama tersebut adalah nama yang ditampilkan di katalog aset, bukan jalur file.

Image("logo")

Gambar Menggunakan Ukuran Aslinya

Secara bawaan, sebuah Image ditampilkan dalam ukuran piksel penuh, yang dapat melampaui layar. Biasanya Anda perlu mengubah ukurannya.

Image("hero")

Membuat Gambar Dapat Diubah Ukurannya

Tambahkan pengubah resizable terlebih dahulu agar gambar dapat direntangkan untuk mengisi ruang yang Anda berikan.

Image("hero")
    .resizable()

Mempertahankan Rasio Aspek

Padukan resizable dengan scaledToFit agar gambar menyesuaikan ukuran tanpa distorsi, dan menyisakan ruang kosong jika diperlukan.

Image("hero")
    .resizable()
    .scaledToFit()

Mengisi Ruang

Gunakan scaledToFill saat Anda ingin gambar memenuhi seluruh frame. Potong bagian yang melampaui batas dengan clip agar tepinya tetap rapi.

Image("hero")
    .resizable()
    .scaledToFill()

Mengatur Ukuran dengan frame

Gabungkan resizable dengan frame untuk menetapkan dimensi yang tepat. Ini adalah pola umum untuk avatar dan gambar mini.

Image("avatar")
    .resizable()
    .frame(width: 80, height: 80)

Memotong Mengikuti Bentuk

Selesaikan dengan clipShape untuk mengubah gambar menjadi lingkaran atau persegi panjang bersudut bulat agar tampilannya lebih halus.

Image("avatar")
    .resizable()
    .frame(width: 80, height: 80)
    .clipShape(Circle())

Dekoratif vs Bermakna

Tandai gambar yang sepenuhnya dekoratif agar VoiceOver melewatinya, dan beri label pada gambar bermakna agar dapat dideskripsikan kepada semua orang.

Image(decorative: "swirl")

Memuat Gambar Jarak Jauh

Untuk gambar dari web, AsyncImage mengunduh dan menampilkannya, dengan tampilan pengganti selama proses pemuatan. Gunakan aset untuk karya yang disertakan dalam aplikasi.

AsyncImage(url: photoURL)

Pemeriksaan Singkat

Apa yang harus ditambahkan sebelum Image dapat diubah ukurannya?

Jawab di pelajaran interaktif

Ringkasan Pelajaran

Anda memuat aset dengan Image, lalu menyesuaikan ukurannya menggunakan resizable, scaledToFit, frame, dan clipShape. Kini karya visual Anda berperilaku sesuai harapan. 🎉

Gratis untuk memulai

Belajar Swift dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 30
Pelajaran: 120

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memuat Gambar dari Aset” gratis?

Ya — teks lengkap “Memuat Gambar dari Aset” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus SwiftUI Academy, upgrade ke CoddyKit PRO. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Memuat Gambar dari Aset”?

Tambahkan aset gambar dan tampilkan menggunakan Image. Kamu berlatih SwiftUI Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai SwiftUI Academy?

Tidak diperlukan pengalaman sebelumnya. SwiftUI Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Memuat Gambar dari Aset” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran SwiftUI Academy ini?

Ya. Setiap pelajaran SwiftUI Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke SwiftUI Academy