Aracılığıyla paylaş

.NET MAUI uygulama projesine uygulama simgesi ekleme

  • Makale

Her uygulama, onu temsil eden bir logo simgesine sahiptir ve bu simge genellikle birden çok yerde görünür. Örneğin, iOS'ta uygulama simgesi Giriş ekranında ve ayarlar, bildirimler ve arama sonuçları gibi sistem genelinde ve App Store'da görünür. Android'de uygulama simgesi, eylem çubuğunda, bildirimlerde ve Google Play Store'da olduğu gibi sistem genelinde başlatıcı simgesi olarak görünür. Windows'ta, uygulama simgesi başlat menüsünde, görev çubuğunda, uygulamanın kutucuğunda ve Microsoft Store'daki uygulama listesinde görünür.

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) uygulama projesinde, uygulama projenizde tek bir konumda bir uygulama simgesi belirtilebilir. Derleme zamanında bu simge otomatik olarak hedef platform ve cihaz için doğru çözünürlüğe yeniden boyutlandırılabilir ve uygulama paketinize eklenebilir. Bu, uygulama simgesini platform temelinde el ile çoğaltmak ve adlandırmak zorunda kalmamasını sağlar. Varsayılan olarak, bit eşlem (vektör olmayan) görüntü biçimleri .NET MAUI tarafından otomatik olarak yeniden boyutlandırılamaz.

.NET MAUI uygulama simgesi, Ölçeklenebilir Vektör Grafikleri (SVG) dosyaları da dahil olmak üzere standart platform görüntü biçimlerinden herhangi birini kullanabilir.

Önemli

.NET MAUI, SVG dosyalarını Taşınabilir Ağ Grafiği (PNG) dosyalarına dönüştürür. Bu nedenle, .NET MAUI uygulama projenize bir SVG dosyası eklerken, bu dosyaya .png uzantılı XAML veya C# ile başvurulmalıdır. SVG dosyasına tek başvuru proje dosyanızda olmalıdır.

Simgeyi değiştirme

.NET MAUI projenizde, derleme eylemine MauiIcon sahip görüntü, uygulamanız için kullanılacak simgeyi belirler. Bu, proje dosyanızda öğe olarak <MauiIcon> gösterilir. Uygulamanız için yalnızca bir simge tanımlanmış olabilir. Sonraki <MauiIcon> öğeler yoksayılır.

Uygulamanız tarafından tanımlanan simge, dosyayı öznitelik olarak Include belirterek tek bir görüntüden oluşabilir:

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.svg" />
</ItemGroup>

Yalnızca proje dosyasında tanımlanan ilk <MauiIcon> öğe .NET MAUI tarafından işlenir. Simge olarak farklı bir dosya kullanmak istiyorsanız, önce var olan simgeyi projenizden silin ve ardından yeni simgeyi projenizin Resources\AppIcon klasörüne sürükleyerek ekleyin. Visual Studio, derleme eylemini MauiIcon otomatik olarak olarak ayarlar ve proje dosyanızda buna karşılık gelen <MauiIcon> bir öğe oluşturur.

Not

Uygulama simgesi, uygulama projenizin diğer klasörlerine de eklenebilir. Ancak bu senaryoda derleme eyleminin Özellikler penceresinde el ile olarak ayarlanması MauiIcongerekir.

Android kaynak adlandırma kurallarına uymak için uygulama simgesi dosya adları küçük harfli olmalı, harf karakteriyle başlayıp bitmeli ve yalnızca alfasayısal karakterler veya alt çizgi içermelidir. Daha fazla bilgi için bkz . developer.android.com uygulama kaynaklarına genel bakış .

Simge dosyasını değiştirdikten sonra Visual Studio'da projeyi temizlemeniz gerekebilir. Projeyi temizlemek için, Çözüm Gezgini bölmesinde proje dosyasına sağ tıklayın ve Temizle'yi seçin. Uygulamayı test ettiğiniz hedef platformdan da kaldırmanız gerekebilir.

Dikkat

Projeyi temizlemez ve uygulamayı hedef platformdan kaldırmazsanız yeni simgenizi göremeyebilirsiniz.

Simgeyi değiştirdikten sonra Platforma özgü yapılandırma bilgilerini gözden geçirin.

Oluşturulan simgesi

Alternatif olarak, uygulama simgesi biri arka planı, diğeri ön planı temsil eden iki görüntüden oluşabilir. Simgeler PNG dosyalarına dönüştürüldüğünden, oluşturulan uygulama simgesi ilk olarak arka plan resmiyle, genellikle desen veya düz renk görüntüsüyle ve ardından ön plan görüntüsüyle katmanlanır. Bu durumda, Include özniteliği simge arka plan görüntüsünü, Foreground özniteliği ise ön plan görüntüsünü temsil eder:

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" />
</ItemGroup>

