Xamarin.Forms Tutorial Gambar

Artikel
Developer (Pemula)
10 menit untuk menyelesaikan

Sebelum mencoba tutorial ini, Anda seharusnya berhasil menyelesaikan:

Buat mulai cepat aplikasi pertama Xamarin.Forms Anda.
Tutorial StackLayout .

Dalam tutorial ini, Anda akan mempelajari cara:

Buat Xamarin.FormsImage di XAML.
Sesuaikan Image tampilan.
Menampilkan file gambar lokal dari setiap proyek platform.

Anda akan menggunakan Visual Studio 2019, atau Visual Studio untuk Mac, untuk membuat aplikasi sederhana yang menunjukkan cara menampilkan gambar dan menyesuaikan tampilannya. Cuplikan layar berikut menunjukkan aplikasi akhir:

Anda juga akan menggunakan XAML Hot Reload untuk Xamarin.Forms melihat perubahan UI tanpa membangun kembali aplikasi Anda.

Membuat gambar

Tersisa 9 menit

Visual Studio
Visual Studio untuk Mac

Untuk menyelesaikan tutorial ini, Anda harus memiliki Visual Studio 2019 (rilis terbaru), dengan pengembangan Seluler dengan beban kerja .NET terinstal. Selain itu, Anda akan memerlukan Mac berpasangan untuk membangun aplikasi tutorial di iOS. Untuk informasi tentang menginstal platform Xamarin, lihat Menginstal Xamarin. Untuk informasi tentang menyambungkan Visual Studio 2019 ke host build Mac, lihat Memasangkan ke Mac untuk pengembangan Xamarin.iOS.

Luncurkan Visual Studio, dan buat aplikasi kosong Xamarin.Forms baru bernama ImageTutorial.

Penting

Cuplikan C# dan XAML dalam tutorial ini mengharuskan solusinya diberi nama ImageTutorial. Menggunakan nama yang berbeda akan mengakibatkan kesalahan build saat Anda menyalin kode dari tutorial ini ke dalam solusi.

Untuk informasi selengkapnya tentang pustaka .NET Standard yang dibuat, lihat Anatomi aplikasiXamarin.Forms di Xamarin.Forms Mulai Cepat Deep Dive.
Di Penjelajah Solusi, dalam proyek ImageTutorial, klik dua kali MainPage.xaml untuk membukanya. Kemudian, di MainPage.xaml, hapus semua kode templat dan ganti dengan kode berikut:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ImageTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               HeightRequest="300" />
    </StackLayout>
</ContentPage>
```
Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Image dalam StackLayout. Properti Image.Source menentukan gambar yang akan ditampilkan, melalui URI. Properti Image.Source berjenis ImageSource, yang memungkinkan gambar bersumber dari file, URI, atau sumber daya. Untuk informasi selengkapnya, lihat Menampilkan gambar di Gambar dalam Xamarin.Forms panduan.

Properti HeightRequest menentukan tinggi Image dalam unit perangkat independen.

Catatan

Tidak perlu mengatur WidthRequest properti dalam contoh ini. Ini karena, secara default, Image mempertahankan rasio aspek gambar.
Di toolbar Visual Studio, tekan tombol Mulai (tombol segitiga yang mirip tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS jarak jauh yang Anda pilih atau emulator Android:

Catatan

Tampilan Image secara otomatis menyimpan gambar yang diunduh selama 24 jam. Untuk informasi selengkapnya, lihat Penembolokan gambar yang diunduh di Gambar dalam Xamarin.Forms panduan.

Untuk menyelesaikan tutorial ini, Anda harus menginstal Visual Studio untuk Mac (rilis terbaru), dengan dukungan platform iOS dan Android. Selain itu, Anda juga akan memerlukan Xcode (rilis terbaru). Untuk informasi selengkapnya tentang menginstal platform Xamarin, lihat Menginstal Xamarin.

Luncurkan Visual Studio untuk Mac, dan buat aplikasi kosong Xamarin.Forms baru bernama ImageTutorial.

Penting

Cuplikan C# dan XAML dalam tutorial ini mengharuskan solusinya diberi nama ImageTutorial. Menggunakan nama yang berbeda akan mengakibatkan kesalahan build saat Anda menyalin kode dari tutorial ini ke dalam solusi.

Untuk informasi selengkapnya tentang pustaka .NET Standard yang dibuat, lihat Anatomi aplikasiXamarin.Forms di Xamarin.Forms Mulai Cepat Deep Dive.
Di Solution Pad, dalam proyek ImageTutorial , klik dua kali MainPage.xaml untuk membukanya. Kemudian, di MainPage.xaml, hapus semua kode templat dan ganti dengan kode berikut:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ImageTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               HeightRequest="300" />
    </StackLayout>
</ContentPage>
```
Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Image dalam StackLayout. Properti Image.Source menentukan gambar yang akan ditampilkan, melalui URI. Properti Image.Source berjenis ImageSource, yang memungkinkan gambar bersumber dari file, URI, atau sumber daya. Untuk informasi selengkapnya, lihat Menampilkan gambar di Gambar dalam Xamarin.Forms panduan.

