टैबबार छवियां किस आकार की होनी चाहिए?

Question

मेरे पास 100 टैब आकार के एक आइकन हैं।

मैंने 2013 के ऐप्पल के मानव इंटरफ़ेस दिशानिर्देशों पर जाँच की और यह कहता है कि छवि का आकार 30x30/ होना चाहिए 60x60।

लेकिन जैसे ही टैब बार कंट्रोलर की ऊंचाई 50 होती है, मैंने इमेज का साइज़ कम रखा 50x50।

अब, जब मैं इस परियोजना को चलाता हूं, तो मुझे नीचे बदसूरत डिजाइन दिखाई देता है:

किसी भी विचार मुझे किस आकार की छवियों का उपयोग करना चाहिए ताकि डिजाइन सही हो जाए?

नोट: मैं पाठ भी नहीं लिख रहा हूँ (जैसे घर, खोज, आदि)। टैब बटन का टेक्स्ट इमेज में ही है।

Comments

"मेरे पास 100 आकार के टैबबार के लिए आइकन हैं।" क्या आपका मतलब 50 था?

— Blaszard

Answer 1

30x30 अंक है, जिसका अर्थ है 30px @ 1x, 60px @ 2x, कहीं बीच में नहीं। इसके अलावा, टैब के शीर्षक को छवि में एम्बेड करने के लिए यह एक महान विचार नहीं है - आपके पास इस तरह के बहुत खराब पहुंच और स्थानीयकरण परिणाम हैं।

Comments

मुझे यह पता था, लेकिन अगर मैं खुद ही छवि के अंदर शब्दांकन चाहता हूं, तो क्या किया जा सकता है?

— फहीम पारकर

यदि आप एक पूरी तरह से कस्टम UITabBar बनाने की योजना बना रहे हैं, तो आपको मानक UIKit संस्करण के लिए छवियों का उपयोग करने के बजाय, शायद ऐसा ही करना चाहिए। अन्यथा मुझे विश्वास है कि आप सबसे निचले हिस्से में बहरेपन से बचे रहेंगे।

— गरेटमुर्रे

हम्म्म जो हो रहा है ... मैं डिज़ाइनर से टैब बार के लिए डिफॉल्ट इमेज बनाने के लिए कहूँगा। वे सेब सपोर्ट करते हैं ... धन्यवाद

— फहीम पारकर

धन्यवाद दोस्त। यह एक बड़ी और त्वरित मदद थी।

— फेलिप

Answer 2

Apple मानव इंटरफ़ेस दिशानिर्देशों के अनुसार :

@ 1x: लगभग 25 x 25 (अधिकतम: 48 x 32)

@ 2x: लगभग 50 x 50 (अधिकतम: 96 x 64)

@ 3x: 75 x 75 के बारे में (अधिकतम: 144 x 96)

Comments

जी हाँ, यह सही है सेब के अनुसार। अधिक जानकारी के लिए नीचे दिए गए लिंक की जाँच करें developer.apple.com/library/ios/documentation/UserExperience/…

— चमथ जीवन

शांत, लेकिन बाहर धुंधला होने के साथ एक छवि को इतना छोटा करना कैसे संभव है?

— नीएक्स

के बाद से 23x23 (वर्ग के लिए) या 25x25 (परिपत्र छवियों के लिए) (करने के लिए अद्यतन किया गया है developer.apple.com/ios/human-interface-guidelines/... )

— SEOP यून

Seop, आप नवीनतम जानकारी को प्रतिबिंबित करने के लिए मेरे उत्तर को अपडेट कर सकते हैं। लेकिन ध्यान दिया कि मैंने "25 के बारे में" कहा था, इसलिए मैं 23 के बारे में विचार करूंगा कि सीमा के बारे में।

— rsc

ज्यादातर मैं घर के आइकन के रूप में स्क्वायर ग्लिफ़ का उपयोग करता हूं, ख़ुशी @SeopYoon ने बताया। मैं टैब बार आइकन आकार के लिए 23x23 का उपयोग करूंगा।

