Bagikan melalui

Ringkasan Bab 13. Bitmap

  • Artikel

Catatan

Buku ini diterbitkan pada musim semi 2016, dan belum diperbarui sejak saat itu. Ada banyak dalam buku yang tetap berharga, tetapi beberapa materi sudah kedaluarsa, dan beberapa topik tidak lagi sepenuhnya benar atau lengkap.

Elemen Xamarin.FormsImage menampilkan bitmap. Xamarin.Forms Semua platform mendukung format file JPEG, PNG, GIF, dan BMP.

Bitmap berasal Xamarin.Forms dari empat tempat:

  • Melalui web seperti yang ditentukan oleh URL
  • Disematkan sebagai sumber daya di pustaka bersama
  • Disematkan sebagai sumber daya dalam proyek aplikasi platform
  • Dari mana saja yang dapat dirujuk oleh objek .NET Stream , termasuk MemoryStream

Sumber daya bitmap di pustaka bersama bersifat independen platform, sementara sumber daya bitmap dalam proyek platform khusus platform.

Catatan

Teks buku membuat referensi ke Pustaka Kelas Portabel, yang telah digantikan oleh pustaka .NET Standard. Semua kode sampel dari buku telah dikonversi untuk menggunakan pustaka standar .NET.

Bitmap ditentukan dengan mengatur Source properti ke Image objek jenis ImageSource, kelas abstrak dengan tiga turunan:

  • UriImageSourceuntuk mengakses bitmap melalui web berdasarkan objek yang Uri diatur ke propertinya Uri
  • FileImageSourceuntuk mengakses bitmap yang disimpan dalam proyek aplikasi platform berdasarkan folder dan jalur file yang diatur ke propertinya File
  • StreamImageSourceuntuk memuat bitmap menggunakan objek .NET Stream yang ditentukan dengan mengembalikan dari set StreamFunc ke propertinya Stream

Atau (dan lebih umum) Anda dapat menggunakan metode ImageSource statis kelas berikut, yang semuanya mengembalikan ImageSource objek:

Tidak ada kelas yang Image.FromResource setara dengan metode. Kelas UriImageSource ini berguna jika Anda perlu mengontrol penembolokan. Kelas FileImageSource ini berguna dalam XAML. StreamImageSource berguna untuk pemuatan Stream objek asinkron, sedangkan ImageSource.FromStream sinkron.

Bitmap independen platform

Proyek WebBitmapCode memuat bitmap melalui web menggunakan ImageSource.FromUri. Elemen Image diatur ke Content properti ContentPage, sehingga dibatasi ke ukuran halaman. Terlepas dari ukuran bitmap, elemen yang dibatasi Image direntangkan ke ukuran kontainernya, dan bitmap ditampilkan dalam ukuran Image maksimum dalam elemen sambil mempertahankan rasio aspek bitmap. Area di Image luar bitmap dapat diwarnai dengan BackgroundColor.

Sampel WebBitmapXaml serupa tetapi hanya mengatur Source properti ke URL. Konversi ditangani oleh ImageSourceConverter kelas .

Paskan dan isi

Anda dapat mengontrol bagaimana bitmap direntangkan dengan mengatur Aspect properti Image ke salah satu anggota Aspect enumerasi berikut:

  • AspectFit: menghormati rasio aspek (default)
  • Fill: area pengisian, tidak menghormati rasio aspek
  • AspectFill: mengisi area tetapi menghormati rasio aspek, dicapai dengan memangkas bagian dari bitmap

Sumber daya yang disematkan

Anda dapat menambahkan file bitmap ke PCL, atau ke folder di PCL. Berikan Build Action of EmbeddedResource. Sampel ResourceBitmapCode menunjukkan cara menggunakan ImageSource.FromResource untuk memuat file. Nama sumber daya yang diteruskan ke metode terdiri dari nama rakitan, diikuti dengan titik, diikuti dengan nama folder opsional dan titik, diikuti dengan nama file.

Program ini mengatur VerticalOptions properti dan HorizontalOptions dari Image ke LayoutOptions.Center, yang membuat Image elemen tidak dibatasi. bitmap Image dan berukuran sama:

  • Di iOS dan Android, Image adalah ukuran piksel bitmap. Ada pemetaan satu-ke-satu antara piksel bitmap dan piksel layar.
  • Pada Platform Windows Universal, Image adalah ukuran piksel bitmap dalam unit independen perangkat. Di sebagian besar perangkat, setiap piksel bitmap menempati beberapa piksel layar.

Sampel StackedBitmap menempatkan Image dalam vertikal StackLayout di XAML. Ekstensi markup bernama ImageResourceExtension membantu mereferensikan sumber daya yang disematkan di XAML. Kelas ini hanya memuat sumber daya dari rakitan tempatnya berada, sehingga tidak dapat ditempatkan di pustaka.

Selengkapnya tentang ukuran

