👨🏻‍🎓 🤣 💇 बड़ी स्क्रीन के लिए विंडोज फोन एप्लीकेशन को अपनाना 👨🏾‍💼 🤶🏽 🌺

एक हफ्ते पहले, नोकिया टैबलेट फोन बिक्री पर दिखाई दिए। GDR3 अंकन के साथ विंडोज फोन ऑपरेटिंग सिस्टम को अपडेट करना 4-कोर प्रोसेसर और फुलएचडी तक के स्क्रीन रिज़ॉल्यूशन का समर्थन करना शुरू कर दिया। यह इन विशेषताओं के साथ है कि नोकिया ने अपना नया प्रमुख लूमिया 1520 जारी किया है। लेकिन निर्माता ने केवल पिक्सेल स्क्रीन पर पिक्सेल घनत्व नहीं बढ़ाया, जैसा कि एचटीसी और सैमसंग के एंड्रॉइड ओएस पर प्रतिस्पर्धी मॉडल में किया था। नोकिया ने 6 इंच के स्क्रीन विकर्ण के साथ एक डिवाइस जारी किया है, जो गैलेक्सी नोट टैबलेट के संस्थापक के तीसरे संस्करण से थोड़ा आगे निकल गया है। स्क्रीन का आकार और डिवाइस एक ही समय में मंत्रमुग्ध और डरावना है। लेकिन, गीत को छोड़ते हुए, हम यह पता लगाने की कोशिश करेंगे कि हम, डेवलपर्स, को इसके साथ कैसे रहना चाहिए।

इसलिए, नए फोन के लिए आवेदन को स्वीकार करते समय विचार करने के लिए मुख्य बिंदु:
- स्क्रीन पहलू अनुपात 16: 9;
- फुलएचडी स्क्रीन रिज़ॉल्यूशन;
- स्क्रीन का आकार 6 इंच।
अब अधिक विस्तार से और क्रम में।

16: 9

16: 9 स्क्रीन 15: 9 स्क्रीन से थोड़ा अधिक लम्बी हैं। सिद्धांत रूप में, स्मार्टफोन का यह पहलू अनुपात नए से बहुत दूर है। 1280x720 के संकल्प के साथ स्क्रीन के लिए समर्थन एक साल पहले विंडोज फोन 8 के आगमन के साथ पेश किया गया था। ऐसी स्क्रीन वाले स्मार्टफोन पर WP7 के तहत लिखे गए प्रोग्राम, हालांकि, अनुपात बनाए रखने के लिए, सिस्टम शीर्ष पर एक काली पट्टी छोड़ देता है। आखिरी क्षण तक, इस तरह के स्क्रीन रिज़ॉल्यूशन वाला एकमात्र उपकरण सैमसंग ATIV S था, और WP में सैमसंग की बाजार हिस्सेदारी दी ( नवंबर 2013 के रूप में लगभग 1.8%), आप इस संकल्प का समर्थन करने में बहुत समय व्यतीत नहीं करेंगे।

लेकिन फुलएचडी-रिज़ॉल्यूशन और लूमिया 1520 और लूमिया 1320 डिवाइस के आगमन के साथ, 16: 9 के आस्पेक्ट रेशियो के साथ, अब हमें संभलकर चलना होगा, क्योंकि विंडोज फोन के बाजार में नोकिया की हिस्सेदारी 90% है, इसके अलावा, यह एक नया प्रमुख है।

डेवलपर के लिए इसका क्या मतलब है? पहले, WP7 और WP8 उपयोगकर्ताओं के बहुमत को कवर करने के लिए, यह WP7 के लिए संकलित एप्लिकेशन के एक संस्करण के लिए पर्याप्त था। इसके अलावा, अगर आपको WP8 में दिखाई देने वाली विशेष कार्यक्षमता की आवश्यकता नहीं थी (और बहुत कम अंतर थे), तो दो प्लेटफार्मों के लिए सॉफ्टवेयर विकसित करने में कोई मतलब नहीं था। अब, लम्बी स्क्रीनों का समर्थन करने के लिए, विंडोज फोन 8 के तहत एप्लिकेशन को फिर से स्थापित करना आवश्यक है, क्योंकि केवल इस मामले में प्रकट में आप सिस्टम को बता सकते हैं कि आवेदन 16: 9 पहलू अनुपात के लिए तैयार है। आपको 800x480 (720p स्क्रीन के लिए) के "सामान्य" रिज़ॉल्यूशन के 150% के पैमाने पर नए ग्राफिक संसाधन तैयार करने की आवश्यकता है और सुनिश्चित करें कि तत्वों का लेआउट एक लम्बी स्क्रीन पर सामंजस्यपूर्ण दिखता है।

