Uygulama simgeleri oluşturma (Görünümler)

Jetpack Compose uygulamasıarrow_forward

Bu sayfada, görünüm tabanlı düzenlere özgü uygulama simgeleri oluşturma ve kullanma hakkında bilgiler yer almaktadır. Uygulama simgeleri oluşturma hakkında daha kapsamlı bilgi edinmek için Uygulama simgeleri oluşturma başlıklı makaleyi inceleyin. Bu makalede, önerdiğimiz kullanıcı arayüzü çerçevesi ele alınmaktadır.

İşlem çubuğu veya sekme simgesi oluşturma

Görünüme dayalı düzenler için işlem çubuğu ve sekme simgeleri oluşturmak üzere Image Asset Studio'yu kullanın.

İşlem çubuğu simgeleri, işlem çubuğunda yer alan ve ayrı işlem öğelerini temsil eden grafik öğeleridir. Daha fazla bilgi için İşlem Ekleme ve İşleme, Uygulama Çubuğu - Materyal Tasarım {:.external} ve İşlem Çubuğu Tasarımı başlıklı makaleleri inceleyin.

Sekme simgeleri, çok sekmeli bir arayüzde tek sekmeleri temsil etmek için kullanılan grafik öğeleridir. Her sekme simgesinin iki durumu vardır: seçilmemiş ve seçilmiş. Daha fazla bilgi için Sekmelerle Kaydırma Görünümleri Oluşturma ve Sekmeler - Material Design başlıklı makaleleri inceleyin.

Image Asset Studio, simgeleri res/drawable-<density>/ dizinlerindeki uygun konumlara yerleştirir.

Eski Android sürümlerini destekliyor olsanız bile işlem çubuğu ve sekme simgeleri için Material Design stilini kullanmanızı öneririz. Materyal tasarım kullanıcı arayüzünüzü daha eski platform sürümlerine sunmak için appcompat ve diğer destek kitaplıklarını kullanın.

Image Asset Studio'ya alternatif olarak, işlem çubuğu ve sekme simgeleri oluşturmak için Vector Asset Studio'yu kullanabilirsiniz. Vektör çizilebilir öğeler, basit simgeler için uygundur ve uygulamanızın boyutunu küçültebilir.

Image Asset Studio'yu açtıktan sonra aşağıdaki adımları uygulayarak bir işlem çubuğu veya sekme simgesi ekleyebilirsiniz:

1. Simge Türü alanında İşlem Çubuğu ve Sekme Simgeleri'ni seçin.

2. Öğe Türü'nü seçin ve ardından aşağıdaki alanda öğeyi belirtin:

   • Clip Art (Küçük Resim) alanında düğmeyi tıklayın.

     Simge Seç iletişim kutusunda bir materyal simgesi seçin ve Tamam'ı tıklayın.

   • Yol alanında, resmin yolunu ve dosya adını belirtin. İletişim kutusu kullanmak için ... seçeneğini tıklayın.

   • Metin alanına bir metin dizesi yazın ve bir yazı tipi seçin.

   Simge, sağ taraftaki Kaynak Öğesi alanında ve sihirbazın alt kısmındaki önizleme alanında görünür.

3. İsteğe bağlı olarak adı ve görüntüleme seçeneklerini değiştirin:

   • Ad: Varsayılan adı kullanmak istemiyorsanız yeni bir ad yazın. Sihirbazın alt kısmındaki bir hatayla belirtildiği gibi, bu kaynak adı projede zaten varsa üzerine yazılır. Ad yalnızca küçük harf, alt çizgi ve rakam içerebilir.

   • Kırp: Kaynak öğedeki simge grafiği ile kenarlık arasındaki boşluğu ayarlamak için Evet'i seçin. Bu işlem, en boy oranını korurken şeffaf alanı kaldırır. Kaynak öğeyi değiştirmeden bırakmak için Hayır'ı seçin.

   • Doldurma: Kaynak öğe doldurmasını dört tarafta da ayarlamak istiyorsanız kaydırma çubuğunu hareket ettirin. % -10 ile % 50 arasında bir değer seçin. Kırp'ı da seçerseniz önce kırpma işlemi yapılır.

   • Tema: HOLO_LIGHT veya HOLO_DARK'ı seçin. Alternatif olarak, Renk Seç iletişim kutusunda bir renk belirtmek için ÖZEL'i seçin ve Özel renk alanını tıklayın.

   Image Asset Studio, simgeyi şeffaf bir kare içinde oluşturur. Bu nedenle, kenarlarda biraz dolgu bulunur. Dolgu, standart gölge simge efekti için yeterli alan sağlar.

