Xamarin.Android Tasarım Aracı Malzeme Tasarımı özellikleri

Bu konuda, geliştiricilerin Malzeme Tasarımı uyumlu düzenler oluşturmasını kolaylaştıran Tasarım Aracı özellikleri açıklanmaktadır. Bu bölümde Material Grid, Malzeme Renk Paleti, Tipografik Ölçek ve Tema Düzenleyicisi'nin nasıl kullanılacağı açıklanır.

Evolve 2016: Herkes Malzeme Tasarımı ile Güzel Uygulamalar Oluşturabilir

Genel bakış

Xamarin.Android Tasarım Aracı, Malzeme Tasarımı uyumlu düzenler oluşturmanızı kolaylaştıran özellikler içerir. Malzeme Tasarımı hakkında bilginiz yoksa Malzeme Tasarımı giriş bölümüne bakın.

Visual Studio

Bu kılavuzda aşağıdaki Tasarım Aracı özelliklerine göz atacağız:

• Malzeme Kılavuzu : Tasarım Yüzeyinde, Malzeme Tasarımı yönergelerine göre düzen pencere öğelerini yerleştirmenize yardımcı olacak kılavuz, aralık ve tuş çizgilerini gösteren bir katman.

• Tema Düzenleyicisi : Temanın bir alt kümesi için renk bilgilerini ayarlamanıza olanak tanıyan küçük bir renk kaynağı düzenleyicisi. Örneğin, , colorPrimaryDarkve gibi colorPrimaryMalzeme renklerini önizleyebilir ve colorAccentdeğiştirebilirsiniz.

Bu özelliklerin her birine göz atacak ve bunların nasıl kullanılacağına yönelik örnekler sağlayacağız.

Malzeme Tasarım Kılavuzu

Malzeme Tasarım Kılavuzu menüsüne Tasarım Aracı üst kısmındaki araç çubuğundan ulaşabilirsiniz:

Malzeme Tasarım Kılavuzu simgesine tıkladığınızda, Tasarım Aracı Tasarım Yüzeyinde aşağıdaki öğeleri içeren bir katman görüntüler:

• Tuş Çizgileri (turuncu çizgiler)

• Aralık (yeşil alanlar)

• Kılavuz (mavi çizgiler)

Bu öğeler önceki ekran görüntüsünde görülebilir. Bu katman öğelerinin her biri yapılandırılabilir. Malzeme Tasarımı Kılavuzu menüsünün yanındaki üç noktaya tıkladığınızda, kılavuzu devre dışı bırakmanıza/etkinleştirmenize, tuş çizgilerinin yerleşimini yapılandırmanıza ve aralıkları ayarlamanıza olanak tanıyan bir iletişim kutusu açılır. Tüm değerlerin (yoğunluk-bağımsız pikseller) ifade edildiğine dp dikkat edin:

Yeni bir anahtar çizgisi eklemek için, Uzaklık kutusuna yeni bir uzaklık değeri girin, bir konum seçin (sol, üst, sağ veya alt) ve + simgesine tıklayarak yeni anahtar çizgisini ekleyin. Benzer şekilde, yeni bir aralık eklemek için boyut ve uzaklığı (dp cinsinden) sırasıyla Boyut ve Uzaklık kutularına girin. Bir konum seçin (sol, üst, sağ veya alt) ve + simgesine tıklayarak yeni aralığı ekleyin.

Bu yapılandırma değerlerini değiştirdiğinizde, bunlar düzen XML dosyasına kaydedilir ve düzeni yeniden açtığınızda yeniden kullanılır.

Tema Düzenleyici

Tema Düzenleyicisi, tema özniteliklerinin bir alt kümesi için renk bilgilerini özelleştirmenize olanak tanır. Tema Düzenleyicisi'ni açmak için araç çubuğundaki boya fırçası simgesine tıklayın:

Tema Düzenleyicisi'ne tüm hedef Android sürümleri ve API düzeyleri için araç çubuğundan erişilebilir olsa da, hedef API düzeyi API 21'den (Android 5.0 Lollipop) daha eskiyse aşağıda açıklanan özelliklerin yalnızca bir alt kümesi kullanılabilir.