FullHD

ऐसा लगता है कि सब कुछ सरल है:
- हमें Application.Current.Host.Content.ScaleFactor संपत्ति का उपयोग करके स्केल मान मिलता है जिसे WP8 में जाना जाता है;
- हम जांचते हैं कि क्या यह 225 (1080/480 = 2.25) के बराबर है;
- लाभ! ..

लेकिन वहाँ यह था। क्योंकि हमें 225 नहीं, बल्कि 150 मिलते हैं। "क्या? ..", आप कहते हैं, और आप बिल्कुल सही होंगे। चूँकि 150% तक ज़ूम करने के लिए जाँच करना एकमात्र तरीका था जिसके द्वारा यह निर्धारित किया गया था कि यह किस स्क्रीन पर चल रहा है और उसी के अनुसार तत्वों को रखा गया है, नए सॉफ्टवेयर के साथ पुराने सॉफ्टवेयर की अनुकूलता के लिए, यह ठीक 16: 9 स्क्रीन पर वापस आने का निर्णय लिया गया था। यह पैमाना।

लेकिन निराशा न करें: जीडीआर 3 की रिहाई के साथ, डेवलपर्स के पास स्क्रीन के भौतिक संकल्प को निर्धारित करने का एक नया अवसर है:

var resolution = (Size)DeviceExtendedProperties.GetValue("PhysicalScreenResolution");

नोट: GDR3 से पहले WP8 के संस्करणों पर, PhysicalScreenResolution पैरामीटर के साथ GetValue पद्धति को कॉल करना अपवाद को फेंक देगा। आपको इसके लिए तैयार रहने की आवश्यकता है, लेकिन आप यह सुनिश्चित कर सकते हैं कि आप 1280x720 स्क्रीन के साथ काम कर रहे हैं। यदि परिणाम प्राप्त किया गया था, तो मूल्य _resolution.Wid आपको पिक्सेल में स्क्रीन की सटीक चौड़ाई देगा: 720 या 1080 (हम अभी भी केवल 16: 9 स्क्रीन के बारे में बात कर रहे हैं)। अब आप इस पर ध्यान केंद्रित कर सकते हैं और रेखापुंज संसाधनों को सही ढंग से लोड कर सकते हैं। वैसे, उन्हें 225% के पैमाने पर तैयार करना न भूलें।

पुनश्च याद रखें कि एक्सएएमएल लेआउट के साथ, यहां तक कि फुलएचडी रिज़ॉल्यूशन के लिए, सभी आकार और इंडेंट्स को डब्ल्यूवीजीए रिज़ॉल्यूशन (480x800) के लिए निर्दिष्ट किया जाना चाहिए।

PPS यदि आपके पास अभी तक GDR3 पर एक नया डिवाइस नहीं है, लेकिन आप पहले से ही आवेदन में DeviceExtendedProperties.GetValue ("PhysicalScreenResolution") पर कॉल करने के लिए समर्थन का परीक्षण करना चाहते हैं, तो आप अपने फोन पर डेवलपर्स एप्लिकेशन के लिए पूर्वावलोकन स्थापित कर सकते हैं और इसे फोन पर डेवलपर्स के लिए अपडेट स्थापित करने की अनुमति दे सकते हैं। उसके बाद, आपको फोन अपडेट में जाने और अपडेट की जांच करने की आवश्यकता है। और हां, विकास के लिए फोन को अनलॉक करना होगा।

6 इंच

