एंड्रॉइड-स्टाइल ऐप बनाना

अक्सर, बहुत लोकप्रिय एंड्रॉइड एप्लिकेशन का इंटरफ़ेस किसी न किसी तरह से डिज़ाइन किया गया है और ऐसा लगता है कि अधिकांश डेवलपर्स ने उपयोगकर्ता इंटरफ़ेस दिशानिर्देशों के बारे में भी नहीं सुना है। लेकिन सिफारिशों का पालन करना बहुत मुश्किल नहीं है, और कभी-कभी यह विकास के समय को भी बचाता है। यह दिखाने के लिए कि यह वास्तव में ऐसा है, मैं एक उदाहरण के रूप में थोड़ा उन्नत "हैलो वर्ल्ड" का उपयोग करके एप्लिकेशन इंटरफ़ेस को डिज़ाइन करने के कई प्रमुख तत्वों से गुजरने का सुझाव देता हूं।

यह लेख शुरुआती Android डेवलपर्स के लिए है। स्रोत कोड को अंत में लिंक से डाउनलोड किया जा सकता है, और स्पष्टीकरण चिंता का विषय होगा:

• पॉपअप मेनू बनाएँ
• डिजाइन विंडो सेटिंग्स
• नौ-पैच ग्राफिक्स के साथ काम करें

प्रारंभिक तैयारी

1. AdvancedHelloWorld एप्लिकेशन बनाएं। उन प्रोग्रामों के लिए जो एक निश्चित OS संस्करण की विशिष्ट कार्यक्षमता का उपयोग नहीं करते हैं, मैं BuildTarget - Android 1.6 और Min SDK संस्करण स्थापित करना पसंद करता हूं - 3. इस मामले में, स्क्रीन घनत्व द्वारा संसाधनों की जुदाई काम करेगी (एचडीपीआई, mdpi, ldpi पर), लेकिन यह भी Android उपयोगकर्ताओं १.५ अलग नहीं रहेगा।



2. Res / लेआउट / main.xml में हम एक बटन "हैलो कहें" बनाते हैं।

3. अद्भुत एंड्रॉइड एसेट स्टूडियो प्रोजेक्ट का उपयोग करके, हम एक अच्छा आइकन बनाते हैं।

4. एक बटन पर क्लिक करने के लिए एक हैंडलर के रूप में, हम एक कोड लिखते हैं जो "हैलो वर्ल्ड" वाक्यांश के साथ एक टोस्ट संदेश प्रदर्शित करता है।

Android एसेट स्टूडियो के बारे में

एक खुला स्रोत ऑनलाइन परियोजना जिसका मूल्य बहुत कठिन है। आपको एप्लिकेशन आइकन (लॉन्चर आइकन), मेनू आइकन, बुकमार्क और अलर्ट जल्दी से बनाने की अनुमति देता है। काम करने के लिए, वह क्रोम 6 के लिए पूछता है, अन्य ब्राउज़रों में कुछ तत्व काम नहीं करते हैं। लेख के अंत में लिंक।

संसाधन नोट

मेरी राय में, सबसे तर्कसंगत विकल्प एचडीपीआई उपकरणों के लिए ग्राफिक्स के एक अलग सेट का उपयोग करना है और अन्य सभी के लिए एक अलग है, एक प्रस्ताव में जिसे mdpi के लिए अनुकूलित किया गया है। हां, हम ldpi के अनुकूल होने की क्षमता का उपयोग नहीं करते हैं, लेकिन ये डिवाइस अपेक्षाकृत कम हैं और आप एक "स्नैक" के लिए पूर्ण अनुकूलन छोड़ सकते हैं, जब सभी ग्राफिक डिज़ाइन पहले ही बस चुके होते हैं। किसी भी स्थिति में, चूंकि हमने एंड्रॉइड 1.5 के लिए समर्थन की घोषणा की, ड्रॉएबल फ़ोल्डर में उपयोग किए जाने वाले सभी ग्राफिक तत्व होने चाहिए। बाकी वैकल्पिक है।

पॉपअप मेनू

मेनू का वर्णन किया गया है, जैसा कि आप अनुमान लगा सकते हैं, xml फ़ाइलों में। हमारी मुख्य विंडो के लिए एक ऐसी फ़ाइल बनाते हैं: res \ menu \ main_menu.xml



<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@+id/menu_preferences"

android:icon="@drawable/ic_menu_preferences"

android:title="@string/menu_preferences" />

<item android:id="@+id/menu_theme"

android:icon="@drawable/ic_menu_theme"

android:title="@string/menu_theme" />

<item android:id="@+id/menu_close"

android:icon="@drawable/ic_menu_close_clear_cancel"

android:title="@string/menu_close" />

</menu>











दो अंक:

यदि मेनू आइटम की संख्या 6 से अधिक है, तो 6 और निम्नलिखित आइटम एक अतिरिक्त मेनू में संयुक्त हैं। एक उदाहरण एक मानक ब्राउज़र में देखा जा सकता है।

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





मेनू बनाते समय, पहली बात यह है कि मानक सेट में आइकनों की तलाश करें। वे सभी स्थापित SDK - android-sdk-windows \ platform \ android-1.6 \ data \ res \ drawable \ ic_menu _ * में हैं। Png

सेटिंग्स और निकास आइकन का चयन करना मुश्किल नहीं है, लेकिन, उदाहरण के लिए, मैंने एक मेनू आइटम "थीम" जोड़ा, जो पृष्ठभूमि को काले से सफेद और पीछे से स्विच करेगा। यहां तक ​​कि कंप्यूटर ग्राफिक्स में बहुत बुनियादी कौशल होने के बावजूद, इस बिंदु के लिए एक खाका खींचना मुश्किल नहीं है। उदाहरण के लिए:



उसी Android एसेट स्टूडियो का उपयोग करके, आपको एक बहुत अच्छा आइकन मिलेगा:





मेनू आइटम का वास्तविक निर्माण onCreateOptionsMenu में होता है:

@Override

public boolean onCreateOptionsMenu(Menu menu) {

MenuInflater inflater = getMenuInflater();

inflater.inflate(R.menu.main_menu, menu);

return true;

}









प्रसंस्करण पर क्लिक करें - onOptionsItemSelected:



@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.menu_preferences:

...

default:

return super.onOptionsItemSelected(item);

}

}



सेटिंग्स विंडो को डिज़ाइन करना

और फिर, एक्सएमएल में मुख्य काम। Res \ xml में settings.xml बनाएँ:



<?xml version="1.0" encoding="utf-8"?>

<PreferenceScreen

xmlns:android="http://schemas.android.com/apk/res/android">

<PreferenceCategory

android:title="@string/settings_general">

<CheckBoxPreference

android:key="center_message"

android:title="@string/center_message"

android:summary="@string/center_message_summary"

android:persistent="true"

android:defaultValue="true"/>

<EditTextPreference

android:key="text_message"

android:title="@string/text_message"

android:summary="@string/text_message_summary"

android:defaultValue="@string/hello_world"

android:persistent="true"/>

</PreferenceCategory>

</PreferenceScreen>









समर्थित सेटिंग्स का सेट बहुत विस्तृत नहीं है, लेकिन यह बुनियादी जरूरतों को कवर करेगा। "लगातार" झंडे को सेट करके, हमें बचाने / लोड करने के लिए सांकेतिक शब्दों में बदलना भी नहीं है। बस साझा मूल्य से वांछित मूल्य पढ़ें:



SharedPreferences settings = PreferenceManager.getDefaultSharedPreferences(context);

boolean bCenter = settings.getBoolean("center_message", true);







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

सेटिंग्स विंडो के लिए, अपने स्वयं के प्राथमिकताएं वंशज वर्ग बनाया जाता है, जिसके निर्माण में हमारे xml प्रोटोटाइप को पढ़ा जाता है:

addPreferencesFromResource(R.xml.settings);







वरीयता शैली के लिए मुश्किल है। AndroidManifest.xml में संबंधित टैग के लिए आप निश्चित रूप से, android: theme = "@ android: style / Theme.Light" जोड़ सकते हैं, लेकिन नेस्टेड सेटिंग्स के लिए आपको गड़बड़ मिलती है। Stackoverflow पर इस समस्या की चर्चा इस विचार पर आती है कि, सामान्य स्थिति में, यह सब कुछ छोड़ देना बेहतर है, जैसा कि एक काली पृष्ठभूमि पर है।

नौ-पैच ग्राफिक्स के साथ काम करें

नौ-पैच एक मानक विधि है जो आपको संकल्प और स्क्रीन के आकार से स्वतंत्र एंड्रॉइड एप्लिकेशन में ग्राफिक्स बनाने की अनुमति देती है। वास्तव में, यह एकल-फलक उपयोगिता फ्रेम के साथ एक नियमित पीएनजी छवि है। इस फ्रेम के साथ सही ढंग से काम करने के लिए, SDK में एक विशेष ड्रा 9patch उपयोगिता शामिल है। शीर्ष और बाएँ भाग पर एक काली रेखा 1 पिक्सेल मोटी होती है, जो उस क्षेत्र को दोहराती है जिसे छवि को बड़ा किया जाता है। दाईं और नीचे की रेखाएं "कार्य क्षेत्र" को परिभाषित करती हैं। एक नियमित बटन के लिए, उदाहरण के लिए, यह पाठ के लिए जगह है।

शब्दों में, 9patch की क्षमताओं को समझाना काफी कठिन है, इसलिए प्रयोग करना और देखना बेहतर है, खासकर जब 9patch क्षेत्रों को संपादित करने के बाद आप तुरंत पूर्वावलोकन विंडो में परिणाम देख सकते हैं। यहाँ संपादक में मानक बटन की पृष्ठभूमि है:



प्रशिक्षण के लिए, हम AdvancedHelloWorld गैर-मानक में बटन बनाएंगे, सामान्य बटन, दबाए गए राज्य और फोकस में बटन के लिए 3 9patch चित्र तैयार किए हैं। बल्कि थकाऊ, लेकिन महान अवसरों को खोलता है।

एक महत्वपूर्ण बिंदु: सभी 9patch चित्रों में एक्सटेंशन .9.png होना चाहिए, अन्यथा हमारे एप्लिकेशन को पता नहीं चलेगा कि छवि को 9patch के नियमों के अनुसार बढ़ाया जा सकता है। एक और सीमा है: संसाधन फ़ोल्डर में एक ही नाम और एक्सटेंशन .png और .9.png (उदाहरण के लिए, button.png और button.9.png संघर्ष) के साथ एक ही समय में दो फाइलें नहीं हो सकती हैं क्योंकि उनके पास वास्तव में एक ही संसाधन नाम - बटन है) ।

उपयोगी लिंक

Googlecode पर Android संपत्ति स्टूडियो: http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html

सबमेनस बनाने का आधिकारिक दस्तावेज: http://developer.android.com/guide/topics/ui/menus.html##ububu

सेटिंग्स प्रकारों की पूरी सूची के साथ एक उदाहरण: http://www.kaloer.com/android-preferences

स्टाइल सेटिंग की समस्या: http://stackoverflow.com/questions/2615528/preferenceactivity-and-theme-not-applying



स्रोत कोड