# RelativeLayout

> एंकरों द्वारा स्थिति और आकार निर्धारित करता है — कंटेनर के सापेक्ष या दूसरे घटक के सापेक्ष।

Source: https://crossfly.dev/hi/docs/ui/layouts/relative-layout — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# RelativeLayout

प्रत्येक बच्चे को **एंकरों** द्वारा स्थित करता है — कंटेनर के सापेक्ष **या दूसरे घटक के सापेक्ष**। इसकी
अद्वितीय ताकत है **A को B से जोड़ना** (एक अवतार के कोने में एक बैज, एक आइकन के दाईं ओर एक लेबल)।

> 🔴 · **पैकेज:** `dev.crossfly.ui.layout` · **विस्तार करता है:** `Layout`

## कब उपयोग करें
- एक घटक को **दूसरे** से जोड़ना (`AFTER`, `BEFORE`, `END_OF`, `CENTER_OF`)।
- सुपरिम्पोज़िशन और सूक्ष्म संयोजन (बैज, मुहर, स्थित लेबल)।

## कब उपयोग न करें
- "शीर्ष/सामग्री/आधार शेष स्थान भरता है" ढाँचा → `LAY_FILL` के साथ
  [VerticalLayout](/docs/ui/layouts/vertical-layout) को **प्राथमिकता दें** (सरल; नीचे `FILL`/`FIT` पर नोट देखें)।

## `add(...)` — हस्ताक्षर और अर्थ
```java
public RelativeLayout add(Component alvo, RelPos x, RelPos y, RelSize larg, RelSize alt);
// + ओवरलोड:  (..., Component ref)   (..., Gap outgap)   (..., Component ref, Gap outgap)
```
`ref` के बिना, एंकर जोड़े गए **पिछले घटक** के सापेक्ष होता है।

**`RelPos`** (स्थिति, `UIConstants` में): `START`, `CENTER`, `END`, `AFTER`, `BEFORE`, `CENTER_OF`,
`END_OF`, `SAMEPOS`, `AUTOPOS`, `AUTOPOSCENTERED`, `KEEPPOS`।

**`RelSize`** (आकार): `AUTOSIZE`, `FILL`, `FIT`, `SAMESIZE`, `KEEPSIZE`।

## पूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)
```java
package com.exemplo;

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

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

      // Avatar + avatar के कोने में badge + बगल में नाम
      RelativeLayout rl = new RelativeLayout();
      Label avatar = new Label("👤");
      avatar.getStyle().autoWidth(Relative.ofFont(3f)).autoHeight(Relative.ofFont(3f));
      Label badge = new Label("9");
      Label nome  = new Label("Ana Silva");

      rl.add(avatar, RelPos.START,  RelPos.START,     RelSize.AUTOSIZE, RelSize.AUTOSIZE);
      rl.add(badge,  RelPos.END_OF, RelPos.START,     RelSize.AUTOSIZE, RelSize.AUTOSIZE, avatar); // avatar का कोना
      rl.add(nome,   RelPos.AFTER,  RelPos.CENTER_OF, RelSize.AUTOSIZE, RelSize.AUTOSIZE, avatar); // avatar के बाद

      Component cabecalho = new Component();
      cabecalho.setLayout(rl);

      setLayout(new VerticalLayout(Position.START, Position.START));
      add(LAY_AUTO, cabecalho);
      add(LAY_FILL, new Component());
   }
}
```

> नीचे दिए गए अंश **केवल मूल भाग** दिखाते हैं (जो `onShow()` के अंदर जाता है)। चलाने के लिए, उन्हें ऊपर दिए गए `MainWindow` ढाँचे में रखें।

## बुनियादी उपयोग
```java
// Avatar + avatar के कोने में badge + बगल में नाम
RelativeLayout rl = new RelativeLayout();
ImageView avatar = new ImageView(/* फोटो */);
avatar.getStyle().autoWidth(Relative.ofFont(3f)).autoHeight(Relative.ofFont(3f));
Label badge = new Label("9");
Label nome  = new Label("Ana Silva");

rl.add(avatar, RelPos.START,  RelPos.START,     RelSize.AUTOSIZE, RelSize.AUTOSIZE);
rl.add(badge,  RelPos.END_OF, RelPos.START,     RelSize.AUTOSIZE, RelSize.AUTOSIZE, avatar); // avatar का कोना
rl.add(nome,   RelPos.AFTER,  RelPos.CENTER_OF, RelSize.AUTOSIZE, RelSize.AUTOSIZE, avatar); // avatar के बाद

Component cabecalho = new Component();
cabecalho.setLayout(rl);
```

## उपयोगी एंकर पैटर्न
- **A के दाईं ओर B, संरेखित:** `add(b, RelPos.AFTER, RelPos.CENTER_OF, RelSize.AUTOSIZE, RelSize.AUTOSIZE, a)`।
- **A के समान आकार:** `RelSize.SAMESIZE`।
- **केंद्रित कार्ड:** `add(card, RelPos.CENTER, RelPos.CENTER, RelSize.AUTOSIZE, RelSize.AUTOSIZE)`।
- **नियम द्वारा मार्जिन:** अंतिम तर्क के रूप में एक `Gap.ofFont(0.5f)` पास करें (यह नियम का `outgap` बन जाता है)।

## ⚠️ `RelSize` का सटीक अर्थ (भ्रमित न हों)
- **`FILL`** = **पैरेंट की कुल** चौड़ाई/ऊँचाई घटा मार्जिन — **संदर्भ को अनदेखा करता है** (यह "A के बगल
  में शेष स्थान" नहीं है)।
- **`FIT`** = **पैरेंट के कोने से संदर्भ के किनारे तक** (उदा.: A के बाएँ/शीर्ष **तक** भरना)।
- "एक बच्चा दूसरों के बगल में शेष स्थान अवशोषित करता है" के लिए → `LAY_FILL` के साथ
  `HorizontalLayout`/`VerticalLayout` का उपयोग करें, `RelativeLayout` **नहीं**।

## सामान्य त्रुटियाँ
- यह अपेक्षा करना कि `FILL` "A के बगल में जो बचता है" वह है (यह पूरा पैरेंट है)।
- संदर्भ के **चक्र** (A, B पर निर्भर है जो A पर निर्भर है) — हमेशा पहले जोड़े गए घटकों में एंकर करें।

## यह भी देखें
- [VerticalLayout](/docs/ui/layouts/vertical-layout) (स्क्रीन ढाँचे के लिए) · [उत्तरदायित्व](/docs/ui/layouts/responsiveness)