खैर, अब सबसे अच्छी बात विशाल स्क्रीन के लिए समर्थन है।
सबसे पहले, हमें यह निर्धारित करने की आवश्यकता है कि हम किसके साथ काम कर रहे हैं। GDR3 में, एक और गुण दिखाई दिया है जो हमें डिवाइस की विशेषताओं के बारे में बताता है:

 var screenDpiX = (double)DeviceExtendedProperties.GetValue("RawDpiX"); var screenDpiY = (double)DeviceExtendedProperties.GetValue("RawDpiY");

यह स्क्रीन का ऊर्ध्वाधर और क्षैतिज पिक्सेल घनत्व है। घनत्व और भौतिक रिज़ॉल्यूशन (पिछले अनुभाग देखें) को जानते हुए, स्क्रीन की चौड़ाई और ऊंचाई की गणना करना आसान है, और फिर पाइथागोरस प्रमेय की ओर मुड़ें:

 var screenSize = Math.Sqrt(Math.Pow(resolution.Width / screenDpiX, 2) + Math.Pow(resolution.Height / screenDpiY, 2));

यहां हमें वांछित 6 इंच मिलता है। सवाल उठता है: क्या एक बड़ी स्क्रीन माना जाता है? अपने डेवलपर पृष्ठ पर, नोकिया किसी को "बड़ी" स्क्रीन माना जाने के लिए 5 इंच से अधिक के विकर्ण के साथ विचार करने की पेशकश करता है। हम उनकी राय पर भरोसा करते हैं (वे जान सकते हैं कि हम कौन से उपकरण जल्द देखेंगे):

 var isBigScreen = (screenSize > 5.0);

जब हमें पता चलता है कि हम एक बड़ी स्क्रीन के साथ काम कर रहे हैं, तो हमें कंटेंट को थोड़ा अनुकूलित करना होगा।

यदि आप इंटरफ़ेस में टाइल का उपयोग करते हैं, तो आप उन्हें स्टार्ट स्क्रीन के समान, दो के बजाय तीन कॉलम में बना सकते हैं। तत्वों और फोंट के आयाम स्क्रीन पर अधिक सामग्री फिट करने के लिए इसे थोड़ा छोटा करते हैं। ऐसा करने के लिए, शेष xaml फ़ाइलों में संदर्भित संसाधनों में स्थिरांक का एक सेट घोषित करें, और जब एक बड़ी स्क्रीन का पता लगाया जाता है, तो इन स्थिरांक को छोटे लोगों के साथ बदलें।

उदाहरण

ScreenNormal.xaml

 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:system="clr-namespace:System;assembly=mscorlib" mc:Ignorable="d"> <system:Double x:Key="SmallThumbSize">75</system:Double> <system:Double x:Key="SmallIconFontSize">75</system:Double> <system:Double x:Key="ListNameFontSize">32</system:Double> <system:Double x:Key="ListDescFontSize">20</system:Double> <Thickness x:Key="ListItemMargin">0,10,0,10</Thickness> </ResourceDictionary>

ScreenBig.xaml

 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:system="clr-namespace:System;assembly=mscorlib" mc:Ignorable="d"> <system:Double x:Key="SmallThumbSize">56</system:Double> <system:Double x:Key="SmallIconFontSize">56</system:Double> <system:Double x:Key="ListNameFontSize">24</system:Double> <system:Double x:Key="ListDescFontSize">15</system:Double> <Thickness x:Key="ListItemMargin">0,6,0,6</Thickness> </ResourceDictionary>

App.xaml

 <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Styles/ScreenNormal.xaml" /> </ResourceDictionary.MergedDictionaries>

App.xaml.cs

  if (Platform.PlatformHelper.IsBigScreen) { var appTheme = new ResourceDictionary { Source = new Uri("/[projectname];component/Styles/ScreenBig.xaml", UriKind.Relative) }; Resources.MergedDictionaries.Add(appTheme); }

स्रोत कोड के साथ पूरी प्रक्रिया डेवलपर्स के लिए नोकिया वेबसाइट पर वर्णित है । यह पर्याप्त विस्तार से बताता है कि आप वास्तव में आवेदन को कैसे अनुकूलित कर सकते हैं, लेकिन मैं खुद से थोड़ा जोड़ूंगा।