— वाणिज्य दूतावास

Answer 3

नवीनतम Apple मानव इंटरफ़ेस दिशानिर्देशों के अनुसार:

पोर्ट्रेट ओरिएंटेशन में, टैब बार आइकन टैब शीर्षक के ऊपर दिखाई देते हैं। लैंडस्केप ओरिएंटेशन में, आइकन और शीर्षक अगल-बगल दिखाई देते हैं। डिवाइस और ओरिएंटेशन के आधार पर, सिस्टम एक नियमित या कॉम्पैक्ट टैब बार प्रदर्शित करता है। आपके ऐप में दोनों आकारों के लिए कस्टम टैब बार आइकन शामिल होने चाहिए।

मैं आपको पूर्ण अवधारणा को समझने के लिए उपरोक्त लिंक का उपयोग करने का सुझाव देता हूं। क्योंकि सेब अद्यतन यह नियमित अंतराल में दस्तावेज है

Comments

इसे और अधिक बढ़ाया जाना चाहिए, क्योंकि यह उनकी नई दिशानिर्देश है।

— सीन यूं

निर्देश के लिए कि एक नियमित या कॉम्पैक्ट टैब बार के लिए अलग आइकन कैसे सेट किया जाए, इस प्रतिक्रिया को देखें: stackoverflow.com/questions/49492229/tab-bar-icon-size/…

— मारीना ýerný

Answer 4

संदर्भ: https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/ Ishttps: //developer.apple.com/ios/human-interface-guidelines/gustom-icons /] ।

तो 50x50 आकार एक अच्छा विकल्प है।

Comments

यह एक @ 2x संकल्प पर है। जो कि 1x के लिए लगभग 25px है। फ़ाइलों का नामकरण करते समय कुछ ध्यान में रखें

— रेने पॉट

Answer 5

मेरे अभ्यास के अनुसार, मैं मानक आईपैड टैब बार आइटम आइकन के लिए 40 x 40 का उपयोग करता हूं, रेटिना के लिए 80 X 80।

Apple संदर्भ से। https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1

यदि आप एक बार आइकन बनाना चाहते हैं जो दिखता है कि यह iOS 7 आइकन परिवार से संबंधित है, तो इसे खींचने के लिए बहुत पतले स्ट्रोक का उपयोग करें। विशेष रूप से, एक 2-पिक्सेल स्ट्रोक (उच्च रिज़ॉल्यूशन) विस्तृत आइकनों के लिए अच्छा काम करता है और 3-पिक्सेल स्ट्रोक कम विस्तृत आइकनों के लिए अच्छी तरह से काम करता है।

आइकन की दृश्य शैली के बावजूद, निम्न आकारों में टूलबार या नेविगेशन बार आइकन बनाएं:

44 x 44 पिक्सेल के बारे में 22 x 22 पिक्सेल (मानक रिज़ॉल्यूशन) आइकन की दृश्य शैली के बावजूद, निम्न आकारों में एक टैब बार आइकन बनाएं:

मानक रिज़ॉल्यूशन के लिए लगभग 50 x 50 पिक्सेल (96 x 64 पिक्सेल अधिकतम) लगभग 25 x 25 पिक्सेल (48 x 32 पिक्सेल अधिकतम)

Answer 6

कृपया कोड का उपयोग करने से पहले सबसे पहले अंगूठे !!! एक छवि बनाएं जो प्रत्येक आइटम के लिए पूरे टैब बार आइटम को पूरी तरह से कवर करती है। टैब बार आइटम बटन के रूप में आपके द्वारा बनाई गई छवि का उपयोग करने के लिए यह आवश्यक है। सुनिश्चित करें कि ऊंचाई / चौड़ाई अनुपात प्रत्येक टैब बार आइटम के समान हो। फिर:

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