4. İleri'yi tıklayın.

5. İsteğe bağlı olarak kaynak dizinini değiştirin:

   • Res Directory: Resim öğesini eklemek istediğiniz kaynak grubu kümesini seçin: src/main/res, src/debug/res, src/release/res veya kullanıcı tanımlı bir kaynak grubu kümesi. Ana kaynak grubu, hata ayıklama ve yayın dahil olmak üzere tüm derleme varyantları için geçerlidir. Hata ayıklama ve yayın kaynak grupları, ana kaynak grubunu geçersiz kılar ve derlemenin bir sürümü için geçerli olur. Hata ayıklama kaynağı grubu yalnızca hata ayıklama için kullanılır. Yeni bir kaynak grubu tanımlamak için Dosya > Proje Yapısı > app > Build Types'ı (Derleme Türleri) seçin. Örneğin, bir beta kaynak grubu tanımlayabilir ve sağ alt köşesinde "BETA" metnini içeren bir simge sürümü oluşturabilirsiniz. Daha fazla bilgi için Derleme Varyantlarını Yapılandırma başlıklı makaleyi inceleyin.

   Çıkış Dizinleri alanında, Proje penceresinin Proje Dosyaları görünümünde görünecek resimler ve klasörler gösterilir.

6. Son'u tıklayın.

   Resim Öğesi Stüdyosu, farklı yoğunluklar için drawable klasörlerindeki resimleri ekler.

Koddaki bir resim kaynağına referans verme

Normalde kodunuzda bir resim kaynağına genel bir şekilde başvurabilirsiniz ve uygulamanız çalıştığında, cihaza bağlı olarak ilgili resim otomatik olarak gösterilir:

• Çoğu durumda, resim kaynaklarını XML kodunda @drawable veya Java kodunda Drawable olarak adlandırabilirsiniz.

  Örneğin, aşağıdaki düzen XML kodu, çizilebilir öğeyi bir ImageView içinde gösterir:

  <ImageView
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:src="@drawable/myimage" />
  

  Aşağıdaki Java kodu, resmi Drawable olarak alır:

  Kotlin

  val drawable = resources.getDrawable(R.drawable.myimage, theme)

  Java

  Resources res = getResources();
  Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

  getResources() yöntemi, aktiviteler, parçalar, düzenler ve görünümler gibi kullanıcı arayüzü nesneleri için geçerli olan Context sınıfında bulunur.

• Uygulamanızda Destek Kitaplığı kullanılıyorsa app:srcCompat ifadesiyle XML kodundaki bir resim kaynağına başvurabilirsiniz. Örneğin:

  <ImageView
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      app:srcCompat="@drawable/myimage" />
  

Resim kaynaklarına yalnızca ana iş parçacığından erişebilirsiniz.

Projenizin res/ dizininde bir resim kaynağı bulunduktan sonra, kaynak kimliğini kullanarak Java kodunuzdan veya XML düzeninizden buna başvurabilirsiniz. Aşağıdaki Java kodu, drawable/myimage.png kaynağını kullanmak için bir ImageView ayarlar:

findViewById<ImageView>(R.id.myimageview).apply {
    setImageResource(R.drawable.myimage)
}

ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

Daha fazla bilgi için Uygulama kaynaklarınıza erişme başlıklı makaleyi inceleyin.