एसड Android में 9-पैच छवियां बनाना और उनका उपयोग करना



क्षतिग्रस्त एसडी कार्ड की मरम्मत (7)

अधिकांश उदाहरण 9-पैच छवि बनाने के बारे में बात करते हैं, लेकिन कार्यान्वयन विवरण आमतौर पर उच्च स्तर पर छोड़ दिए जाते हैं।

ऊपर निक का पद - अच्छे 9-पैच ट्यूटोरियल के साथ जो एक कार्यशील परियोजना डाउनलोड फ़ाइल प्रदान करता है, दिन बचाया।

यहां मुख्य कार्यान्वयन विवरण हैं जो मेरे लिए काम करते थे (एक बार जब आपके पास 9-पैच छवि जाने के लिए तैयार है) :

  1. नाम के साथ ड्रॉबल का संदर्भ दें, लेकिन शामिल न करें। 9. पीएनजी (ग्रहण में ऑटो-पूर्ण इस का ध्यान रखेगा)

  2. सुनिश्चित करें कि आपके पास मुख्य / ड्रॉबल फ़ोल्डर के तहत केवल 1 छवि है (प्रत्येक डीपीआई फ़ोल्डर के लिए संस्करण नहीं)

  3. छवि का उपयोग करके निर्दिष्ट किया जाना चाहिए: पृष्ठभूमि, नहीं: src (यह मुझे थोड़ी देर के लिए अटक गया)

    android:background="@drawable/splash_logo"

  4. सुनिश्चित करें कि इसमें मौजूद छवि और लेआउट का उपयोग किया जा रहा है:

    android:layout_width="fill_parent"
    android:layout_height="fill_parent"

मैंने हाल ही में 9-पैच छवियों के बारे में सुना है। मुझे पता है कि इसकी 9 टाइलें खिंची हुई हैं। मैं इसके बारे में अधिक जानना चाहता हूं।

  • मैं 9-पैच छवि कैसे बना सकता हूं?

    क्या कोई उपकरण है? क्या मैं इसे AndroidSDK या कोड से बना सकता हूं?

  • नियमित पींग पर 9-पैच के मुख्य लाभ?

    (यह स्क्रीन के अनुसार गतिशील रूप से / स्वचालित रूप से फैलने योग्य है?)


Answer #1

चरण 1 , चूंकि आप अभी तक परिचित नहीं हैं, इसलिए पहले खेलने के लिए एक बड़ी छवि xxxhdpi तैयार करें।

चरण 2 , वह छवि वांछित विस्तार योग्य क्षेत्र कम होना चाहिए (अनावश्यक / बार-बार रंग भाग को हटाकर) क्योंकि 9-पैच कोई ऐसी चीज "कम" नहीं करता है, लेकिन छवि का "विस्तार" करें।

मैं व्यक्तिगत रूप से इसे बदलने के लिए ImageMagick कमांड लाइन टूल का उपयोग करता हूं, जैसे:

convert -trim 'my_image.png' png32:my_image_trim.png #trim extra transparent surrounded image
rm lala*; convert my_image_trim.png -crop 310  +repage  +adjoin  png32:lala%02d.png #cut redundant/repeat center part
convert +append lala02.png lala05.png png32:out_right.png #append left/right images side by side
convert -resize 144x144\! out_right.png png32:my_image.png #resize to the desired dpi

परिवर्तित होने पर एक नुकसान होता है: मुझे png32 के साथ उपसर्ग करना चाहिए, अन्यथा काली 9-पैच छवि मिल जाएगी, यह धागा देखें।

चरण 3 , छवि को एंड्रॉइड स्टूडियो में कॉपी करें, फिर राइट-क्लिक करें और मेनू आइटम "9-पैच फ़ाइल बनाएं ..." चुनें। A .9.png नई छवि समान छवि नाम के साथ बनाई जाएगी। अब केवल मूल छवि को हटा सकते हैं। बैकअप के लिए नाम बदलने के लिए रिफ्लेक्टर के साथ खेलने के दौरान सावधानी बरतें क्योंकि यह XML छवि आईडी का भी नाम बदल देगा, और आपको आश्चर्य होगा कि XML से 9-पैच छवि अभी भी काम क्यों नहीं कर रही है, गैर-9-पैच छवि का संदर्भ देते हुए।

चरण 4 , बाईं और शीर्ष 2 काली रेखाएँ एक विस्तार योग्य आयताकार क्षेत्र बनाती हैं, जबकि दाईं और नीचे की 2 काली लाइनें एक पाठ आयताकार क्षेत्र बनाती हैं।

जैसे-जैसे पाठ बढ़ेगा आपके घोषित विस्तार योग्य क्षेत्र पर आपकी छवि का आकार बढ़ता जाएगा। जबकि पाठ क्षेत्र का मतलब है कि पाठ केवल उस क्षेत्र में अनुमति देता है।