Sering kali diinginkan untuk mengukur bitmap secara konsisten di antara semua platform. Bereksperimen dengan StackedBitmap, Anda dapat mengatur WidthRequest pada Image elemen dalam vertikal StackLayout untuk membuat ukuran konsisten di antara platform, tetapi Anda hanya dapat mengurangi ukuran menggunakan teknik ini.

Anda juga dapat mengatur HeightRequest untuk membuat ukuran gambar konsisten pada platform, tetapi lebar bitmap yang dibatasi akan membatasi fleksibilitas teknik ini. Untuk gambar dalam vertikal StackLayout, HeightRequest harus dihindari.

Pendekatan terbaik adalah memulai dengan bitmap yang lebih lebar dari lebar telepon di unit independen perangkat dan diatur WidthRequest ke lebar yang diinginkan dalam unit independen perangkat. Ini ditunjukkan dalam sampel DeviceIndBitmapSize.

MadTeaParty menampilkan Bab 7 dari Lewis Carroll's Alice's Adventures in Wonderland dengan ilustrasi asli oleh John Tenniel:

Cuplikan layar tiga kali pesta teh gila

Menjelajah dan menunggu

Sampel ImageBrowser memungkinkan pengguna menelusuri gambar stok yang disimpan di situs web Xamarin. Ini menggunakan kelas .NET WebRequest untuk mengunduh file JSON dengan daftar bitmap.

Catatan

Xamarin.Forms program harus menggunakan HttpClient daripada WebRequest mengakses file melalui internet.

Program ini menggunakan ActivityIndicator untuk menunjukkan bahwa ada sesuatu yang terjadi. Karena setiap bitmap dimuat, properti baca-saja IsLoading adalah Imagetrue. Properti IsLoading didukung oleh properti yang dapat diikat, sehingga PropertyChanged peristiwa diaktifkan saat properti tersebut berubah. Program melampirkan handler ke kejadian ini, dan menggunakan pengaturan IsLoaded saat ini untuk mengatur IsRunning properti dari ActivityIndicator.

Bitmap streaming

Metode ini ImageSource.FromStream membuat ImageSource berdasarkan .NET Stream. Metode harus diteruskan objek Func yang mengembalikan Stream objek.

Mengakses aliran

Sampel Bitmap Aliran menunjukkan cara menggunakan ImaageSource.FromStream metode untuk memuat bitmap yang disimpan sebagai sumber daya yang disematkan, dan untuk memuat bitmap di seluruh web.

Menghasilkan bitmap pada waktu proses

Xamarin.Forms Semua platform mendukung format file BMP yang tidak dikompresi, yang mudah dibuat dalam kode dan kemudian disimpan dalam MemoryStream. Teknik ini memungkinkan pembuatan bitmap secara algoritma pada runtime, seperti yang diimplementasikan di BmpMaker kelas di pustaka Xamrin.FormsBook.Toolkit .

Sampel "Do It Yourself" DiyGradientBitmap menunjukkan penggunaan BmpMaker untuk membuat bitmap dengan gambar gradien.

Bitmap khusus platform

Xamarin.Forms Semua platform memungkinkan penyimpanan bitmap di rakitan aplikasi platform. Ketika diambil oleh aplikasi Xamarin.Forms , bitmap platform ini berjenis FileImageSource. Anda menggunakannya untuk:

Rakitan platform sudah berisi bitmap untuk ikon dan layar splash:

  • Dalam proyek iOS, di folder Sumber Daya
  • Dalam proyek Android, di subfolder folder Sumber Daya
  • Dalam proyek Windows, di folder Aset (meskipun platform Windows tidak membatasi bitmap ke folder tersebut)

Sampel PlatformBitmaps menggunakan kode untuk menampilkan ikon dari proyek aplikasi platform.

Resolusi bitmap

Semua platform memungkinkan penyimpanan beberapa versi gambar bitmap untuk resolusi perangkat yang berbeda. Pada runtime, versi yang tepat dimuat berdasarkan resolusi perangkat layar.

Di iOS, bitmap ini dibingkai oleh akhiran pada nama file:

  • Tidak ada akhiran untuk 160 perangkat DPI (1 piksel ke unit independen perangkat)
  • Akhiran '@2x' untuk 320 perangkat DPI (2 piksel ke DIU)
  • Akhiran '@3x' untuk 480 perangkat DPI (3 piksel ke DIU)

Bitmap yang dimaksudkan untuk ditampilkan sebagai persegi satu inci akan ada dalam tiga versi:

  • MyImage.jpg pada persegi 160 piksel
  • MyImage@2x.jpg pada persegi 320 piksel
  • MyImage@3x.jpg pada persegi 480 piksel

Program ini akan merujuk ke bitmap ini sebagai MyImage.jpg, tetapi versi yang tepat diambil pada runtime berdasarkan resolusi layar. Ketika tidak dibatasi, bitmap akan selalu dirender pada 160 unit independen perangkat.