Properti HeightRequest menentukan tinggi Image dalam unit perangkat independen.

Catatan

Tidak perlu mengatur WidthRequest properti dalam contoh ini. Ini karena, secara default, Image mempertahankan rasio aspek gambar.
Di toolbar Visual Studio untuk Mac, tekan tombol Mulai (tombol segitiga yang menyerubungi tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS yang Anda pilih atau emulator Android:

Catatan

Tampilan Image secara otomatis menyimpan gambar yang diunduh selama 24 jam. Untuk informasi selengkapnya, lihat Penembolokan gambar yang diunduh di Gambar dalam Xamarin.Forms panduan.

Menyesuaikan tampilan

Tersisa 6 menit

Visual Studio
Visual Studio untuk Mac

Di MainPage.xaml, ubah Image deklarasi untuk menyesuaikan tampilannya:
```
<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
       Aspect="Fill"
       HeightRequest="{OnPlatform iOS=300, Android=250}"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Kode ini mengatur Aspect properti , yang menentukan mode penskalaan gambar, ke Fill. Anggota Fill didefinisikan dalam Aspect enumerasi, dan membentangkan gambar untuk sepenuhnya mengisi tampilan, terlepas dari apakah gambar terdistorsi. Untuk informasi selengkapnya tentang penskalaan gambar, lihat Menampilkan gambar di panduan Gambar.Xamarin.Forms

Ekstensi OnPlatform markup memungkinkan Anda menyesuaikan tampilan UI berdasarkan per platform. Dalam contoh ini, ekstensi markup digunakan untuk mengatur HeightRequest properti dan WidthRequest ke 300 unit independen perangkat di iOS dan ke 250 unit independen perangkat di Android. Untuk informasi selengkapnya tentang OnPlatform ekstensi markup, lihat Ekstensi markup OnPlatform di panduan Menggunakan Ekstensi Markup XAML.

Selain itu, HorizontalOptions properti menentukan bahwa gambar akan dipusatkan secara horizontal.
Jika aplikasi masih berjalan, simpan perubahan pada file dan antarmuka pengguna aplikasi akan diperbarui secara otomatis di simulator atau emulator Anda. Jika tidak, di toolbar Visual Studio, tekan tombol Mulai (tombol segitiga yang menyerupan tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS jarak jauh yang Anda pilih atau emulator Android:

Di Visual Studio, hentikan aplikasi.

Di MainPage.xaml, ubah Image deklarasi untuk menyesuaikan tampilannya:
```
<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
       Aspect="Fill"
       HeightRequest="{OnPlatform iOS=300, Android=250}"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Kode ini mengatur Aspect properti , yang menentukan mode penskalaan gambar, ke Fill. Anggota Fill didefinisikan dalam Aspect enumerasi, dan membentangkan gambar untuk sepenuhnya mengisi tampilan, terlepas dari apakah gambar terdistorsi. Untuk informasi selengkapnya tentang penskalaan gambar, lihat Menampilkan gambar di panduan Gambar.Xamarin.Forms

Ekstensi OnPlatform markup memungkinkan Anda menyesuaikan tampilan UI berdasarkan per platform. Dalam contoh ini, ekstensi markup digunakan untuk mengatur HeightRequest properti dan WidthRequest ke 300 di iOS dan ke 250 di Android. Untuk informasi selengkapnya tentang OnPlatform ekstensi markup, lihat Ekstensi markup OnPlatform di panduan Menggunakan Ekstensi Markup XAML.

Selain itu, HorizontalOptions properti menentukan bahwa gambar akan dipusatkan secara horizontal.
Jika aplikasi masih berjalan, simpan perubahan pada file dan antarmuka pengguna aplikasi akan diperbarui secara otomatis di simulator atau emulator Anda. Jika tidak, di toolbar Visual Studio untuk Mac, tekan tombol Mulai (tombol segitiga yang menyerupan tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS yang Anda pilih atau emulator Android:

Di Visual Studio untuk Mac, hentikan aplikasi.

Menampilkan gambar lokal

Tersisa 4 menit

File gambar dapat ditambahkan ke proyek platform dan dirujuk dari Xamarin.Forms kode bersama. Metode mendistribusikan gambar ini diperlukan ketika gambar khusus platform, seperti saat menggunakan resolusi yang berbeda pada platform yang berbeda, atau desain yang sedikit berbeda.

Dalam latihan ini, Anda akan memodifikasi solusi ImageTutorial untuk menampilkan gambar lokal, bukan gambar yang diunduh dari URI. Gambar lokal adalah logo Xamarin, yang harus diunduh dengan mengklik tombol di bawah ini.

Unduh XamarinLogo.png

Penting

Untuk menggunakan satu gambar di semua platform, nama file yang sama harus digunakan pada setiap platform, dan harus menjadi nama sumber daya Android yang valid (yaitu hanya huruf kecil, angka, garis bawah, dan periode yang diizinkan).

Visual Studio
Visual Studio untuk Mac

Di Penjelajah Solusi, dalam proyek ImageTutorial.iOS, perluas Katalog Aset, dan klik dua kali Aset untuk membukanya. Kemudian, di tab Aset.xcassets , klik tombol Plus dan pilih Tambahkan Set Gambar:
Di tab Assets.xcassets , pilih set gambar baru dan editor akan ditampilkan:
Seret XamarinLogo.png dari sistem file Anda ke kotak 1x untuk kategori Universal :
Di tab Assets.xcassets , klik kanan nama kumpulan gambar baru dan ganti namanya menjadi XamarinLogo:

Simpan dan tutup dan tab Aset.xcassets .
Di Penjelajah Solusi, di proyek ImageTutorial.Android, perluas folder Sumber Daya. Kemudian, seret XamarinLogo.png dari sistem file Anda ke folder yang dapat digambar:

Catatan

Visual Studio akan secara otomatis mengatur tindakan build untuk gambar ke AndroidResource.
Dalam proyek ImageTutorial, di MainPage.xaml, ubah Image deklarasi untuk menampilkan file XamarinLogo lokal:
```
<Image Source="XamarinLogo"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Kode ini mengatur Source properti ke file lokal untuk ditampilkan. Properti WidthRequest diatur ke 300 unit independen perangkat di iOS, dan 250 unit perangkat independen di Android. Selain itu, HorizontalOptions properti menentukan bahwa gambar akan dipusatkan secara horizontal.

Catatan

Untuk gambar PNG di iOS, ekstensi .png dapat dihilangkan dari nama file yang ditentukan dalam Source properti . Untuk format gambar lainnya, ekstensi diperlukan.
Di toolbar Visual Studio, tekan tombol Mulai (tombol segitiga yang mirip tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS yang Anda pilih atau emulator Android:

Di Visual Studio, hentikan aplikasi.

Untuk informasi selengkapnya tentang gambar lokal, lihat Gambar lokal di gambar dalam Xamarin.Forms panduan.

Di Solution Pad, di proyek ImageTutorial.iOS , klik dua kali Aset.xcassets untuk membukanya. Kemudian, di Daftar Aset, klik kanan dan pilih Set Gambar Baru:
Di Daftar Aset, pilih set gambar baru dan editor akan ditampilkan:
Seret XamarinLogo.png dari sistem file Anda ke kotak 1x untuk kategori Universal :
Di Daftar Aset, klik dua kali nama kumpulan gambar baru dan ganti namanya menjadi XamarinLogo:
Di Solution Pad, di proyek ImageTutorial.Android , perluas folder Sumber Daya . Kemudian, seret XamarinLogo.png dari sistem file Anda ke folder yang dapat digambar.
Dalam dialog Tambahkan File ke Folder, pilih OK.

Catatan

Visual Studio untuk Mac akan secara otomatis mengatur tindakan build untuk gambar ke AndroidResource.
Dalam proyek ImageTutorial, di MainPage.xaml, ubah Image deklarasi untuk menampilkan file XamarinLogo lokal:
```
<Image Source="XamarinLogo"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Kode ini mengatur Source properti ke file lokal untuk ditampilkan. Properti WidthRequest diatur ke 300 unit independen perangkat di iOS, dan 250 unit perangkat independen di Android. Selain itu, HorizontalOptions properti menentukan bahwa gambar akan dipusatkan secara horizontal.

Catatan

Untuk gambar PNG di iOS, ekstensi .png dapat dihilangkan dari nama file yang ditentukan dalam Source properti . Untuk format gambar lainnya, ekstensi diperlukan.
Di toolbar Visual Studio untuk Mac, tekan tombol Mulai (tombol segitiga yang menyerubungi tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS yang Anda pilih atau emulator Android:

Di Visual Studio untuk Mac, hentikan aplikasi.

Untuk informasi selengkapnya tentang gambar lokal, lihat Gambar lokal di gambar dalam Xamarin.Forms panduan.

Xamarin.Forms Tutorial Gambar

Membuat gambar

Menyesuaikan tampilan

Menampilkan gambar lokal

Selamat!

Langkah berikutnya

Xamarin.Forms Tutorial Gambar

Membuat gambar

Menyesuaikan tampilan

Menampilkan gambar lokal

Selamat!

Langkah berikutnya

Tautan terkait