Tema Düzenleyicisi'nin sol panelinde, seçili durumdaki temayı oluşturan renklerin listesi görüntülenir (bu örnekte, şunu kullanıyoruzDefault Theme):

Sol tarafta bir renk seçtiğinizde, sağ panel bu rengi düzenlemenize yardımcı olmak için aşağıdaki sekmeleri sağlar:

• Devral – Seçili renk için bir stil devralma diyagramı görüntüler ve bu tema rengine atanan çözümlenmiş renk ve renk kodunu listeler.

• Renk Seçici : Seçili rengi rastgele bir değerle değiştirmenize olanak tanır.

• Malzeme Paleti – Seçili rengi Malzeme Tasarımına uygun bir değerle değiştirmenizi sağlar.

• Kaynaklar – Seçili rengi temadaki diğer mevcut renk kaynaklarından biriyle değiştirmenize olanak tanır.

Şimdi bu sekmelerin her birine ayrıntılı olarak göz atalım.

Devral sekmesi

Aşağıdaki örnekte görüldüğü gibi Devral sekmesi, Varsayılan Temanın Arka plan rengi için stil devralmayı listeler:

Bu örnekte, Varsayılan Tema ' yı kullanan @color/background_material_light ancak ile color/material_grey_50geçersiz kılan bir stilden devralır ve renk kodu değeri olur #fffafafa. Stil devralma hakkında daha fazla bilgi için bkz . Stiller ve Temalar.

Renk Seçici

Aşağıdaki ekran görüntüsünde Renk Seçici gösterilmektedir:

Bu örnekte, Arka plan rengi çeşitli yollarla herhangi bir değere değiştirilebilir:

• Bir renge doğrudan tıklama.
• Ton, doygunluk ve parlaklık değerlerini girme.
• RGB (kırmızı, yeşil, mavi) değerlerini ondalık olarak girme.
• Seçili renk için alfa (opaklık) ayarlama.
• Onaltılık renk kodunu doğrudan girme.

Renk Seçici'de seçtiğiniz renk, Malzeme Tasarımı yönergeleriyle veya kullanılabilir renk kaynakları kümesiyle sınırlı değildir .

Kaynaklar

Kaynaklar sekmesi, temada zaten var olan renk kaynaklarının listesini sunar:

Kaynaklar sekmesinin kullanılması, seçimlerinizi bu renk listesiyle kısıtlar. Temanın başka bir bölümüne zaten atanmış bir renk kaynağı seçerseniz, kullanıcı arabiriminin iki bitişik öğesinin "birlikte çalışabileceğini" (aynı renge sahip olduklarından) ve kullanıcının ayırt etmesi zorlaşabileceğini unutmayın.

Malzeme Paleti

Malzeme Paleti sekmesi, Malzeme Tasarımı Renk Paleti'ni açar. Bu paletten bir renk değeri seçmek renk seçiminizi kısıtlar, böylece Malzeme Tasarımı yönergeleriyle tutarlı olur:

Renk paletinin üst kısmında birincil Malzeme Tasarımı renkleri görüntülenirken, paletin alt kısmında seçili birincil renk için bir ton aralığı görüntülenir. Örneğin, Indigo'yu seçtiğinizde, iletişim kutusunun altında bir Indigo tonları koleksiyonu görüntülenir. Bir ton seçtiğinizde, özelliğin rengi seçili ton olarak değiştirilir. Aşağıdaki örnekte düğmenin Background Tint adı Indigo 500 olarak değiştirilmiştir:

Background Tint, Indigo 500 ()#ff3f51b5 için renk koduna ayarlanır ve Tasarım Aracı arka plan rengini bu değişikliği yansıtacak şekilde güncelleştirir:

Malzeme Tasarımı renk paleti hakkında daha fazla bilgi için bkz. Malzeme Tasarımı Renk Paleti Kılavuzu.

Yeni tema oluşturma

