Bagikan melalui

Warna Lebar di Xamarin.iOS

  • Artikel

Artikel ini membahas warna lebar dan bagaimana hal itu dapat digunakan dalam aplikasi Xamarin.iOS atau Xamarin.Mac.

iOS 10 dan macOS Sierra meningkatkan dukungan untuk format piksel rentang yang diperluas dan ruang warna gamut lebar di seluruh sistem termasuk kerangka kerja seperti Core Graphics, Core Image, Metal, dan AVFoundation. Dukungan untuk perangkat dengan tampilan warna lebar lebih mudah dengan menyediakan perilaku ini di seluruh tumpukan grafis.

Katalog Aset

Mendukung Warna Lebar dengan Katalog Aset

Di iOS 10 dan macOS Sierra, Apple telah memperluas Katalog Aset yang digunakan untuk menyertakan dan mengategorikan konten gambar statis dalam bundel aplikasi untuk mendukung warna lebar.

Menggunakan Katalog Aset memberikan manfaat berikut untuk aplikasi:

  • Mereka memberikan opsi penyebaran terbaik untuk aset gambar statis.
  • Mereka mendukung koreksi warna otomatis.
  • Mereka mendukung pengoptimalan format piksel otomatis.
  • Mereka mendukung Pemotongan Aplikasi dan Penipisan Aplikasi yang memastikan bahwa hanya konten yang relevan yang dikirimkan ke perangkat pengguna akhir.

Apple telah melakukan penyempurnaan berikut pada Katalog Aset untuk dukungan warna yang luas:

  • Mereka mendukung konten sumber 16-bit (per saluran warna).
  • Mereka mendukung katalog konten dengan menampilkan gamut. Konten dapat ditandai untuk gamut SRGB atau Tampilkan P3.

Pengembang memiliki tiga opsi untuk mendukung konten warna lebar di aplikasi mereka:

  1. Jangan Apa-apa - Karena konten warna lebar hanya boleh digunakan dalam situasi di mana aplikasi perlu menampilkan warna cerah (di mana mereka akan meningkatkan pengalaman pengguna), konten di luar persyaratan ini harus dibiarkan apa adanya. Ini akan terus dirender dengan benar dalam semua situasi perangkat keras.
  2. Tingkatkan Konten yang Ada untuk Menampilkan P3 - Ini mengharuskan pengembang untuk mengganti konten gambar yang ada di Katalog Aset mereka dengan file baru yang ditingkatkan dalam format P3 dan menandainya seperti di Editor Aset. Pada waktu build, gambar turunan sRGB akan dihasilkan dari aset ini.
  3. Berikan Konten Aset yang Dioptimalkan - Dalam situasi ini, pengembang akan menyediakan visi P3 Tampilan 8-bit dan Tampilan P3 16-bit dari setiap gambar di Katalog Aset (ditandai dengan benar di editor aset).

Penyebaran Katalog Aset

Berikut ini akan terjadi ketika pengembang mengirimkan aplikasi ke App Store dengan Katalog Aset yang menyertakan konten gambar warna lebar:

  • Saat aplikasi disebarkan ke pengguna akhir, App Slicing akan memastikan bahwa hanya varian konten yang sesuai yang dikirimkan ke perangkat pengguna.
  • Pada perangkat yang tidak mendukung warna lebar, tidak ada biaya payload untuk menyertakan konten warna lebar, karena tidak pernah dikirim ke perangkat.
  • NSImage di macOS Sierra (dan yang lebih baru) akan secara otomatis memilih representasi konten terbaik untuk tampilan perangkat keras.
  • Konten yang ditampilkan akan disegarkan secara otomatis ketika atau jika karakteristik tampilan perangkat keras perangkat berubah.

Penyimpanan Katalog Aset

Penyimpanan Katalog Aset memiliki properti dan implikasi berikut untuk aplikasi:

  • Pada waktu build, Apple mencoba mengoptimalkan penyimpanan konten gambar melalui konversi gambar berkualitas tinggi.
  • 16-bit digunakan per saluran warna untuk konten warna lebar.
  • Kompresi gambar dependen konten digunakan untuk menurunkan ukuran konten yang dapat dikirimkan. Kompresi "lossy" baru telah ditambahkan untuk mengoptimalkan ukuran konten lebih lanjut.