आपको साधारण उपयोग के लिए स्क्रैच से काली बिंदी / रेखाएँ नहीं खींचनी हैं, 4 काले रंग की लाइनें पहले से ही उस छवि के ऊपर, बाईं, नीचे, दाईं ओर मौजूद हैं, अगर आपकी 9-पैच छवि एंड्रॉइड स्टूडियो द्वारा बनाई गई है। यदि आप उस लाइनों को खींचना नहीं देख सकते हैं तो "ज़ूम इन" बड़ा करें।

2 काली रेखाएँ, ऊर्ध्वाधर और क्षैतिज, दोनों की मूल स्थिति एक विस्तार योग्य क्षेत्र घोषित करती है:

  • बाईं ऊर्ध्वाधर रेखा की मूल स्थिति ऊपरी बाएँ से नीचे बाईं ओर है
  • शीर्ष क्षैतिज रेखा की मूल स्थिति ऊपरी बाएं से ऊपर दाईं ओर होती है।

2 काली रेखाओं की मूल स्थिति, ऊर्ध्वाधर और क्षैतिज, दोनों एक पाठ क्षेत्र घोषित करते हैं:

  • दाएं खड़ी रेखा की मूल स्थिति ऊपरी दाएं से नीचे दाईं ओर होती है।
  • नीचे की क्षैतिज रेखा की मूल स्थिति नीचे बाईं ओर नीचे दाईं ओर है।

ऊपर की ओर काली रेखाओं की मूल स्थिति है, इससे पहले कि आप उस रेखा की स्थिति और अंत स्थिति को समायोजित करने के लिए लंबाई को संकीर्ण करने के लिए खींचें।

दोनों विस्तार योग्य और पाठ क्षेत्र अलग हो सकते हैं जो आपकी आवश्यकताओं पर निर्भर करता है। लेकिन आम तौर पर विस्तार योग्य क्षेत्र को टेक्स्ट क्षेत्र के बराबर या उससे कम होना चाहिए , एक क्लासिक उदाहरण चैट बबल इमेज होगा:

ऊपर की छवि में समान शीर्ष और नीचे की काली रेखाएं चौड़ाई हैं, लेकिन दाईं काली रेखा बाईं रेखा से अधिक है, जिसका अर्थ यह भी है कि पाठ लगातार न्यूनतम आकार या विस्तारित आकार में नीचे वक्र के आधे तक रहता है। और यह केवल पाठ क्षेत्र के शरीर में विस्तार करता है।

अब आप 9-पैच के दो लाभों को जानेंगे: नीचे और दाहिनी रेखा मिलकर एक पाठ क्षेत्र बनाते हैं जो छवि वक्र के बाहर पाठ को कभी भी अतिप्रवाहित नहीं करता है ! और यह भी परिभाषित किया गया है कि पाठ क्षेत्र के किस हिस्से को छवि का विस्तार करने के लिए जिम्मेदार है जैसे कि पाठ बढ़ रहा है, जबकि वक्र को स्केलिंग के बिना रखें

होवर लाइन एक्स, वाई पोजिशन को पिक्सल्स में देखने में सक्षम होगी, यह दोनों लाइनों को बराबर या कम पोजीशन में मापने में मदद करती है।

आपको खींचते समय रेखा की स्थिति याद रखनी चाहिए, क्योंकि बाईं रेखा दाईं ओर खींच सकती है, और दाईं रेखा बाईं ओर खींच सकती है, और आप खो सकते हैं कि कौन सी रेखा विस्तार योग्य रेखा है और कौन सी रेखा पाठ रेखा है।

2 महत्वपूर्ण चेकबॉक्स हैं जिन्हें आपको टिक करना चाहिए, अर्थात "पैच दिखाएं" और "खराब पैच दिखाएं" चेकबॉक्स।

"खराब पैच दिखाएं" चेकबॉक्स में, यदि आप विस्तार योग्य क्षेत्र खींचते हैं, लेकिन एक सीधी रेखा के बजाय अपनी छवि की घुमावदार रेखा को कवर करते हैं, तो यह आपको चेतावनी देने के लिए उस क्षेत्र को लाल के रूप में चिह्नित करेगा। आप उस लाल चेतावनी को खारिज करने के लिए अपनी लाइन को कम कर सकते हैं, या बस इसे अनदेखा कर सकते हैं। ध्यान रखें कि, लाल चेतावनी भ्रामक हो सकती है जो वास्तव में विपरीत रेखा के कारण हो सकती है, उस स्थिति में, आपको उस लाल चेतावनी को खारिज करने के लिए विपरीत रेखा को संकीर्ण करना होगा।

चरण 5 , xml में, आप नीचे की तरह wrap_content पृष्ठभूमि के रूप में उस छवि को संदर्भित कर सकते हैं, इसे विस्तार योग्य बनाने के लिए wrap_content का उपयोग करें:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/your_9_patch_image_name_excluded_.9"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <2nd TextView />
</LinearLayout>

जब पहली बार इसके साथ खेल रहे हों, तो टेक्स्टव्यू या फैंसी पैरेंट लेआउट पर कोई पैडिंग सुनिश्चित नहीं करता है, वरना आपको आश्चर्य हो सकता है कि उम्मीद के मुताबिक काम क्यों नहीं किया जा रहा है।

