अवतार के कोने में बैज कैसे लगाएं

उद्देश्य. किसी अन्य कंपोनेंट (अवतार, आइकन) के एक कोने पर लंगर डाले गए एक छोटे “बैज” (सूचना काउंटर, स्थिति बिंदु) को ओवरलैप करना। यह RelativeLayout का उपयोग करता है, जो संतानों को किसी अन्य संतान के सापेक्ष लंगरों द्वारा स्थित करता है।

प्रयुक्त APIs

• new RelativeLayout() — ऐसा लेआउट जो RelPos लंगरों द्वारा स्थित करता है और RelSize द्वारा आकार देता है।
• layout.add(Component target, RelPos x, RelPos y, RelSize w, RelSize h, Component relative) — relative के सापेक्ष स्थित target जोड़ता है।
• RelPos.END_OF — बैज के अंतिम (दाहिने) किनारे को अवतार के अंतिम किनारे से संरेखित करता है।
• RelPos.START — बैज के शीर्ष को अवतार के शीर्ष से संरेखित करता है (ऊर्ध्वाधर लंगर START)।
• RelSize.AUTOSIZE — बैज अपने स्वयं के पसंदीदा आकार (चौड़ाई और ऊँचाई) का उपयोग करता है।
• container.setLayout(layout) — कंटेनर में RelativeLayout स्थापित करता है।

महत्वपूर्ण सत्यापन: स्रोत में, enum के मान RelSize.AUTOSIZE हैं (AUTO नहीं), RelSize.FILL, RelSize.FIT, RelSize.SAMESIZE, RelSize.KEEPSIZE; और RelPos.END_OF, RelPos.START, RelPos.AFTER, RelPos.CENTER_OF इत्यादि।

पूरा उदाहरण (कॉपी करें, पेस्ट करें और चलाएं)

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

/** चलाने योग्य मुख्य स्क्रीन। launcher (classname) की ओर संकेत करें और चलाएँ: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // उदाहरण घटक: एक "avatar" और एक "badge" काउंटर
      Component avatar = new Component().style(Styles.component().backColor(0xFFCCCCCC));
      Component badge  = new Label("3").style(Styles.component().backColor(0xFFFF3B30).textColor(0xFFFFFFFF));

      // avatar + badge रखने वाला Container
      Component container = new Component().style(Styles.transparent());
      RelativeLayout rl = new RelativeLayout();

      // 1) avatar: ऊपरी-बाएं कोने में लंगर, स्वचालित आकार
      rl.add(avatar, RelPos.START, RelPos.START, RelSize.AUTOSIZE, RelSize.AUTOSIZE);

      // 2) badge: AVATAR का ऊपरी-दायां कोना (x में END_OF, y में START),
      //    अपना आकार। अंतिम तर्क (avatar) संदर्भ है।
      rl.add(badge, RelPos.END_OF, RelPos.START, RelSize.AUTOSIZE, RelSize.AUTOSIZE, avatar);

      container.setLayout(rl);
      add(container);
   }
}

नीचे का अंश केवल मुख्य भाग दिखाता है। चलाने के लिए, इसे ऊपर दिए गए MainWindow ढाँचे में रखें।

न्यूनतम अंश

// avatar + badge रखने वाला Container
Component container = new Component().style(Styles.transparent());
RelativeLayout rl = new RelativeLayout();

// 1) avatar: ऊपरी-बाएं कोने में लंगर, स्वचालित आकार
rl.add(avatar, RelPos.START, RelPos.START, RelSize.AUTOSIZE, RelSize.AUTOSIZE);

// 2) badge: AVATAR का ऊपरी-दायां कोना (x में END_OF, y में START),
//    अपना आकार। अंतिम तर्क (avatar) संदर्भ है।
rl.add(badge, RelPos.END_OF, RelPos.START, RelSize.AUTOSIZE, RelSize.AUTOSIZE, avatar);

container.setLayout(rl);
add(container);

सत्यापन नोट (कोड 2026). RelativeLayout में पुष्ट: स्पष्ट संदर्भ वाला हस्ताक्षर add(Component, RelPos, RelPos, RelSize, RelSize, Component) है। END_OF x को “संदर्भ का अंतिम किनारा घटा बैज की चौड़ाई” के रूप में हल करता है (बैज अवतार के दाहिने किनारे से सट जाता है); y में START शीर्ष से संरेखित करता है। बैज को कोने के “बाहर” खिसकाने के लिए (ओवरलैप का क्लासिक प्रभाव), बैज का outgap समायोजित करें — एक ओवरलोड add(..., Component relative, Gap outgap) मौजूद है। यदि आप संदर्भ को छोड़ देते हैं, तो लेआउट संदर्भ के रूप में पहले जोड़े गए कंपोनेंट का उपयोग करता है।

और गहराई से जानें

• क्लिक करने योग्य कार्ड (GridLayout के साथ रचना): card-clicavel.md