Merender Gambar Di Luar Layar di Aplikasi

Berdasarkan jenis aplikasi yang dibuat, mungkin memungkinkan pengguna untuk menyertakan konten gambar yang telah mereka kumpulkan dari internet atau membuat konten gambar langsung di dalam aplikasi (seperti aplikasi gambar vektor misalnya).

Dalam kedua kasus ini, aplikasi dapat merender citra yang diperlukan di luar layar dalam warna lebar menggunakan fitur yang disempurnakan yang ditambahkan ke iOS dan macOS.

Menggambar Warna Lebar di iOS

Sebelum membahas cara menggambar gambar warna lebar dengan benar di iOS 10, lihat kode gambar iOS umum berikut:

public UIImage DrawWideColorImage ()
{
    var size = new CGSize (250, 250);
    UIGraphics.BeginImageContext (size);

    ...

    UIGraphics.EndImageContext ();
    return image = UIGraphics.GetImageFromCurrentImageContext ();
    }

Ada masalah dengan kode standar yang perlu ditangani sebelum dapat digunakan untuk menggambar gambar warna lebar. Metode yang UIGraphics.BeginImageContext (size) digunakan untuk memulai gambar iOS memiliki batasan berikut:

  • Ini tidak dapat membuat konteks gambar dengan lebih dari 8 bit per saluran warna.
  • Ini tidak dapat mewakili warna dalam Rentang Diperluas Ruang Warna sRGB.
  • Ini tidak memiliki kemampuan untuk menyediakan antarmuka untuk membuat konteks di Ruang Warna non-sRGB karena rutinitas C tingkat rendah dipanggil di latar belakang.

Untuk menangani batasan ini dan menggambar gambar warna lebar di iOS 10, gunakan kode berikut sebagai gantinya:

public UIImage DrawWideColorImage ()
{
    var size = new CGSize (250, 250);
    var render = new UIGraphicsImageRenderer (size);

    var image = render.CreateImage ((UIGraphicsImageRendererContext context) => {
        var bounds = context.Format.Bounds;
        CGRect slice;
        CGRect remainder;
        bounds.Divide (bounds.Width / 2, CGRectEdge.MinXEdge, out slice, out remainder);

        var redP3 = UIColor.FromDisplayP3 (1.0F, 0.0F, 0.0F, 1.0F);
        redP3.SetColor ();
        context.FillRect (slice);

        var redRGB = UIColor.Red;
        redRGB.SetColor ();
        context.FillRect (remainder);
    });

    // Return results
    return image;
}

Kelas baru UIGraphicsImageRenderer membuat konteks gambar baru yang mampu menangani Extended Range sRGB Color Space dan memiliki fitur berikut:

  • Ini sepenuhnya berwarna dikelola secara default.
  • Ini mendukung Extended Range sRGB Color Space secara default.
  • Ini dengan cerdas memutuskan apakah harus dirender dalam sRGB atau Extended Range sRGB Color Space berdasarkan kemampuan perangkat iOS tempat aplikasi berjalan.
  • Ini sepenuhnya dan otomatis mengelola konteks gambar (CGContext) seumur hidup sehingga pengembang tidak perlu khawatir tentang panggilan perintah konteks awal dan akhir.
  • Ini kompatibel dengan UIGraphics.GetCurrentContext() metode .

Metode CreateImageUIGraphicsImageRenderer kelas dipanggil untuk membuat gambar warna lebar dan melewati handler penyelesaian dengan konteks gambar untuk digambar. Semua gambar dilakukan di dalam handler penyelesaian ini sebagai berikut:

  • Metode ini UIColor.FromDisplayP3 membuat warna merah baru yang sepenuhnya jenuh di Ruang Warna P3 Tampilan gamut lebar dan digunakan untuk menggambar paruh pertama persegi panjang.
  • Paruh kedua persegi panjang digambar dalam warna merah normal sRGB sepenuhnya jenuh untuk perbandingan.

