Malzeme Teması

  • Makale
  • Okumak için 7 dakika

Malzeme teması , Android 5,0 (Lollipop) ile başlayan görünümlerin ve etkinliklerin görünüm ve kullanımını belirleyen bir kullanıcı arabirimi stilidir. Malzeme teması, Android 5,0 ' de yerleşik olarak bulunur, bu nedenle sistem kullanıcı arabirimi ve uygulamalar tarafından kullanılır. Malzeme teması, bir kullanıcının bir ayarlar menüsünden dinamik olarak seçebilmesini sağlayan sistem genelinde görünüm seçeneğinin mantıklı bir "Tema" değildir. Bunun yerine, malzeme teması, uygulamanızın görünümünü özelleştirmek için kullanabileceğiniz bir dizi ilgili yerleşik temel stil olarak düşünülebilir.

Android üç adet malzeme teması türleri sağlar:

  • Theme.Material – Malzeme temasının koyu sürümü; Bu, Android 5,0 ' de varsayılan bir özellik.

  • Theme.Material.Light – Malzeme temasının hafif sürümü.

  • Theme.Material.Light.DarkActionBar – Malzeme temasının hafif sürümü, koyu bir eylem çubuğu ile.

Bu malzeme teması türleri örnekleri burada görüntülenir:

Koyu temanın, açık temanın ve koyu Eylem çubuğu temasının örnek ekran görüntüleri

Tek veya tüm renk özniteliklerini geçersiz kılarak kendi temanızı oluşturmak için malzeme temasından türetilebilir. Örneğin, öğesinden türetilen bir tema oluşturabilirsiniz Theme.Material.Light , ancak uygulama çubuğunun rengini markanızdaki renkle eşleşecek şekilde geçersiz kılar. Ayrıca ayrı görünümlerde stil oluşturabilirsiniz; Örneğin, daha fazla yuvarlatılmış köşeler içeren ve daha koyu bir arka plan rengi kullanan CardView için bir stil oluşturabilirsiniz.

Uygulamanın tamamı için tek bir tema kullanabilir veya bir uygulamadaki farklı ekranlar (etkinlikler) için farklı temalar kullanabilirsiniz. Yukarıdaki ekran görüntülerinde, örneğin, tek bir uygulama yerleşik renk düzenlerini göstermek için her etkinlik için farklı bir tema kullanır. Radyo düğmeleri uygulamayı farklı etkinliklere geçiş yapar ve sonuç olarak farklı temalar görüntüler.

Malzeme teması yalnızca Android 5,0 ve üzeri sürümlerde desteklendiğinden, uygulamanızı Android 'in önceki sürümlerinde çalıştırmak üzere temaya eklemek için (veya malzeme temasından türetilmiş özel bir tema) kullanamazsınız. Ancak, uygulamanızı Android 5,0 cihazlarında malzeme temasını kullanacak şekilde yapılandırabilir ve Android 'in eski sürümlerinde çalıştırıldığında daha önceki bir temaya geri dönebilirler (Ayrıntılar için bu makalenin Uyumluluk bölümüne bakın).

Gereksinimler

Xamarin tabanlı uygulamalarda yeni Android 5,0 malzeme teması özelliklerinin kullanılması için aşağıdakiler gereklidir:

  • xamarin. android – xamarin. android 4,20 veya üzeri Visual Studio ya da Mac için Visual Studio ile yüklenmeli ve yapılandırılmalıdır.

  • Android SDK – Android 5,0 (API 21) veya üzeri Android SDK Yöneticisi aracılığıyla yüklenmelidir.

  • Java jdk 1,8 – jdk 1,7, özellıkle de API düzeyi 23 ve daha önceki bir sürümü hedefliyorsanız kullanılabilir. JDK 1,8, Oracle'dan kullanılabilir.

Android 5,0 uygulama projesini yapılandırma hakkında bilgi edinmek için bkz. android 5,0 Project ayarlama.

Yerleşik temaları kullanma

