Berapa ukuran gambar TabBar?

99

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:

masukkan deskripsi gambar di sini

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.

Fahim Parkar
sumber
1
"Saya memiliki ikon untuk tabBar berukuran 100." Apakah maksud Anda 50?
Blaszard

Jawaban:

112

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.

garrettmurray
sumber
3
Saya tahu ini, tetapi jika saya ingin kata-kata di dalam gambar itu sendiri, lalu apa yang bisa dilakukan?
Fahim Parkar
Jika Anda berencana membuat UITabBar yang benar-benar kustom, Anda mungkin harus melakukannya, daripada menggunakan gambar untuk versi UIKit standar. Kalau tidak, saya yakin Anda akan ditinggalkan dengan deadspace di bagian bawah.
garrettmurray
hmmm yang terjadi ... Saya akan meminta desainer untuk membuat gambar default untuk tab bar mereka mendukung Apple ... terima kasih
Fahim Parkar
Terima kasih, sobat. Ini adalah bantuan yang besar dan cepat.
Felipe
208

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)

rsc
sumber
Ya, Ini benar Menurut apel. Periksa tautan di bawah ini untuk informasi lebih lanjut developer.apple.com/library/ios/documentation/UserExperience/…
Chamath Jeevan
keren, tapi bagaimana mungkin membuat gambar begitu kecil tanpa keburaman?
niX
2
Sejak itu diperbarui menjadi 23x23 (untuk kotak) atau 25x25 (untuk gambar melingkar) ( developer.apple.com/ios/human-interface-guidelines/… )
Seop Yoon
Seop, Anda bisa memperbarui jawaban saya untuk mencerminkan info terbaru. Tapi perhatikan bahwa saya mengatakan "sekitar 25", jadi saya akan menganggap 23 berada di dalam tentang jangkauan.
rsc
Kebanyakan saya menggunakan mesin terbang persegi seperti ikon beranda, dengan senang hati @SeopYoon menunjukkannya. Saya akan menggunakan 23x23 untuk ukuran ikon tab bar.
Kontra Bulaquena
44

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.

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

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

Mihir Oza
sumber
2
Ini harus lebih banyak disukai, karena ini adalah pedoman baru mereka.
Seop Yoon
Untuk petunjuk cara menyetel ikon berbeda untuk bilah tab biasa atau ringkas, lihat respons ini: stackoverflow.com/questions/49492229/tab-bar-icon-size/…
Marián Černý
2

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

firelyu
sumber
-3

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
James
sumber