Aracılığıyla paylaş


Eylem Çubuğunu Değiştirme

Genel bakış

için Toolbar en yaygın kullanımlardan biri, varsayılan eylem çubuğunu özel Toolbar bir eylem çubuğuyla değiştirmektir (yeni bir Android projesi oluşturulduğunda, varsayılan eylem çubuğunu kullanır). etkinliğin kullanıcı arabiriminin Toolbar uygulama çubuğu bölümüne markalı logolar, başlıklar, menü öğeleri, gezinti düğmeleri ve hatta özel görünümler ekleme olanağı sağladığından, varsayılan eylem çubuğuna göre önemli bir yükseltme sunar.

Bir uygulamanın varsayılan eylem çubuğunu ile Toolbardeğiştirmek için:

  1. Yeni bir özel tema oluşturun ve uygulamanın özelliklerini bu yeni temayı kullanabilecek şekilde değiştirin.

  2. windowActionBar Özel temada özniteliği devre dışı bırakın ve özniteliği etkinleştirinwindowNoTitle.

  3. için Toolbarbir düzen tanımlayın.

  4. Toolbar Düzeni Activity'nin Main.axml düzen dosyasına ekleyin.

  5. eylem çubuğu olarak yüklemek için öğesini bulmak Toolbar ve çağrısı SetActionBar yapmak için Activity'in OnCreate yöntemine ToolBar kod ekleyin.

Aşağıdaki bölümlerde bu işlem ayrıntılı olarak açıklanmaktadır. Basit bir uygulama oluşturulur ve eylem çubuğu özelleştirilmiş Toolbarbir ile değiştirilir.

Uygulama Projesi Başlatma

ToolbarFun adlı yeni bir Android projesi oluşturun (yeni bir Android projesi oluşturma hakkında daha fazla bilgi için bkz. Hello, Android). Bu proje oluşturulduktan sonra hedef ve en düşük Android API düzeylerini Android 5.0 (API Düzeyi 21 - Lollipop) veya üzeri olarak ayarlayın. Android sürüm düzeylerini ayarlama hakkında daha fazla bilgi için bkz . Android API Düzeylerini Anlama. Uygulama derlenip çalıştırıldığında, bu ekran görüntüsünde görüldüğü gibi varsayılan eylem çubuğunu görüntüler:

Varsayılan eylem çubuğunun ekran görüntüsü

Özel Tema Oluşturma

Resources/values dizinini açın ve styles.xml adlı yeni bir dosya oluşturun. İçeriğini aşağıdaki XML ile değiştirin:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="MyTheme" parent="@android:style/Theme.Material.Light.DarkActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:colorPrimary">#5A8622</item>
  </style>
</resources>

Bu XML, Lollipop'taki Theme.Material.Light.DarkActionBar temasını temel alan MyTheme adlı yeni bir özel tema tanımlar. windowNoTitle özniteliği, başlık çubuğunu gizlemek için olarak ayarlanırtrue:

<item name="android:windowNoTitle">true</item>

Özel araç çubuğunu görüntülemek için varsayılanın ActionBar devre dışı bırakılması gerekir:

<item name="android:windowActionBar">false</item>

Araç çubuğunun arka plan rengi için zeytin yeşili colorPrimary ayarı kullanılır:

<item name="android:colorPrimary">#5A8622</item>

Özel Temayı Uygulama

Özellikleri Düzenle/AndroidManifest.xml ve uygulamanın özel temayı kullanması MyTheme için <application> öğesine aşağıdaki android:theme özniteliği ekleyin:

<application android:label="@string/app_name" android:theme="@style/MyTheme"></application>

Bir uygulamaya özel tema uygulama hakkında daha fazla bilgi için bkz . Özel Temalar Kullanma.

Araç Çubuğu Düzeni Tanımlama

Kaynaklar/düzen dizininde toolbar.xml adlı yeni bir dosya oluşturun. İçeriğini aşağıdaki XML ile değiştirin:

<?xml version="1.0" encoding="utf-8"?>
<Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"/>

Bu XML, varsayılan eylem çubuğunun yerini alan özel Toolbar öğeyi tanımlar. en düşük yüksekliği Toolbar , değiştirdiği eylem çubuğunun boyutuna ayarlanır:

android:minHeight="?android:attr/actionBarSize"

arka plan rengiToolbar, daha önce styles.xml tanımlanan zeytin yeşili rengine ayarlanır:

android:background="?android:attr/colorPrimary"

