एप्लीकेशन स्टाइलिंग पार्ट वन

सब कुछ ठीक चल रहा है, आप अपने शानदार (अच्छी तरह से, किसी के) एप्लिकेशन को सफलतापूर्वक लिखते हैं, आप उन्हें बाजार पर भी प्रकाशित करते हैं, लेकिन एक समस्या है: पूरा इंटरफ़ेस बहुत उबाऊ और नीरस है, काली पृष्ठभूमि (कुछ गांवों में सफेद है) और मानक तत्व बहुत अधिक हैं थक गया ...

ठीक है, या दूसरे रास्ते पर चलते हैं - आपके पास अपना कार्यालय है वासु पुपनिक्ख वैश्विक नेटवर्क में कुछ गतिविधि के साथ (हैम्स्टर्स को बेचना कहते हैं), और (हॉरर!) आपके पास पूरी साइट है। साइट, हाँ, साइट सुंदर है, हरा / लाल / पीला, आदि। और इस साइट के लिए एक ग्राहक कार्यक्रम है, और हम अपने आवेदन को साइट के रंगों में रंगना चाहते हैं।

यह लेख इस बारे में है कि आप अपने एप्लिकेशन को विशिष्ट रंगों के लिए कैसे स्टाइल कर सकते हैं, और यह एंड्रॉइड के रंगों तक सीमित नहीं है

इस विषय पर रूसी भाषा की थोड़ी जानकारी है, हम भंडार को फिर से भर देंगे।

1. एक रंग योजना चुनें

यहां सब कुछ स्पष्ट प्रतीत होता है - हम वही चुनते हैं जो हम चाहते हैं। लेख में हम "एक हरियाली कूलर" जैसी टिप्पणियों से बचने के लिए पूरे रंग सरगम ​​का पालन करेंगे।

1.1। रंगों की सूची तैयार करना

विंडो बैकग्राउंड: # 370903 - नॉन-डिस्ट्रैक्टिंग डार्क रेड
पाठ: # F0E68C खाकी (सामान्य रूप से पीला)
बटन: # 7FA40E से # B7EF8E तक हरे रंग की ढाल
प्रगति बार: ग्रेड # 2E6FC8 से # 759BFB तक - ठीक है, जहां नीले रंग के बिना?

2. अच्छा, किसने कहा कि वे वहाँ गए थे?

हम अपनी प्रक्रिया शुरू करते हैं

2.1। बोरिंग सिद्धांत

जैसा कि आपने अनुमान लगाया था, हम सुपर बाइक का आविष्कार नहीं करेंगे, क्योंकि एंड्रॉइड में लंबे समय तक सब कुछ लागू किया गया है। एक आवेदन में अपनी खुद की शैली हो सकती है और सीधे एंड्रॉइड को संकेत दे सकता है कि ये शैली क्या लागू होगी। शैली एक नियमित एक्सएमएल संसाधन है (ठीक है, न केवल एक्सएमएल, बल्कि इस लेख के ढांचे में हम इसके बारे में बात करेंगे), जिसे आपके आवेदन के Res / मान फ़ोल्डर में संग्रहीत किया जाना चाहिए।

2.2। लेखन शैली

हम फाइल रेस / मान / थीम बनाते हैं। xml (फ़ाइल का नाम अप्रकाशित है, आप कम से कम तार में लिख सकते हैं। xml) और उसमें निम्नलिखित लिख सकते हैं:

<?xml version="1.0" encoding="utf-8"?> <resources> <style name="HabraTheme" parent="@android:style/Theme.Black"> </style> </resources> 

यहां, <style> टैग का उपयोग करते हुए, हम HabraTheme नामक एक नई शैली बनाते हैं और Theme.Black सिस्टम स्टाइल (वंशानुक्रम वैकल्पिक) से इनहेरिट करते हैं। अब, शैली के आगे के परीक्षण के लिए, हमें इसे AndroidManifest.x.com में गतिविधि (या संपूर्ण अनुप्रयोग) के लिए पंजीकृत करने की आवश्यकता है:

 <activity ... android:theme="@style/HabraTheme" > ... </activity> 

