Berapa ukuran gambar TabBar?

Saya memiliki ikon untuk tabBar berukuran 100.

Saya memeriksanya di Panduan Antarmuka Manusia Apple tahun 2013 dan dikatakan bahwa ukuran gambar harus 30x30/ 60x60.

Tetapi karena tinggi pengontrol tab bar adalah 50, saya mempertahankan ukuran gambarnya 50x50.

Sekarang, ketika saya menjalankan proyek, saya melihat desain jelek di bawah ini:

Tahu gambar ukuran apa yang harus saya gunakan agar desainnya sempurna?

Catatan: Saya juga tidak menulis teks (mis. Beranda, Penelusuran, dll). Teks dari tombol tab ada di gambar itu sendiri.

30x30 adalah poin, yang berarti 30px @ 1x, 60px @ 2x, bukan di antaranya. Selain itu, bukan ide bagus untuk menyematkan judul tab ke dalam gambar — Anda akan mendapatkan hasil aksesibilitas dan pelokalan yang sangat buruk seperti itu.

Menurut Panduan Antarmuka Manusia Apple :

@ 1x: sekitar 25 x 25 (maks: 48 x 32)

@ 2x: sekitar 50 x 50 (maks: 96 x 64)

@ 3x: sekitar 75 x 75 (maks: 144 x 96)

Menurut Panduan Antarmuka Manusia Apple terbaru :

Dalam orientasi potret, ikon bilah tab muncul di atas judul tab. Dalam orientasi lanskap, ikon dan judul muncul berdampingan. Bergantung pada perangkat dan orientasinya, sistem menampilkan bilah tab biasa atau kompak. Aplikasi Anda harus menyertakan ikon bilah tab khusus untuk kedua ukuran.

Saya menyarankan Anda untuk menggunakan tautan di atas untuk memahami konsep lengkapnya. Karena apel memperbarui dokumennya secara berkala

Referensi: https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/[https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons /] .

Jadi ukuran 50x50 adalah pilihan yang bagus.

Menurut praktik saya, saya menggunakan 40 x 40 untuk ikon item tab bar iPad standar, 80 X 80 untuk retina.

Dari referensi Apple. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1

Jika Anda ingin membuat ikon batang yang terlihat seperti terkait dengan keluarga ikon iOS 7, gunakan goresan yang sangat tipis untuk menggambarnya. Secara khusus, goresan 2-piksel (resolusi tinggi) bekerja dengan baik untuk ikon yang detail dan guratan 3-piksel berfungsi dengan baik untuk ikon yang kurang detail.

Terlepas dari gaya visual ikon, buat ikon bilah alat atau bilah navigasi dalam ukuran berikut:

Sekitar 44 x 44 piksel Sekitar 22 x 22 piksel (resolusi standar) Terlepas dari gaya visual ikon, buat ikon bilah tab dalam ukuran berikut:

Sekitar 50 x 50 piksel (maksimum 96 x 64 piksel) Sekitar 25 x 25 piksel (maksimum 48 x 32 piksel) untuk resolusi standar

Jempol dulu sebelum menggunakan kode tolong !!! Buat gambar yang menutupi seluruh item tab bar untuk setiap item. Ini diperlukan untuk menggunakan gambar yang Anda buat sebagai tombol item tab bar. Pastikan untuk membuat rasio tinggi / lebar sama untuk setiap item tab bar juga. Kemudian:

UITabBarController *tabBarController = (UITabBarController *)self;
UITabBar *tabBar = tabBarController.tabBar;
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];
UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];

int x,y;

x = tabBar.frame.size.width/4 + 4; //when doing division, it may be rounded so that you need to add 1 to each item; 
y = tabBar.frame.size.height + 10; //the height return always shorter, this is compensated by added by 10; you can change the value if u like.

//because the whole tab bar item will be replaced by an image, u dont need title
tabBarItem1.title = @"";
tabBarItem2.title = @"";
tabBarItem3.title = @"";
tabBarItem4.title = @"";

[tabBarItem1 setFinishedSelectedImage:[self imageWithImage:[UIImage imageNamed:@"item1-select.png"] scaledToSize:CGSizeMake(x, y)] withFinishedUnselectedImage:[self imageWithImage:[UIImage imageNamed:@"item1-deselect.png"] scaledToSize:CGSizeMake(x, y)]];//do the same thing for the other 3 bar item