Lollipop'la başlayarak, android:theme özniteliği tek bir görünüme stil eklemek için kullanılabilir. ThemeOverlay.Material Lollipop'ta tanıtılan temalar, varsayılan Theme.Material temaların üzerine yazılmasını ve bunların açık veya koyu olmasını sağlamak için ilgili özniteliklerin üzerine yazılmasını mümkün hale getirir. Bu örnekte, Toolbar içeriği açık renkte olacak şekilde koyu bir tema kullanır:

android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"

Bu ayar, menü öğelerinin daha koyu arka plan rengiyle karşıt olması için kullanılır.

Araç Çubuğu Düzenini Ekle

Resources/layout/Main.axml düzen dosyasını düzenleyin ve içeriğini aşağıdaki XML ile değiştirin:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />
</RelativeLayout>

Bu düzen, toolbar.xml içinde tanımlanan öğesini içerir Toolbar ve kullanıcı arabiriminin en üstüne (düğmenin üstüne) yerleştirileceğini belirtmek Toolbar için bir RelativeLayout kullanır.

Araç Çubuğunu Bulma ve Etkinleştirme

MainActivity.cs düzenleyin ve aşağıdaki using deyimini ekleyin:

using Android.Views;

Ayrıca yönteminin sonuna OnCreate aşağıdaki kod satırlarını ekleyin:

var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
SetActionBar(toolbar);
ActionBar.Title = "My Toolbar";

Bu kod, varsayılan eylem çubuğu özelliklerini alması için ve çağrılarını SetActionBar Toolbar bulurToolbar. Araç Çubuğu başlığı Araç Çubuğum olarak değiştirilir. Bu kod örneğinde görüldüğü gibi, ToolBar eylemine doğrudan eylem çubuğu olarak başvurulabilir. Bu uygulamayı derleyin ve çalıştırın; özelleştirilmiş Toolbar , varsayılan eylem çubuğunun yerine görüntülenir:

Yeşil renk düzenine sahip özelleştirilmiş Araç Çubuğu'nun ekran görüntüsü

öğesinin Toolbar , uygulamanın geri kalanına Theme.Material.Light.DarkActionBar uygulanan temadan bağımsız olarak stillendirildiğini görebilirsiniz.

Uygulamayı çalıştırırken bir özel durum oluşursa aşağıdaki Sorun Giderme bölümüne bakın.

Menü Öğeleri Ekle

Bu bölümde menüler öğesine Toolbareklenir. öğesinin ToolBar sağ üst alanı menü öğeleri için ayrılmıştır; her menü öğesi (eylem öğesi olarak da adlandırılır) geçerli etkinlik içinde bir eylem gerçekleştirebilir veya uygulamanın tamamı adına bir eylem gerçekleştirebilir.

menüsüne menü eklemek için Toolbar:

  1. Uygulama projesinin klasörlerine mipmap- menü simgeleri (gerekirse) ekleyin. Google, Malzeme simgeleri sayfasında bir dizi ücretsiz menü simgesi sağlar.

  2. Kaynaklar/menü altına yeni bir menü kaynak dosyası ekleyerek menü öğelerinin içeriğini tanımlayın.

  3. OnCreateOptionsMenu Activity yöntemini uygulayın; bu yöntem menü öğelerini şişirir.

  4. OnOptionsItemSelected Activity yöntemini uygulayın. Bu yöntem, menü öğesine dokunulduğunda bir eylem gerçekleştirir.

Aşağıdaki bölümlerde, özelleştirilmiş Toolbaröğesine Düzenle ve Kaydet menü öğeleri eklenerek bu işlem ayrıntılı olarak gösterilmiştir.

Menü Simgelerini Yükle

Örnek uygulamaya devam ederek ToolbarFun uygulama projesine menü simgeleri ekleyin. Araç çubuğu simgelerini indirin, sıkıştırmasını açın ve ayıklanan mipmap- klasörlerinin içeriğini ToolbarFun/Resources altındaki mipmap- klasörlerine kopyalayın ve eklenen her simge dosyasını projeye ekleyin.

Menü Kaynağı Tanımlama

Kaynaklar altında yeni bir menü alt dizini oluşturun. Menü alt dizininde, top_menus.xml adlı yeni bir menü kaynak dosyası oluşturun ve içeriğini aşağıdaki XML ile değiştirin:

<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
       android:id="@+id/menu_edit"
       android:icon="@mipmap/ic_action_content_create"
       android:showAsAction="ifRoom"
       android:title="Edit" />
  <item
       android:id="@+id/menu_save"
       android:icon="@mipmap/ic_action_content_save"
       android:showAsAction="ifRoom"
       android:title="Save" />
  <item
       android:id="@+id/menu_preferences"
       android:showAsAction="never"
       android:title="Preferences" />