Android'de, ön plan görüntüsünü uygulama simgesine sığacak şekilde yeniden ölçeklendirmek için isteğe bağlı olarak bir ForegroundScale öznitelik belirtilebilir. Daha fazla bilgi için bkz . Uyarlamalı başlatıcı.

Önemli

Öğe için <MauiIcon> arka plan görüntüsü (Includeöznitelik) belirtilmelidir. Ön plan görüntüsü (ForegroundFile öznitelik) isteğe bağlıdır.

Temel boyutu ayarlama

.NET MAUI, simgenizi birden çok platform ve cihazda kullanır ve her platform ve cihaz için simgeyi yeniden boyutlandırmaya çalışır. Uygulama simgesi, uygulamanızın mağaza girişi veya bir cihaza yüklendikten sonra uygulamayı temsil etmek için kullanılan simge gibi farklı amaçlar için de kullanılır.

Simgenizin temel boyutu görüntünün temel yoğunluğuna sahiptir ve diğer tüm boyutların türetilmiş olduğu 1,0 ölçek faktörüdür. PNG dosyası gibi bit eşlem tabanlı bir uygulama simgesinin temel boyutunu belirtmezseniz, görüntü yeniden boyutlandırılamaz. SVG dosyası gibi vektör tabanlı bir uygulama simgesi için temel boyutu belirtmezseniz, görüntüde belirtilen boyutlar temel boyut olarak kullanılır. Vektör görüntüsünün yeniden boyutlandırılmasını durdurmak için özniteliğini Resize olarak falseayarlayın.

Aşağıdaki şekilde, temel boyutun bir görüntüyü nasıl etkilediği gösterilmektedir:

.NET MAUI için temel boyutun bir uygulama simgesini nasıl etkilediği.

Önceki şekilde gösterilen işlem şu adımları izler:

  • A: Resim .NET MAUI simgesi olarak eklenir ve 210x260 boyutlarına sahiptir ve taban boyutu 424x520 olarak ayarlanır.
  • B: .NET MAUI, görüntüyü 424x520 taban boyutuyla eşleşecek şekilde otomatik olarak ölçeklendirir.
  • C: Farklı hedef platformlar görüntünün farklı boyutlarını gerektirdiğinden, .NET MAUI görüntüyü otomatik olarak temel boyuttan farklı boyutlara ölçeklendirir.

İpucu

Simge olarak bir SVG görüntüsü kullanın. SVG görüntüleri daha büyük boyutlara ölçeklendirebilir ve yine de net ve temiz görünebilir. PNG veya JPG görüntüsü gibi bit eşlem tabanlı görüntüler, ölçeklendirildiğinde bulanık görünür.

Temel boyut özniteliğiyle BaseSize="W,H" belirtilir; burada W simgenin genişliği ve H simgenin yüksekliğidir. Aşağıdaki örnek temel boyutu ayarlar:

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.png" BaseSize="128,128" />
</ItemGroup>

Aşağıdaki örnek, vektör tabanlı bir görüntünün otomatik olarak yeniden boyutlandırılıp yeniden boyutlandırılamını durdurur:

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.svg" Resize="false" />
</ItemGroup>

Arka planı yeniden renklendir

Uygulama simgesini oluştururken kullanılan arka plan resmi saydamlık kullanıyorsa, özniteliği üzerinde <MauiIcon>belirtilerek Color yeniden renklendirilebilir. Aşağıdaki örnek, uygulama simgesinin arka plan rengini kırmızıya ayarlar:

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.svg" Color="#FF0000" />
</ItemGroup>

Renk değerleri, şu biçim kullanılarak onaltılık olarak belirtilebilir: #RRGGBB veya #AARRGGBB. değeri RR kırmızı kanalı, GG yeşil kanalı, BB mavi kanalı ve AA alfa kanalını temsil eder. Onaltılık değer yerine veya PaleVioletRedgibi Red adlandırılmış bir .NET MAUI rengi kullanabilirsiniz.

Dikkat

Uygulama simgeniz için bir arka plan rengi tanımlamazsanız, iOS ve Mac Catalyst'te arka plan ayrımlı olarak kabul edilir. Bu, App Store Connect doğrulaması sırasında bir hataya neden olur ve uygulamanızı karşıya yükleyemezsiniz.

Ön planı yeniden renklendir

Uygulama simgesi bir arka plan () görüntüsünden ve ön plan (IncludeForegroundFile) görüntüsünden oluşuyorsa, ön plan görüntüsü renklenebilir. Ön plan görüntüsünü renklendirmek için özniteliğine TintColor sahip bir renk belirtin. Aşağıdaki örnek ön plan görüntüsünü sarı renk tonlarına çıkarır:

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>