Menggambar Warna Lebar di macOS

Kelas NSImage telah diperluas di macOS Sierra untuk mendukung gambar gambar Wide Color. Contohnya:

var size = CGSize(250,250);
var wideColorImage = new NSImage(size, false, (drawRect) =>{
    var rects = drawRect.Divide(drawRect.Size.Width/2,CGRect.MinXEdge);

    var color = new NSColor(1.0, 0.0, 0.0, 1.0).Set();
    var path = new NSBezierPath(rects.Slice).Fill();

    color = new NSColor(1.0, 0.0, 0.0, 1.0).Set();
    path = new NSBezierPath(rects.Remainder).Fill();

    // Return modified
    return true;
});

Merender Gambar Di Layar di Aplikasi

Untuk merender gambar warna lebar di layar, prosesnya berfungsi mirip dengan menggambar gambar warna lebar di luar layar untuk macOS dan iOS yang disajikan di atas.

Penyajian Di Layar di iOS

Ketika aplikasi perlu merender gambar dalam warna lebar di layar di iOS, ambil alih Draw metode yang UIView dimaksud seperti biasa. Contohnya:

using System;
using UIKit;
using CoreGraphics;

namespace MonkeyTalk
{
    public class MonkeyView : UIView
    {
        public MonkeyView ()
        {
        }

        public override void Draw (CGRect rect)
        {
            base.Draw (rect);

            // Draw the image to screen
        ...
        }
    }
}

Seperti yang dilakukan iOS 10 dengan kelas yang UIGraphicsImageRenderer ditunjukkan di atas, iOS secara cerdas memutuskan apakah harus dirender di SRGB atau Extended Range sRGB Color Space berdasarkan kemampuan perangkat iOS tempat aplikasi berjalan saat Draw metode dipanggil. Selain itu, UIImageView telah dikelola warna sejak iOS 9.3 juga.

Jika aplikasi perlu tahu bagaimana penyajian dilakukan pada UIView atau UIViewController, aplikasi dapat memeriksa properti UITraitCollection baru DisplayGamut kelas. Nilai ini akan menjadi UIDisplayGamut enum dari berikut:

  • P3
  • Srgb
  • Tidak disebutkan

Jika aplikasi ingin mengontrol Ruang Warna mana yang digunakan untuk menggambar gambar, aplikasi dapat menggunakan properti baru ContentsFormat untuk menentukan Ruang Warna yang CALayer diinginkan. Nilai ini bisa menjadi CAContentsFormat enum dari berikut ini:

  • Abu-abu8Uint
  • Rgba16Float
  • Rgba8Uint

Penyajian Di Layar di macOS

Saat aplikasi perlu merender gambar dalam warna lebar di layar di macOS, ambil alih DrawRect metode yang NSView dimaksud seperti biasa. Contohnya:

using System;
using AppKit;
using CoreGraphics;
using CoreAnimation;

namespace MonkeyTalkMac
{
    public class MonkeyView : NSView
    {
        public MonkeyView ()
        {
        }

        public override void DrawRect (CGRect dirtyRect)
        {
            base.DrawRect (dirtyRect);

            // Draw graphics into the view
            ...
        }
    }
}

Sekali lagi, ia dengan cerdas memutuskan apakah harus dirender dalam sRGB atau Extended Range sRGB Color Space berdasarkan kemampuan perangkat keras Mac tempat aplikasi berjalan saat DrawRect metode dipanggil.

Jika aplikasi ingin mengontrol Ruang Warna mana yang digunakan untuk menggambar gambar, aplikasi dapat menggunakan properti baru DepthLimit kelas NSWindow untuk menentukan Ruang Warna yang diinginkan. Nilai ini bisa menjadi NSWindowDepth enum dari berikut ini:

  • OneHundredTwentyEightBitRgb
  • SixtyfourBitRgb
  • Dua puluhfourBitRgb