शैली को पूरे आवेदन पर लागू करने के लिए, इसे <गतिविधि> टैग में नहीं, बल्कि <एप्लिकेशन> टैग में पंजीकृत करना आवश्यक है।

खिड़की की पृष्ठभूमि :
हम <style> के अंदर एक नया <आइटम> टैग पैरामीटर नाम के साथ टैग करते हैं = "android: windowBackground" और सामग्री # 370903:

 <style name="HabraTheme" parent="@android:style/Theme.Black"> <item name="android:windowBackground">#370903</item> </style> 

वास्तव में, आइटम को सीधे आइटम टैग में लिखना बुरा रूप माना जाता है, उन्हें रंगों की एक अलग सूची में रखना बेहतर होता है, लेकिन यहां अंतरिक्ष की बचत होती है।

पाठ :
पैरामीटर नाम के साथ <आइटम> टैग = "android: textColor" और सामग्री # F0E68C:

 <item name="android:textColor">#F0E68C</item> 

बटन :
बटनों के साथ, सबसे कठिन हिस्सा यह है कि हमें रेज / ड्रा करने योग्य फ़ोल्डर में 4 और अतिरिक्त फाइलें बनानी होंगी:

hbutton_normal.xml

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <corners android:radius="12px" /> <gradient android:angle="90" android:endColor="#B7EF8E" android:startColor="#7FA40E" android:type="linear" /> <padding android:bottom="7px" android:left="4px" android:right="4px" android:top="7px" /> </shape> 

यहां हम एक बटन आकार बनाने के लिए XML-Drawable का उपयोग करते हैं। बटन पाठ के लिए हमारी ढाल, 12 पिक्सेल गोलाई और पैडिंग सेट करें

hbutton_focused.xml

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <corners android:radius="12px" /> <gradient android:angle="90" android:endColor="#79C83F" android:startColor="#7FA40E" android:type="linear" /> <padding android:bottom="7px" android:left="4px" android:right="4px" android:top="7px" /> </shape> 

और यह केंद्रित बटन की स्थिति है (दबाया नहीं गया!), हम बस थोड़ा सा बदलाव करते हैं

hbutton_pressed.xml

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <corners android:radius="12px" /> <gradient android:angle="270" android:endColor="#79C83F" android:startColor="#7FA40E" android:type="linear" /> <padding android:bottom="7px" android:left="4px" android:right="4px" android:top="7px" /> <stroke android:width="2px" android:color="#52B10C" /> </shape> 

यह एक दबाए गए बटन का एक आंकड़ा है, जो रंग बदलने के अलावा, हम एक फ्रेम (स्ट्रोक) को 2 पिक्सेल मोटी और साथ ही हरे रंग में जोड़ते हैं

यह इन आंकड़ों को एक बटन में संयोजित करता है:

hbutton.xml

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/hbutton_focused" android:state_focused="true"></item> <item android:drawable="@drawable/hbutton_pressed" android:state_pressed="true"></item> <item android:drawable="@drawable/hbutton_normal"></item> </selector> 

यहां हम संकेत करते हैं कि यह आंकड़ा किस राज्य का है।

अब theme.xml पर वापस जाएं और एक नई शैली बनाएं:

 <style name="HabraThemeButton" parent="@android:style/Widget.Button"> <item name="android:background">@drawable/hbutton</item> </style> 

और HabraTheme में बटन के लिए शैली निर्दिष्ट करें:

 <item name="android:buttonStyle">@style/HabraThemeButton</item> 

हम प्रोग्रेसबार को लागू नहीं करेंगे, यह आपका होमवर्क होगा :)

हमारा अंतिम परिणाम:


PS शैलियों के अध्ययन में, Android- sdk / platform / platform के पते पर स्थित मूल Android संसाधन - * / डेटा / रिस / मान / थीम / xml वास्तव में मदद करते हैं