Renk değerleri, şu biçim kullanılarak onaltılık olarak belirtilebilir: #RRGGBB veya #AARRGGBB. değeri RR kırmızı kanalı, GG yeşil kanalı, BB mavi kanalı ve AA alfa kanalını temsil eder. Onaltılık değer yerine veya PaleVioletRedgibi Red adlandırılmış bir .NET MAUI rengi kullanabilirsiniz.

Platform başına farklı bir simge kullanma

Platform başına farklı simge kaynakları veya ayarları kullanmak istiyorsanız, öğeye <MauiIcon> özniteliğini ekleyin Condition ve belirli bir platform için sorgu yapın. Koşul karşılanırsa, <MauiIcon> öğe işlenir. .NET MAUI tarafından yalnızca ilk geçerli <MauiIcon> öğe kullanılır, bu nedenle ilk olarak tüm koşullu öğeler bildirilmelidir ve ardından koşul içermeyen varsayılan <MauiIcon> bir öğe bildirilmelidir. Aşağıdaki XML, Windows için belirli bir simgeyi ve diğer tüm platformlar için geri dönüş simgesini bildirmeyi gösterir:

<ItemGroup>
    <!-- App icon for Windows -->
    <MauiIcon Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'"
              Include="Resources\AppIcon\backicon.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="#40FF00FF" />

    <!-- App icon for all other platforms -->
    <MauiIcon Include="Resources\AppIcon\appicon.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>

Koşuldaki değeri aşağıdaki değerlerden biriyle değiştirerek hedef platformu ayarlayabilirsiniz:

  • 'ios'
  • 'maccatalyst'
  • 'android'
  • 'windows'

Örneğin, Android'i hedefleyen bir koşul olacaktır Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'".

Platforma özgü yapılandırma

Proje dosyası uygulama simgesinin hangi kaynaklardan oluşturulduğunu bildirse de, yine de bu uygulama simgelerine başvuruda bulunarak tek tek platform yapılandırmalarını güncelleştirmeniz gerekir. Aşağıdaki bilgiler bu platforma özgü ayarları açıklar.

Android'in kullandığı simge Platformlar\Android\AndroidManifest.xml konumundaki Android bildiriminde belirtilir. Düğüm, manifest/application simgesini tanımlamak için iki öznitelik içerir: android:icon ve android:roundIcon. Bu iki özniteliğin değerleri sırasıyla ve @mipmap/{name}_roundbiçimindedir@mipmap/{name}. için {name} değeri, .NET MAUI proje dosyasının <MauiIcon> öğesinden, özellikle özniteliği tarafından tanımlanan dosya adından Include , yolu veya uzantısı olmadan türetilir.

Kaynağı Resources\AppIcon\healthapp.png simge olarak tanımlayan aşağıdaki örneği göz önünde bulundurun:

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\healthapp.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>

Dönüştürülen ad, yolu veya uzantısı olmayan kaynaktır healthapp. ve android:roundIcon değerleri android:icon sırasıyla ve @mipmap/healthapp_roundolacaktır@mipmap/healthapp. Android bildirimi, simge olarak eşleşecek healthapp şekilde güncelleştirilmelidir:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:allowBackup="true" android:icon="@mipmap/healthapp" android:roundIcon="@mipmap/healthapp_round" android:supportsRtl="true"></application>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
</manifest>

İpucu

Simge için yeni görüntü dosyaları oluşturmak yerine, .NET MAUI şablonu tarafından sağlanan iki görüntü dosyasını değiştirmeniz yeterlidir: Arka plan için Resources\AppIcon\appicon.svg ve ön plan için Resources\AppIcon\appiconfg.svg .

Uyarlamalı başlatıcı

.NET MAUI, Uygulama simgesinden Android 8.0 ve üzeri sürümlerde uyarlamalı başlatıcı simgesi oluşturmayı destekler. Uyarlamalı başlatıcı simgeleri, dairesel ve kare gibi farklı cihaz modellerinde çeşitli şekiller olarak görüntülenebilir. Uyarlamalı simgeler hakkında daha fazla bilgi için bkz . Android geliştirici kılavuzu: Uyarlamalı simgeler.

Uyarlamalı başlatıcı simgeleri, arka plan katmanı, ön plan katmanı ve isteğe bağlı ölçeklendirme değeri kullanılarak oluşturulmuş simgelerdir. Daha fazla bilgi için, Oluşturulan simge bölümüne bakın. Oluşturulan simge tanımlanırsa, özniteliği belirtilerek ForegroundFile uyarlamalı bir başlatıcı simgesi oluşturulur. Aşağıdaki XML, uyarlamalı başlatıcı simgesi olarak kullanılan bir simge tanımlamayı gösterir:

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" ForegroundScale="0.65" Color="#512BD4" />
</ItemGroup>

ForegroundScale Ön plan görüntüsünü uygulama simgesine sığacak şekilde yeniden ölçeklendirmek için isteğe bağlı olarak özniteliği belirtilebilir. Yüzde değeri olduğundan 0,65 %65 olarak çevrilir.