Aracılığıyla paylaş

Malzeme Teması

Malzeme Teması , Android 5.0 (Lollipop) ile başlayan görünümlerin ve etkinliklerin görünümünü ve görünümünü belirleyen bir kullanıcı arabirimi stilidir. Malzeme Teması Android 5.0'da yerleşiktir, bu nedenle sistem kullanıcı arabirimi ve uygulamalar tarafından kullanılır. Malzeme Teması, bir kullanıcının ayarlar menüsünden dinamik olarak seçebileceği sistem genelinde bir görünüm seçeneği açısından "tema" değildir. Bunun yerine Malzeme Teması, uygulamanızın görünümünü özelleştirmek için kullanabileceğiniz ilgili yerleşik temel stiller kümesi olarak düşünülebilir.

Android üç Malzeme Teması çeşidi sunar:

  • Theme.Material – Malzeme Temasının koyu sürümü; Bu, Android 5.0'da varsayılan çeşittir.

  • Theme.Material.Light – Malzeme Temasının basit sürümü.

  • Theme.Material.Light.DarkActionBar – Malzeme Teması'nın açık sürümü, ancak koyu bir eylem çubuğu ile.

Bu Malzeme Teması aromalarının örnekleri burada görüntülenir:

Koyu tema, Açık tema ve Koyu Eylem Çubuğu temasının örnek ekran görüntüleri

Bazı veya tüm renk özniteliklerini geçersiz kılarak kendi temanızı oluşturmak için Malzeme Teması'ndan türetebilirsiniz. Örneğin, uygulamasından Theme.Material.Lighttüretilen ancak uygulama çubuğu rengini markanızın rengiyle eşleşecek şekilde geçersiz kılan bir tema oluşturabilirsiniz. Ayrıca tek tek görünümleri de stilleyebilirsiniz; örneğin, Daha yuvarlak köşeleri olan 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. Örneğin, yukarıdaki ekran görüntülerinde, 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 değiştirir ve sonuç olarak farklı temalar görüntüler.

Malzeme Teması yalnızca Android 5.0 ve sonraki sürümlerde desteklendiğinden, uygulamanızı Android'in önceki sürümlerinde çalıştırmak üzere tema oluşturmak üzere kullanamazsınız (veya Malzeme Teması'ndan türetilen özel bir tema). Bununla birlikte, uygulamanızı Android 5.0 cihazlarında Malzeme Teması kullanacak şekilde yapılandırabilir ve Android'in eski sürümlerinde çalıştığında önceki bir temaya düzgün bir şekilde geri dönebilirsiniz (ayrıntılar için bu makalenin Uyumluluk bölümüne bakın).

Gereksinimler

Xamarin tabanlı uygulamalarda yeni Android 5.0 Malzeme Teması özelliklerini kullanmak için aşağıdakiler gereklidir:

  • Xamarin.Android – Xamarin.Android 4.20 veya üstü Visual Studio veya Mac için Visual Studio ile yüklenip yapılandırılmalıdır.

  • Android SDK – Android 5.0 (API 21) veya üstü Android SDK Yöneticisi aracılığıyla yüklenmelidir.

  • Özellikle API düzeyi 23 ve önceki sürümleri hedeflediyseniz Java JDK 1.8 – JDK 1.7 kullanılabilir. JDK 1.8, Oracle tarafından kullanılabilir.

Android 5.0 uygulama projesi yapılandırmayı öğrenmek için bkz . Android 5.0 Projesi 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ızın tek bir etkinliği varsa, bir temayı etkinlik düzeyinde yapılandırabilirsiniz. Uygulamanızın birden çok etkinliği varsa, tüm etkinliklerde aynı temayı kullanması için uygulama düzeyinde bir tema yapılandırabilir veya farklı etkinliklere farklı temalar atayabilirsiniz. Aşağıdaki bölümlerde temaları uygulama düzeyinde ve etkinlik düzeyinde yapılandırma açıklanmaktadır.

Uygulama Temalı