सबसे पहले, आपको बड़ी स्क्रीन के लिए तत्वों के आकार को कम करने की कितनी आवश्यकता है?
रिज़ॉल्यूशन विशिष्ट विचार लेख में, Nokia डेवलपर्स मूल आकार को 0.711 से गुणा करने की सलाह देते हैं। वे इस तथ्य से आगे बढ़ते हैं कि डब्ल्यूएक्सजीए स्क्रीन पर स्केल 1.6 है, और फुलएचडी स्क्रीन के लिए स्केल 2.25 है। इससे हम अनुपात प्राप्त करते हैं: 1.6 / 2.25 = 0.711।

इस पद्धति में, मैं इस तथ्य से चिंतित हूं कि स्क्रीन के भौतिक आकार को ध्यान में नहीं रखा गया है। एचटीसी टाइटन और फिर लूमिया 920 के उपयोगकर्ता के रूप में, मैंने लगभग 4.5 इंच के स्क्रीन आकार का उपयोग किया है। इसके आधार पर, हम स्क्रीन विकर्णों के अनुपात की गणना 4.5 / 6 = 0.75 करते हैं। छोटी स्क्रीन के लिए, जैसे कि लूमिया 620 (3.8 इंच) में, हम 5 इंच: 3.8 / 5 = 0.76 की संभावित स्क्रीन के साथ अनुपात की गणना करते हैं। इस प्रकार, मानक के रूप में 3.8-4.5 इंच (100%) के विकर्ण के साथ स्क्रीन लेना आवश्यक है, और 5-6 इंच की स्क्रीन के लिए, आकार को 25% कम करें।

वैसे, न केवल तत्वों और फोंट के आकार को बदलना न भूलें, बल्कि मार्जिन (मार्जिन), अन्यथा तत्व अलग-अलग उड़ जाएंगे।
दूसरे, स्थिरांक का प्रतिस्थापन, जैसा कि ऊपर दिए गए उदाहरण में बताया गया है, डेटाटेम्पलेट्स के लिए अच्छी तरह से काम करता है जो सूची प्रदर्शित होने पर उपयोग किए जाते हैं।

गैर-सूची आइटम के पैरामीटर जो हम आमतौर पर शैलियों में वर्णित करते हैं। हम शैलियों को संसाधन शब्दकोशों (संसाधन छाया) में जोड़ते हैं, जिन्हें App.xaml में संदर्भित किया गया है। यदि ऐसी शैलियों में आप आकार के स्थिरांक का उल्लेख करते हैं, और फिर इन स्थिरांक को प्रतिस्थापित करते हैं, तो आप पाएंगे कि कुछ भी नहीं बदला है। इसका कारण यह है कि स्टाइल ऑब्जेक्ट तब बनाया गया था जब शब्दकोश और स्थिरांक का प्रतिस्थापन अब इसमें आयामों को प्रभावित नहीं करता है। स्टैक स्थिरांक को शैली से वस्तुओं तक स्वयं।

लेकिन यह सब नहीं है। यदि आप एक निरंतरता के लिए एक संदर्भ निर्दिष्ट करने का प्रयास करते हैं, जो कि एप्लिकेशन लॉन्च के बहुत शुरुआत में बनाए गए तत्व के आकार (उदाहरण के लिए, मुख्य विंडो का शीर्षक बार) है, तो आप पाएंगे कि स्थिरांक के प्रतिस्थापन ने किसी भी तरह से आकार को प्रभावित नहीं किया। तत्व स्थिरांक के प्रतिस्थापन से पहले बनने में कामयाब रहे। इस स्थिति में, आप स्क्रीनसेलेज हेल्पर वर्ग बना सकते हैं, जिसमें आप उन गुणों की एक श्रृंखला को परिभाषित करते हैं जो आकार का वर्णन करते हैं, और स्क्रीन तत्व इन गुणों से बंधे होते हैं।

अभ्यास से

अंत में, मैं एक उदाहरण दिखाना चाहता हूं कि ये टिप्स हमारे मेल में से एक में कैसे लागू किए गए थे। हब हब के आवेदन:

लेखों की सूची

यहाँ क्या हुआ:

लेख पाठ