Malzeme temasını kullanmanın en kolay yolu, uygulamanızı özelleştirme olmadan yerleşik bir tema kullanacak şekilde yapılandırmaktır. Bir temayı açıkça yapılandırmak istemiyorsanız, uygulamanız varsayılan olarak Theme.Material (Koyu tema) olur. Uygulamanızda yalnızca bir etkinlik varsa, etkinlik düzeyinde bir tema yapılandırabilirsiniz. Uygulamanızda birden çok etkinlik varsa, bir temayı tüm etkinliklerde aynı temayı kullanacak şekilde uygulama düzeyinde yapılandırabilir veya farklı etkinliklere farklı temalar atayabilirsiniz. Aşağıdaki bölümlerde, uygulama düzeyinde ve etkinlik düzeyinde temaları yapılandırma açıklanmaktadır.

Bir uygulamayı tema oluşturma

Bir uygulamanın tamamını bir malzeme teması kullanmak üzere yapılandırmak için, android:themeandroid:theme içindeki uygulama düğümünün özniteliğini aşağıdakilerden birine ayarlayın:

  • @android:style/Theme.Material – Koyu tema.

  • @android:style/Theme.Material.Light – Açık tema.

  • @android:style/Theme.Material.Light.DarkActionBar – Koyu bir eylem çubuğuyla açık tema.

Aşağıdaki örnek, uygulama MyApp uygulamasını açık temayı kullanacak şekilde yapılandırır:

<application android:label="MyApp" 
             android:theme="@android:style/Theme.Material.Light">
</application>

Alternatif olarak, ThemeTheme (veya Properties. cs) içinde uygulama özniteliğini de ayarlayabilirsiniz. Örnek:

[assembly: Application(Theme="@android:style/Theme.Material.Light")]

Uygulama teması olarak ayarlandığında @android:style/Theme.Material.Light , @android:style/Theme.Material.Light içindeki her etkinlik kullanılarak görüntülenir Theme.Material.Light .

Bir etkinliği tema oluşturma

Bir etkinliği temaya eklemek için, Theme[Activity] etkinlik bildirimenizden yukarıdaki özniteliğe bir ayar ekler ve Theme kullanmak istediğiniz malzeme teması türü ' ne atayın. Aşağıdaki örnek, ile bir etkinliği Temalar Theme.Material.Light :

[Activity(Theme = "@android:style/Theme.Material.Light",
          Label = "MyApp", MainLauncher = true, Icon = "@drawable/icon")]

Bu uygulamadaki diğer etkinlikler varsayılan Theme.Material koyu renk şemasını kullanır (veya yapılandırılmışsa, uygulama teması ayarı).

Özel Temalar kullanma

Markanızı, markaınızın renkleriyle uygulamanızı stilleyerek özel bir tema oluşturarak geliştirebilirsiniz. Özel bir tema oluşturmak için, değiştirmek istediğiniz renk özniteliklerini geçersiz kılarak yerleşik bir malzeme teması Flavor öğesinden türeyen yeni bir stil tanımlarsınız. Örneğin, ' dan türetilen özel bir tema tanımlayabilir Theme.Material.Light.DarkActionBar ve ekran arka plan rengini beyaz yerine bej olarak değiştirebilirsiniz.

Malzeme teması, özelleştirme için aşağıdaki Düzen özniteliklerini kullanıma sunar:

  • colorPrimary – Uygulama çubuğunun rengi.

  • colorPrimaryDark – Durum çubuğunun ve bağlamsal uygulama çubuklarının rengi; Bu normalde koyu bir sürümüdür colorPrimary .

  • colorAccent – Onay kutuları, radyo düğmeleri ve düzenleme metin kutuları gibi kullanıcı arabirimi denetimlerinin rengi.

  • windowBackground – Ekran arka planının rengi.

  • textColorPrimary – Uygulama çubuğundaki UI metninin rengi.

  • statusBarColor – Durum çubuğunun rengi.

  • navigationBarColor – Gezinti çubuğunun rengi.

Bu ekran alanlarının etiketi aşağıdaki diyagramda verilmiştir:

Özniteliklerin ve bunlarla ilişkili ekran alanlarının diyagramı