Untuk Android, bitmap disimpan di berbagai subfolder folder Sumber Daya :

  • drawable-ldpi (DPI rendah) untuk 120 perangkat DPI (0,75 piksel ke DIU)
  • drawable-mdpi (sedang) untuk 160 perangkat DPI (1 piksel ke DIU)
  • drawable-hdpi (tinggi) untuk 240 perangkat DPI (1,5 piksel ke DIU)
  • drawable-xhdpi (ekstra tinggi) untuk 320 perangkat DPI (2 piksel ke DIU)
  • drawable-xxhdpi (ekstra tinggi) untuk 480 perangkat DPI (3 piksel ke DIU)
  • drawable-xxxhdpi (tiga ekstra tinggi) untuk 640 perangkat DPI (4 piksel ke DIU)

Untuk bitmap yang dimaksudkan untuk dirender pada satu inci persegi, berbagai versi bitmap akan memiliki nama yang sama tetapi ukuran yang berbeda, dan disimpan dalam folder ini:

  • drawable-ldpi/MyImage.jpg pada persegi 120 piksel
  • drawable-mdpi/MyImage.jpg pada persegi 160 piksel
  • drawable-hdpi/MyImage.jpg pada persegi 240 piksel
  • drawable-xhdpi/MyImage.jpg pada persegi 320 piksel
  • drawable-xxhdpi/MyImage.jpg pada persegi 480 piksel
  • drawable-xxxhdpi/MyImage.jpg pada persegi 640 piksel

Bitmap akan selalu merender pada 160 unit independen perangkat. (Templat solusi standar Xamarin.Forms hanya mencakup folder hdpi, xhdpi, dan xxhdpi.)

Proyek UWP mendukung skema penamaan bitmap yang terdiri dari faktor penskalaan dalam piksel per unit independen perangkat sebagai persentase, misalnya:

  • MyImage.scale-200.jpg pada persegi 320 piksel

Hanya beberapa persentase yang valid. Program sampel untuk buku ini hanya mencakup gambar dengan akhiran skala-200 , tetapi templat solusi saat ini Xamarin.Forms termasuk scale-100, scale-125, scale-150, dan scale-400.

Saat menambahkan bitmap ke proyek platform, Tindakan Build harus:

  • iOS: BundleResource
  • Android: AndroidResource
  • UWP: Konten

Sampel ImageTap membuat dua objek seperti tombol yang terdiri dari Image elemen dengan yang TapGestureRecognizer diinstal. Ini dimaksudkan bahwa objek menjadi persegi satu inci. Properti SourceImage diatur menggunakan OnPlatform objek dan On untuk mereferensikan nama file yang berpotensi berbeda pada platform. Gambar bitmap mencakup angka yang menunjukkan ukuran pikselnya, sehingga Anda dapat melihat bitmap ukuran mana yang diambil dan dirender.

Bilah alat dan ikonnya

Salah satu penggunaan utama bitmap khusus platform adalah Xamarin.Forms toolbar, yang dibangun dengan menambahkan ToolbarItem objek ke koleksi yang ToolbarItems ditentukan oleh Page. ToobarItem berasal dari MenuItem mana ia mewarisi beberapa properti.

Properti yang paling penting ToolbarItem adalah:

  • Text untuk teks yang mungkin muncul tergantung pada platform dan Order
  • Icon jenis FileImageSource untuk gambar yang mungkin muncul tergantung pada platform dan Order
  • Orderjenis ToolbarItemOrder, enumerasi dengan tiga anggota, , DefaultPrimary, dan Secondary.

Jumlah Primary item harus dibatasi hingga tiga atau empat. Anda harus menyertakan Text pengaturan untuk semua item. Untuk sebagian besar platform, hanya Primary item yang Icon memerlukan tetapi Windows 8.1 memerlukan Icon untuk semua item. Ikon harus 32 unit independen perangkat persegi. Jenis menunjukkan FileImageSource bahwa mereka khusus platform.

Peristiwa ToolbarItem kebakaran Clicked ketika diketuk, seperti Button. ToolbarItem juga mendukung Command dan CommandParameter properti sering digunakan sehubungan dengan MVVM. (Lihat Bab 18, MVVM).

Baik iOS maupun Android mengharuskan halaman yang menampilkan toolbar adalah NavigationPage halaman atau yang dinavigasi oleh NavigationPage. Program ToolbarDemo mengatur MainPage properti kelasnya App ke NavigationPage konstruktor dengan ContentPage argumen, dan menunjukkan konstruksi dan penanganan aktivitas toolbar.

Gambar tombol

Anda juga dapat menggunakan bitmap khusus platform untuk mengatur Image properti ke bitmap dari 32 kotak unit independen perangkat, seperti yang ditunjukkan oleh sampel ButtonImage.Button

Catatan

Penggunaan gambar pada tombol telah ditingkatkan. Lihat Menggunakan bitmap dengan tombol.