</menu>

Bu XML üç menü öğesi oluşturur:

  • Simgeyi ic_action_content_create.png (kalem) kullanan Bir Düzenle menü öğesi.

  • Simgeyi ic_action_content_save.png (diskette) kullanan Kaydet menü öğesi.

  • Simgesi olmayan Tercihler menü öğesi.

Düzenle ve Kaydet menü öğelerinin öznitelikleri olarak ayarlanır ifRoom ; bu ayar, bu menü öğelerinin Toolbar görüntülenmesi için yeterli alan varsa öğesinde görünmesine neden olur. showAsAction Tercihler menü öğesi olarak ayarlır never showAsAction; bu, Tercihler menüsünün taşma menüsünde (üç dikey nokta) görünmesine neden olur.

OnCreateOptionsMenu Uygulama

MainActivity.cs için aşağıdaki yöntemi ekleyin:

public override bool OnCreateOptionsMenu(IMenu menu)
{
    MenuInflater.Inflate(Resource.Menu.top_menus, menu);
    return base.OnCreateOptionsMenu(menu);
}

Android, uygulamanın bir etkinlik için menü kaynağını belirtebilmesi için yöntemini çağırır OnCreateOptionsMenu . Bu yöntemde , top_menus.xml kaynağı geçirilen menuiçine şişirilir. Bu kod, yeni Düzenle, Kaydet ve Tercihler menü öğelerinin içinde görünmesine Toolbarneden olur.

OnOptionsItemSelected Uygulama

MainActivity.cs için aşağıdaki yöntemi ekleyin:

public override bool OnOptionsItemSelected(IMenuItem item)
{
    Toast.MakeText(this, "Action selected: " + item.TitleFormatted,
        ToastLength.Short).Show();
    return base.OnOptionsItemSelected(item);
}

Kullanıcı bir menü öğesine dokunduğunda, Android yöntemini çağırır OnOptionsItemSelected ve seçilen menü öğesini geçirir. Bu örnekte, uygulama hangi menü öğesine dokunulduğuna ilişkin bir bildirim görüntüler.

Araç çubuğundaki yeni menü öğelerini görmek için derleyin ve çalıştırın ToolbarFun . şimdi Toolbar , bu ekran görüntüsünde görüldüğü gibi üç menü simgesi görüntüler:

Düzenle, Kaydet ve Taşma menü öğelerinin konumlarını gösteren diyagram

Kullanıcı Düzenle menü öğesine dokunduğunda, yöntemin OnOptionsItemSelected çağrıldığını belirtmek için bir bildirim görüntülenir:

Öğeyi düzenle öğesine dokunulduğunda görüntülenen Bildirim ekran görüntüsü

Bir kullanıcı taşma menüsüne dokunduğunda Tercihler menü öğesi görüntülenir. Genellikle, taşma menüsüne daha az yaygın eylemler yerleştirilmelidir. Bu örnekte, Düzenle ve Kaydet gibi sık kullanılmadığından Tercihler için taşma menüsü kullanılır:

Taşma menüsünde görünen Tercihler menü öğesinin ekran görüntüsü

Android menüleri hakkında daha fazla bilgi için Android Geliştirici Menüleri konusuna bakın.

Sorun giderme

Aşağıdaki ipuçları, eylem çubuğunu bir araç çubuğuyla değiştirirken oluşabilecek sorunların hatalarını ayıklamaya yardımcı olabilir.

Etkinliğin Zaten Bir Eylem Çubuğu Var

Uygulama, Özel Temayı Uygulama bölümünde açıklandığı gibi özel tema kullanacak şekilde düzgün yapılandırılmamışsa, uygulamayı çalıştırırken aşağıdaki özel durum oluşabilir:

Özel tema kullanılmadığında oluşabilecek hata

Buna ek olarak, aşağıdaki gibi bir hata iletisi oluşturulabilir: Java.Lang.IllegalStateException: Bu Etkinlik zaten pencere dekoru tarafından sağlanan bir eylem çubuğuna sahip.

Bu hatayı düzeltmek için özel tema özniteliğinin android:theme daha önce Özel Temayı Uygulama bölümünde açıklandığı gibi 'a <application> (Özellikler/AndroidManifest.xml) eklendiğini doğrulayın. Ayrıca, düzen veya özel tema düzgün yapılandırılmamışsa Toolbar bu hataya neden olabilir.