Varsayılan olarak, statusBarColor değerine ayarlanır colorPrimaryDark . statusBarColorDüz bir renge ayarlayabilir veya @android:color/transparent durum çubuğunu saydam hale getirmek için olarak ayarlayabilirsiniz. Gezinti çubuğu, ' ye ayarlanarak de saydam hale getirilebilir navigationBarColor@android:color/transparent .

Özel uygulama teması oluşturma

Uygulama projenizin kaynaklar klasöründe dosya oluşturup değiştirerek özel bir uygulama teması oluşturabilirsiniz. Uygulamanıza özel bir tema ile stil eklemek için aşağıdaki adımları kullanın:

  • Kaynaklarda/değerlerde bir colors.xml dosyası oluşturma — bu dosyayı özel tema renklerinizi tanımlamak için kullanırsınız. Örneğin, başlamanıza yardımcı olması için aşağıdaki kodu colors.xml yapıştırabilirsiniz:
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <color name="my_blue">#3498DB</color>
    <color name="my_green">#77D065</color>
    <color name="my_purple">#B455B6</color>
    <color name="my_gray">#738182</color>
</resources>

  • Özel temanız içinde kullanacağınız renk kaynakları için adları ve renk kodlarını tanımlamak üzere bu örnek dosyayı değiştirin.

  • Resources/Values-v21 klasörü oluşturun. Bu klasörde bir styles.xml dosyası oluşturun:

    Resources/values-21.xml klasöründeki styles.xml konumu

    Resources/Values-v21 'ın Android 5,0 'e özgü olduğunu ve Android 'in daha eski sürümleri bu klasördeki dosyaları okuyamadığını unutmayın.

  • resourcesresources için bir düğüm ekleyin ve style özel temalarınızın adıyla bir düğüm tanımlayın. Örneğin, Mycustomtheme tanımlayan bir styles.xml dosyası (yerleşik tema stilinden türetilir):

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <!-- Inherit from the light Material Theme -->
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Customizations go here -->
    </style>
</resources>

  • Bu noktada, Mycustomtheme kullanan bir uygulama, hiçbir özelleştirme olmadan hisse senedi temasını görüntüler:

    Özelleştirmelere ait özel tema görünümü

  • Değiştirmek istediğiniz düzen özniteliklerinin renklerini tanımlayarak styles.xml renk özelleştirmeleri ekleyin. Örneğin, uygulama çubuğu rengini olarak değiştirmek my_blue ve Kullanıcı arabirimi denetimlerinin rengini değiştirmek için my_purple , my_purple' de yapılandırılan renk kaynaklarına başvuran my_blue renk geçersiz kılmaları ekleyin:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <!-- Inherit from the light Material Theme -->
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Override the app bar color -->
        <item name="android:colorPrimary">@color/my_blue</item>
        <!-- Override the color of UI controls -->
        <item name="android:colorAccent">@color/my_purple</item>
    </style>
</resources>

Bu değişikliklerle birlikte, Mycustomtheme kullanan bir uygulama ' de bir uygulama çubuğu rengi ve içindeki kullanıcı arabirimi denetimlerinde görüntülenir my_purple , ancak Theme.Material.Light renk şemasını başka her yerde kullanır:

Özelleştirmelere göre özel tema görünümü

Bu örnekte, mycustomtheme , arka plan rengi, durum çubuğu ve metin renkleriyle ilgili bulunamadığında renklerinden, ancak uygulama çubuğunun rengini olarak değiştirir my_blue ve radyo düğmesinin rengini olarak belirler my_purple .

Özel görünüm stili oluşturma

Android 5,0, tek bir görünümü stillamanızı da mümkün kılar. colors.xml ve styles.xml oluşturduktan sonra (önceki bölümde açıklandığı gibi), styles.xmlbir görünüm stili ekleyebilirsiniz. Tek bir görünüme stil eklemek için aşağıdaki adımları kullanın:

  • Kaynakları/değerleri düzenleyin-v21/styles.xml ve özel görünüm stiliniz adına sahip bir düğüm ekleyin. Bu düğüm içindeki görünümünüz için özel renk özniteliklerini ayarlayın style . Örneğin, daha fazla yuvarlatılmış köşeler ve kart arka plan rengi olarak kullanılan özel bir CardView stili oluşturmak için , stylestyle (düğüm içinde) bir düğüm ekleyin resources ve arka plan rengini ve köşe yarıçapını yapılandırın:
<!-- Theme an individual view: -->
<style name="CardView.MyBlue">

    <!-- Change the background color to Xamarin blue: -->
    <item name="cardBackgroundColor">@color/my_blue</item>

    <!-- Make the corners very round: -->
    <item name="cardCornerRadius">18dp</item>
</style>
  • Mizanpajında, style Bu görünümün özniteliğini, önceki adımda seçtiğiniz özel stil adıyla eşleşecek şekilde ayarlayın. Örnek:
<android.support.v7.widget.CardView
    style="@style/CardView.MyBlue"
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal">

Aşağıdaki ekran görüntüsünde, CardViewCardView özel CardView.MyBlue temayla (sağda gösterilen) bir şekilde stillendirilmiş olan ile karşılaştırıldığında varsayılan (solda gösterilir) örneği sunulmaktadır:

Varsayılan CardView ve özel CardView örnekleri

Bu örnekte, özel CardView arka plan rengi my_blue ve bir 18dp köşe yarıçapı ile birlikte görüntülenir.

Uyumluluk

Uygulamanızı Android 5,0 üzerinde malzeme teması kullanacak ancak otomatik olarak eski Android sürümlerindeki bir aşağı doğru uyumlu stile geri dönüştürülecek şekilde stil eklemek için aşağıdaki adımları kullanın:

  • Bir malzeme teması stilinden türetilen Resources/Values-v21/styles.xml içinde özel bir tema tanımlayın. Örnek:
<resources>
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Your customizations go here -->
    </style>
</resources>
  • Daha eski bir temadan türetilen, ancak yukarıdaki gibi aynı tema adını kullanan kaynaklarda/değerlerde/styles.xml özel bir tema tanımlayın. Örnek:
<resources>
    <style name="MyCustomTheme" parent="android:Theme.Holo.Light">
        <!-- Your customizations go here -->
    </style>
</resources>
  • AndroidManifest.xml, uygulamanızı özel tema adıyla yapılandırın. Örnek:
<application android:label="MyApp" 
             android:theme="@style/MyCustomTheme">
</application>
  • Alternatif olarak, özel temanızı kullanarak belirli bir etkinliğin stilini oluşturabilirsiniz:
[Activity(Label = "MyActivity", Theme = "@style/MyCustomTheme")]

Temanız bir colors.xml dosyasında tanımlı renkler kullanıyorsa, özel temanızın her iki sürümünün renk tanımlarınıza erişebilmeleri için bu dosyayı kaynak/ değer ( Resources/Values-v21yerine) içine yerleştirdiğinizden emin olun.

Uygulamanız bir Android 5,0 cihazında çalıştığında, Resources/Values-v21/styles.xmliçinde belirtilen Tema tanımını kullanır. Bu uygulama eski Android cihazlarda çalıştırıldığında, kaynak/değer/styles.xmlbelirtilen Tema tanımına otomatik olarak geri dönecektir.

Daha eski Android sürümleriyle tema uyumluluğu hakkında daha fazla bilgi için bkz. alternatif kaynaklar.

Özet

Bu makalede, Android 5,0 (Lollipop) ' ye dahil edilen yeni malzeme teması Kullanıcı arabirimi stili tanıtılmıştır. Uygulamanızı oluşturmak için kullanabileceğiniz üç yerleşik malzeme teması türünü ve uygulamanızı markalamayı sağlamak için nasıl özel bir tema oluşturulacağını ve tek bir görünümün nasıl temaya bir örnek sağlandığını anlatılmıştı. Son olarak, bu makalede, Android 'in eski sürümleriyle daha aşağı uyumluluğu sürdürirken, uygulamanızda malzeme temasının nasıl kullanılacağı açıklanmaktadır.