Aşağıdaki örnekte, yeni bir özel tema oluşturmak için Malzeme Paleti'ni kullanacağız. İlk olarak, Arka plan rengini Mavi 900 olarak değiştireceğiz:

Bir renk kaynağı değiştirildiğinde, iletiyle birlikte bir ileti açılır; Geçerli tema kaydedilmemiş değişiklikler içeriyor:

Tasarım Aracı arka plan rengi yeni renk seçimine değiştirildi, ancak bu değişiklik henüz kaydedilmedi. Bu noktada, aşağıdakilerden birini yapabilirsiniz:

• Yeni renk seçimini (veya seçimlerini) atmak ve temayı özgün durumuna geri döndürmek için Değişiklikleri At'a tıklayın.

• Değişikliklerinizi o anda temada kaydetmek için CTRL+S tuşlarına basın.

Aşağıdaki örnekte, değişikliklerin AppTheme'a kaydedilmesi için CTRL+S tuşlarına basılmıştır:

Özet

Bu konu başlığı altında, Xamarin.Android Tasarım Aracı bulunan Malzeme Tasarımı özellikleri açıklanmıştır. Malzeme Tasarımı Kılavuzunun nasıl etkinleştirileceği ve yapılandırileceği açıklandı ve Malzeme Tasarımı yönergelerine uygun yeni özel temalar oluşturmak için Tema Düzenleyicisi'nin nasıl kullanılacağı açıklandı. Malzeme Tasarımı için Xamarin.Android desteği hakkında daha fazla bilgi için bkz . Malzeme Teması.

Mac için Visual Studio

Bu kılavuzda aşağıdaki Tasarım Aracı özelliklerine göz atacağız:

• Malzeme Tasarım Kılavuzu – Tasarım Yüzeyinde, Malzeme Tasarımı yönergelerine göre düzen pencere öğelerini yerleştirmenize yardımcı olacak kılavuz, aralık ve tuş çizgilerini gösteren bir katman.

• Malzeme Tasarımı Renk Paleti – Resmi Malzeme Tasarımı paletinden bir renk seçmenize yardımcı olan bir Özellik Bölmesi iletişim kutusu.

• Tipografik Ölçek – Metin alanlarının özelliği için textAppearance Malzeme Tasarımı ile uyumlu bir seçenek sunan Özellik Bölmesi iletişim kutusu.

• Tema Düzenleyicisi : Temanın bir alt kümesi için renk bilgilerini ayarlamanıza olanak tanıyan küçük bir renk kaynağı düzenleyicisi. Örneğin, , colorPrimaryDarkve gibi colorPrimaryMalzeme renklerini önizleyebilir ve colorAccentdeğiştirebilirsiniz.

Bu özelliklerin her birine göz atacak ve bunların nasıl kullanılacağına yönelik örnekler sağlayacağız.

Malzeme Tasarım Kılavuzu

Malzeme Tasarım Kılavuzu menüsüne Tasarım Aracı üst kısmındaki araç çubuğundan ulaşabilirsiniz:

Malzeme Tasarım Kılavuzu simgesine tıkladığınızda, Tasarım Aracı Tasarım Yüzeyinde aşağıdaki öğeleri içeren bir katman görüntüler:

• Tuş Çizgileri (turuncu çizgiler)

• Aralık (yeşil alanlar)

• Kılavuz (mavi çizgiler)

Bu öğeler aşağıdaki ekran görüntüsünde görülebilir:

Bu katman öğelerinin her biri yapılandırılabilir. Malzeme Tasarım Kılavuzu menüsünün yanındaki üç noktaya (...) tıkladığınızda, kılavuzu devre dışı bırakmanıza/etkinleştirmenize, tuş çizgilerinin yerleşimini yapılandırmanıza ve aralıkları ayarlamanıza olanak tanıyan bir iletişim kutusu açılır. Tüm değerlerin (yoğunluk-bağımsız pikseller) ifade edildiğine dp dikkat edin:

Yeni bir anahtar çizgisi eklemek için, Uzaklık kutusuna yeni bir uzaklık değeri girin, bir konum seçin (sol, üst, sağ veya alt) ve + simgesine (bir değer girildiğinde sağda görünür) tıklayarak yeni anahtar çizgisini ekleyin. Benzer şekilde, yeni bir aralık eklemek için boyut ve uzaklığı (dp cinsinden) sırasıyla Boyut ve Uzaklık kutularına girin. Bir konum seçin (sol, üst, sağ veya alt) ve + simgesine tıklayarak yeni aralığı ekleyin.

Bu yapılandırma değerlerini değiştirdiğinizde, bunlar düzen XML dosyasına kaydedilir ve düzeni yeniden açtığınızda yeniden kullanılır.

Malzeme Tasarımı Renk Paleti

Renk kabul eden her Özellik paneli öğesinde artık, bu ekran görüntüsünde gösterildiği gibi Malzeme Tasarımı Renk Paleti'ni açmak için kullanabileceğiniz ek bir palet simgesi vardır:

Bu simgeye tıkladığınızda, Malzeme Tasarımı renk paletinden bu özelliğin rengini yapılandırmanızı sağlayan bir iletişim kutusu açılır:

Renk paletinin üst kısmında birincil Malzeme Tasarımı renkleri görüntülenirken, paletin alt kısmında seçili birincil renk için bir ton aralığı görüntülenir. Örneğin, Indigo'yu seçtiğinizde, iletişim kutusunun altında bir Indigo tonları koleksiyonu görüntülenir. Bir ton seçtiğinizde, özelliğin rengi seçili ton olarak değiştirilir. Aşağıdaki örnekte düğmenin Background Tint adı Indigo 500 olarak değiştirilmiştir:

Background Tint, Indigo 500 ()#ff3f51b5 renk koduna ayarlanır ve Tasarım Aracı düğmenin arka plan rengini bu değişikliği yansıtacak şekilde güncelleştirir:

Malzeme Tasarımı renk paleti hakkında daha fazla bilgi için bkz. Malzeme Tasarımı Renk Paleti Kılavuzu.

Tipografik ölçek

Özellik paneli Stili sekmesinin Metin Görünümü bölümünde, Malzeme Tasarımı belirtimine uygun bir stil arasından seçim yapmanızı sağlayan bir TextAppearance simge vardır:

Bu simgeye tıkladığınızda, aralarından seçim yapabileceğiniz önceden yapılandırılmış metin stillerinin listesini sunan Tipografik Ölçek iletişim kutusu açılır:

Aşağıdaki örnekte, Görüntü 1'e tıklanması düğmenin metnini Görüntü 1'in daha büyük yazı tipine değiştirir:

Tipografik Ölçek iletişim kutusundaki metin stili Tema ayarını izler. Örneğin, Tasarım Aracı Açık teması seçilirse, kullanılabilir metin stilleri listesi Açık temasını yansıtır:

Tema Düzenleyici

Tema Düzenleyicisi, tema özniteliklerinin bir alt kümesi için renk bilgilerini özelleştirmenize olanak tanır. Tema Düzenleyicisi'ni açmak için araç çubuğundaki boya fırçası simgesine tıklayın:

Tema Düzenleyicisi'ne tüm hedef Android sürümleri ve API düzeyleri için araç çubuğundan erişilebilir olsa da, hedef API düzeyi API 21'den (Android 5.0 Lollipop) daha eskiyse aşağıda açıklanan özelliklerin yalnızca bir alt kümesi kullanılabilir.

Tema Düzenleyicisi'nin sol panelinde, seçili durumdaki temayı oluşturan renklerin listesi görüntülenir (bu örnekte, şunu kullanıyoruzDefault Theme):

Sol tarafta bir renk seçtiğinizde, sağ panel bu rengi düzenlemenize yardımcı olmak için aşağıdaki sekmeleri sağlar:

• Devral – Seçili renk için bir stil devralma diyagramı görüntüler ve bu tema rengine atanan çözümlenmiş renk ve renk kodunu listeler.

• Renk Seçici : Seçili rengi rastgele bir değerle değiştirmenize olanak tanır.

• Malzeme Paleti – Seçili rengi Malzeme Tasarımına uygun bir değerle değiştirmenizi sağlar.