बटन पृष्ठभूमि उदाहरण:

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:background="@drawable/your_9_patch_image_name_excluded_.9"
        android:layout_gravity="center"
        />

Answer #2

नियमित पींग पर 9-पैच के मुख्य लाभ

दरअसल 9 पैच इमेजेज स्ट्रेचेबल हैं, रिपीटेबल इमेजेस उनकी छोटी साइज तक कम हो जाती हैं। उनकी इमेज अलग-अलग स्क्रीन साइज में स्ट्रेच और लूज प्रॉपर नहीं होगी। एक और सबसे बड़ा फायदा है मेमोरी।

समान छोटे आकार की मेमोरी को विभिन्न स्क्रीन आकार के उपकरणों के लिए पुन: उपयोग किया जा सकता है । अच्छी तरह से डिज़ाइन किए गए 9-पैच चित्र कम त्रुटि वाले हैं और उच्च पुन: प्रयोज्य हैं।

https://developer.android.com/studio/write/draw9patch.html


Answer #3

1. NinePatch चित्र क्या हैं?

NinePatch छवियां PNG छवियां हैं जो एक छवि के कुछ हिस्सों को चिह्नित करती हैं जिन्हें बढ़ाया जा सकता है। उनके पास image_name.9.png जैसा एक्सटेंशन है।

2. वे कहाँ Android परियोजना में संग्रहीत हैं?

res/drawable/image_name.9.png

3. कैसे अपने anndroid app के लिए NinePatch छवि बनाने के लिए?

Android SDK में एक WYSIWIG draw9patch.jar टूल शामिल है जो आपके Android SDK /tools फ़ोल्डर के अंदर है।


Answer #4

मैं 9-पैच छवि कैसे बना सकता हूं? क्या कोई उपकरण है? क्या मैं इसे AndroidSDK या कोड से बना सकता हूं?

जब आप android 9-patch tool लिए एक प्रमुख खोज इंजन खोजते हैं, तो बहुत ही पहली हिट एंड्रॉइड डेवलपर प्रलेखन पृष्ठ के लिए draw9patch टूल पर होती है

नियमित पींग पर 9-पैच के मुख्य लाभ? (यह स्क्रीन के अनुसार गतिशील रूप से / स्वचालित रूप से फैलने योग्य है?)

Android डेवलपर प्रलेखन में अन्य पृष्ठ होते हैं जो नौ-पैच PNG फ़ाइलों का वर्णन करते हैं । इस दस्तावेज़ में मार्ग शामिल हैं:

NinePatchDrawable ग्राफिक एक स्ट्रेचेबल बिटमैप इमेज है, जिसे एंड्रॉइड अपने आप उस व्यू की सामग्री को समायोजित करने के लिए आकार देगा, जिसमें आपने इसे पृष्ठभूमि के रूप में रखा है। NinePatch का एक उदाहरण मानक एंड्रॉइड बटन द्वारा उपयोग की जाने वाली पृष्ठभूमि है - विभिन्न लंबाई के तारों को समायोजित करने के लिए बटन को खिंचाव करना चाहिए।


Answer #5

यह अच्छा उपकरण है: यहां क्लिक करें।

9 पैच इमेजेज स्ट्रेचेबल हैं, रिपीटेबल इमेजेस उनके छोटे आकार में कम हो जाती हैं। सबसे सरल उदाहरण यदि आप एक गोल div लेना चाहते हैं और इसे 9 वर्गों में स्लाइस करते हैं जैसे कि आप टिक-टैक-टो बोर्ड करेंगे। चार कोनों का आकार बिल्कुल नहीं बदलेगा, लेकिन स्थिर होगा जबकि अन्य 5 टुकड़ों को बढ़ाया जाएगा या पूरी छवि को बड़े पैमाने पर अनुमति देने के लिए दोहराया जाएगा।

उस स्पष्टीकरण और CSS3 के आगमन के साथ आप सोच सकते हैं कि 9 पैच छवियों का उपयोग करने का कोई कारण नहीं है, लेकिन '9 पैच' नाम एक मिथ्या नाम है। छवियों को और भी छोटे टुकड़ों में कटा जा सकता है।

9 पैच इमेज में एक इंडेक्स होता है जो इमेज में 1px बॉर्डर जोड़कर किस टुकड़े का होता है। सीमा में रंग निर्धारित करते हैं कि क्या एक टुकड़ा स्थिर है (स्केल नहीं है), यह फैला है, या यह दोहराता है।

Google स्लाइड शो: https://docs.google.com/present/view?id=dc7ghz8w_34f8338rcg

9-पैच छवियों के बारे में Android डेवलपर जानकारी भी देखें: http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch


Answer #6

आज मैंने नौ पैच छवियों की खोज की। आधिकारिक दस्तावेज (अन्य उत्तरों में जुड़ा हुआ) ठीक है मुझे लगता है, लेकिन वास्तव में उदाहरणों में इसका अभाव है।

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

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





nine-patch