Bir uygulamanın tamamını Malzeme Teması aroması kullanacak şekilde yapılandırmak için, AndroidManifest.xml içindeki uygulama düğümünün özniteliğini aşağıdakilerden biri olarak ayarlayınandroid:theme:

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

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

  • @android:style/Theme.Material.Light.DarkActionBar – Koyu aksiyon çubuğu ile açık tema.

Aşağıdaki örnekte Uygulamam uygulaması açık temayı kullanacak şekilde yapılandırılır:

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

Alternatif olarak, uygulama Theme özniteliğini AssemblyInfo.cs (veya Properties.cs) olarak ayarlayabilirsiniz. Örneğin:

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

Uygulama teması olarak @android:style/Theme.Material.Lightayarlandığında, MyApp'teki her etkinlik kullanılarak Theme.Material.Lightgörüntülenir.

Etkinlik Temalı

Bir etkinliğe tema oluşturmak için, etkinlik bildiriminizin üzerindeki özniteliğe [Activity] bir Theme ayar ekler ve kullanmak istediğiniz Malzeme Teması çeşidine atarsınızTheme. Aşağıdaki örnek ile Theme.Material.Lightbir etkinliği temalar:

[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 düzenini (veya yapılandırıldıysa uygulama teması ayarını) kullanır.

Özel Temalar Kullanma

Uygulamanızı markanızın renkleriyle stilleyen özel bir tema oluşturarak markanızı geliştirebilirsiniz. Özel tema oluşturmak için, değiştirmek istediğiniz renk özniteliklerini geçersiz kılarak yerleşik malzeme temasından türetilen yeni bir stil tanımlarsınız. Örneğin, ekran arka plan rengini beyaz yerine bej olarak değiştiren ve bu temadan Theme.Material.Light.DarkActionBar türetilen özel bir tema tanımlayabilirsiniz.

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 öğesinin koyu bir sürümüdür colorPrimary.

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

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

  • textColorPrimary – Uygulama çubuğundaki kullanıcı arabirimi metninin rengi.

  • statusBarColor – Durum çubuğunun rengi.

  • navigationBarColor – Gezinti çubuğunun rengi.

Bu ekran alanları aşağıdaki diyagramda etiketlenmiştir:

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

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

Özel Uygulama Teması Oluşturma

Uygulama projenizin Kaynaklar klasöründe dosya oluşturup değiştirerek özel bir uygulama teması oluşturabilirsiniz. Uygulamanızı özel bir temayla stil yapmak için aşağıdaki adımları kullanın:

  • Kaynaklar/değerler'de bir colors.xml dosyası oluşturun; özel tema renklerinizi tanımlamak için bu dosyayı 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ızda kullanacağınız renk kaynaklarının adlarını ve renk kodlarını tanımlamak için bu örnek dosyayı değiştirin.

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

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

    Resources/values-v21'in Android 5.0'a özgü olduğunu unutmayın; Android'in eski sürümleri bu klasördeki dosyaları okumaz.

  • styles.xml bir resources düğüm ekleyin ve özel temanızın adıyla bir style düğüm tanımlayın. Örneğin, MyCustomTheme öğesini tanımlayan bir styles.xml dosyası (yerleşik Theme.Material.Light tema stilinden türetilmiştir):

<?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 stok Theme.Material.Light temasını özelleştirmeler olmadan görüntüler:

    Özelleştirmelerden önce ö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 my_blue olarak değiştirmek ve kullanıcı arabirimi denetimlerinin rengini olarak değiştirmek içinmy_purple, colors.xml yapılandırılan renk kaynaklarına başvuran styles.xml 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şiklikler gerçekleştiğinde, MyCustomTheme kullanan bir uygulama içinde my_blue bir uygulama çubuğu rengi ve içinde my_purplekullanıcı arabirimi denetimleri görüntüler, ancak renk düzenini başka her yerde kullanırTheme.Material.Light:

Özelleştirmelerden sonra özel tema görünümü

Bu örnekte MyCustomTheme, arka plan rengi, durum çubuğu ve metin renkleri için renklerini Theme.Material.Light ödünç alır, ancak uygulama çubuğunun rengini olarak my_blue değiştirir ve radyo düğmesinin rengini olarak my_purpleayarlar.

Özel Görünüm Stili Oluşturma

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

  • Resources/values-v21/styles.xml düzenleyin ve özel görünüm stilinizin adını içeren bir style düğüm ekleyin. Bu style düğümdeki görünümünüz için özel renk özniteliklerini ayarlayın. Örneğin, daha yuvarlak köşeleri olan ve kart arka plan rengi olarak kullanan özel bir CardView stili oluşturmak için, styles.xml (düğümün resources içinde) bir style düğüm ekleyin ve arka plan rengini ve köşe yarıçapını my_blue 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>
  • Düzeninizde, bu görünümün style özniteliğini önceki adımda seçtiğiniz özel stil adıyla eşleşecek şekilde ayarlayın. Örneğin:
<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, özel CardView.MyBlue temayla (sağda gösterilen) stillenmiş bir CardView ile karşılaştırıldığında varsayılanın CardView (solda gösterilir) bir örneği verilmiştir:

Varsayılan CardView ve Özel CardView örnekleri

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

Uyumluluk

Uygulamanızı, Android 5.0'da Malzeme Teması kullanacak ancak eski Android sürümlerinde otomatik olarak aşağı doğru uyumlu bir stile geri dönecek şekilde biçimlendirmek için aşağıdaki adımları kullanın:

  • Kaynaklar/values-v21/styles.xml içinde Malzeme Teması stilinden türetilen özel bir tema tanımlayın. Örneğin:
<resources>
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Your customizations go here -->
    </style>
</resources>
  • Kaynaklar/değerler/styles.xml içinde eski bir temadan türetilen, ancak yukarıdakiyle aynı tema adını kullanan özel bir tema tanımlayın. Örneğin:
<resources>
    <style name="MyCustomTheme" parent="android:Theme.Holo.Light">
        <!-- Your customizations go here -->
    </style>
</resources>
  • AndroidManifest.xml'de uygulamanızı özel tema adıyla yapılandırın. Örneğin:
<application android:label="MyApp" 
             android:theme="@style/MyCustomTheme">
</application>
  • Alternatif olarak, özel temanızı kullanarak belirli bir etkinliğe stil ekleyebilirsiniz:
[Activity(Label = "MyActivity", Theme = "@style/MyCustomTheme")]

Temanız bir colors.xml dosyasında tanımlanan renkleri kullanıyorsa, özel temanızın her iki sürümünün de renk tanımlarınıza erişebilmesi için bu dosyayı Kaynaklar/değerler'e (Kaynaklar/değerler-v21 yerine) yerleştirmeyi unutmayın.

Uygulamanız bir Android 5.0 cihazında çalıştırıldığında Resources/values-v21/styles.xml içinde belirtilen tema tanımını kullanır. Bu uygulama eski Android cihazlarda çalıştığında, otomatik olarak Kaynaklar/değerler/styles.xml içinde belirtilen tema tanımına geri döner.

Eski Android sürümleriyle tema uyumluluğu hakkında daha fazla bilgi için bkz . Alternatif Kaynaklar.

Özet

Bu makalede, Android 5.0'da (Lollipop) yer alan yeni Malzeme Teması kullanıcı arabirimi stili tanıtıldı. Uygulamanıza stil eklemek için kullanabileceğiniz üç yerleşik Malzeme Teması türünü açıkladı, uygulamanızı markalama için özel bir tema oluşturmayı açıkladı ve tek tek bir görünümün nasıl tema oluşturulacağını gösteren bir örnek sağladı. Son olarak bu makalede, Android'in eski sürümleriyle aşağı doğru uyumluluğu korurken uygulamanızda Malzeme Teması'nın nasıl kullanılacağı açıklanmıştır.

  • Last updated on