• Kaynaklar – Seçili rengi temadaki diğer mevcut renk kaynaklarından biriyle değiştirmenize olanak tanır.

Şimdi bu sekmelerin her birine ayrıntılı olarak göz atalım.

Devral sekmesi

Aşağıdaki örnekte görüldüğü gibi Devral sekmesi, Varsayılan Temanın Arka plan rengi için stil devralmayı listeler:

Bu örnekte, Varsayılan Tema ' yı kullanan @color/background_material_dark ancak ile color/material_grey_850geçersiz kılan bir stilden devralır ve renk kodu değeri olur #ff303030. Stil devralma hakkında daha fazla bilgi için bkz . Stiller ve Temalar.

Renk Seçici

Aşağıdaki ekran görüntüsünde Renk Seçici gösterilmektedir:

Bu örnekte, Arka plan rengi çeşitli yollarla herhangi bir değere değiştirilebilir:

• Bir renge doğrudan tıklama.
• Ton, doygunluk ve parlaklık değerlerini girme.
• RGB (kırmızı, yeşil, mavi) değerlerini ondalık olarak girme.
• Seçili renk için alfa (opaklık) ayarlama.
• Onaltılık renk kodunu doğrudan girme.

Renk Seçici'de seçtiğiniz renk, Malzeme Tasarımı yönergeleriyle veya kullanılabilir renk kaynakları kümesiyle sınırlı değildir .

Kaynaklar

Kaynaklar sekmesi, temada zaten var olan renk kaynaklarının listesini sunar:

Kaynaklar sekmesinin kullanılması, seçimlerinizi bu renk listesiyle kısıtlar. Temanın başka bir bölümüne zaten atanmış bir renk kaynağı seçerseniz, kullanıcı arabiriminin iki bitişik öğesinin "birlikte çalışabileceğini" (aynı renge sahip olduklarından) ve kullanıcının ayırt etmesi zorlaşabileceğini unutmayın.

Malzeme Paleti

Malzeme Paleti sekmesi, daha önce açıklanan Malzeme Tasarımı Renk Paleti'ni açar. Bu paletten bir renk değeri seçmek, renk seçiminizi kısıtlar, böylece Malzeme Tasarımı yönergeleriyle tutarlı olur.

Yeni tema oluşturma

Aşağıdaki örnekte, yeni bir özel tema oluşturmak için Malzeme Paleti'ni kullanacağız. İlk olarak, Arka plan rengini Mavi 900 olarak değiştireceğiz:

Bir renk kaynağı değiştirildiğinde, iletiyle birlikte bir ileti açılır; Geçerli tema kaydedilmemiş değişiklikler içeriyor:

Tasarım Aracı renk değişikliği yapıldı, ancak bu değişiklik henüz kaydedilmedi. Bu noktada, aşağıdakilerden birini yapabilirsiniz:

• Yeni renk seçimini (veya seçimlerini) atmak ve temayı özgün durumuna geri döndürmek için Değişiklikleri At'a tıklayın.

• Değişikliklerinizi Özel adlı yeni bir temaya kaydetmek için ⌘ + S tuşlarına basın.

Özet

Bu konu başlığı altında, Xamarin.Android Tasarım Aracı bulunan Malzeme Tasarımı özellikleri açıklanmıştır. Malzeme Tasarım Kılavuzu'nu etkinleştirme ve yapılandırma, renk özelliklerini düzenlemek için Malzeme Tasarımı Renk Paleti'nin nasıl kullanılacağı ve metin özelliklerini yapılandırmak için Tipografik Ölçek seçicinin nasıl kullanılacağı açıklanmıştır. Ayrıca, Malzeme Tasarımı yönergelerine uygun yeni özel temalar oluşturmak için Tema Düzenleyicisi'nin nasıl kullanılacağını da göstermiştir. Malzeme Tasarımı için Xamarin.Android desteği hakkında daha fazla bilgi için bkz . Malzeme Teması.

İlişkili Bağlantılar

• Malzeme Teması
• Malzeme Tasarımına giriş