# उत्तरदायित्व

> यह कैसे सुनिश्चित करें कि कोई भी लेआउट स्क्रीन आकार, घनत्व और फ़ॉन्ट के अनुकूल हो।

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

# सभी लेआउट में उत्तरदायित्व

CrossFly **तार्किक पिक्सेल** का उपयोग करता है और घुमाने/आकार बदलने पर लेआउट की पुनर्गणना करता है। यदि
आप नीचे दिए गए सिद्धांतों का पालन करते हैं, तो **स्क्रीन स्वयं पुनः अनुकूल हो जाती है** — बिना resize
कोड के।

> यह व्यावहारिक सारांश है। पूर्ण मार्गदर्शिका, **प्रत्येक** लेआउट में उदाहरण और एक छोर से दूसरे छोर तक
> की स्क्रीन के उदाहरण के साथ, अध्याय 36 — लेआउट और उत्तरदायित्व की अच्छी प्रथाएँ है।

## 5 सिद्धांत
1. **कभी भी निश्चित पिक्सेल में स्थिति निर्धारित न करें।** भिन्न, `Relative` और `LAY_FILL`/`LAY_AUTO` / `RelSize.FILL` का उपयोग करें।
2. **लेआउट को मापने दें।** `LAY_AUTO`, `RelSize.AUTOSIZE` और `Relative.AUTO` प्राकृतिक आकार की रिपोर्ट करते हैं।
3. **अंतराल भी स्केल करता है।** पैडिंग (`ingap`) और मार्जिन (`outgap`) `Gap.ofFont(...)` / `Gap.ofScreen(...)` के माध्यम से।
4. **एक "इलास्टिक" क्षेत्र।** शेष स्थान अवशोषित करने के लिए **एक** घटक को `LAY_FILL` से चिह्नित करें (Vertical/Horizontal)।
5. **Resize स्वचालित है** — यदि आपने ऊपर दिए गए आइटमों का उपयोग किया। केवल मैनुअल स्थिति (`setBounds`) के लिए कोड आवश्यक है।

## केंद्रीय उपकरण: `Relative`
| रूप | परिणाम |
|---|---|
| `Relative.ofFont(1.5f)` | 1.5 × फ़ॉन्ट की ऊँचाई (फ़ॉन्ट/DPI के साथ स्केल करता है) |
| `Relative.ofScreen(0.8f)` | स्क्रीन आयाम का 80% |
| `Relative.ofScreen(0.5f, ScreenSize.MIN)` | **सबसे छोटे** पक्ष का 50% (portrait/landscape के अनुकूल) |
| `Relative.FULL` / `AUTO` / `CENTER` | पैरेंट भरता है / सामग्री का आकार / केंद्रित करता है |

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

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

/** चलाने योग्य मुख्य स्क्रीन। launcher (classname) की ओर संकेत करें और चलाएँ: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   private Component painel;      // हर resize/rotation पर पुनर्व्यवस्थित
   private Component lista;
   private Component detalhe;

   @Override
   public void onShow() throws Exception
   {
      super.onShow();

      lista   = new Label("Lista");
      detalhe = new Label("Detalhe");

      painel = new Component();
      setLayout(new VerticalLayout(Position.START, Position.START));
      add(LAY_FILL, painel);
      // onReposition() पहले layout पर और हर resize/rotation पर कॉल होता है:
      // यह ओरिएंटेशन के अनुसार पैनल का विन्यास चुनता है।
   }

   @Override
   protected void onReposition() throws Exception
   {
      painel.removeAll();
      if (Screen.isLandscape) {
         painel.setLayout(new HorizontalLayout());
         painel.add(0.5f, lista); painel.add(0.5f, detalhe);
      } else {
         painel.setLayout(new VerticalLayout());
         painel.add(LAY_FILL, lista); painel.add(LAY_AUTO, detalhe);
      }
   }
}
```

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

## जब व्यवस्था को अभिविन्यास के अनुसार बदलना चाहिए
`Window.onReposition()` को ओवरराइड करें (relayout से पहले कॉल किया जाता है) और लेआउट को पुनः चुनें:
```java
@Override protected void onReposition() throws Exception {
   painel.removeAll();
   if (Screen.isLandscape) {
      painel.setLayout(new HorizontalLayout());
      painel.add(0.5f, lista); painel.add(0.5f, detalhe);
   } else {
      painel.setLayout(new VerticalLayout());
      painel.add(LAY_FILL, lista); painel.add(LAY_AUTO, detalhe);
   }
}
```
**Breakpoints:** `Screen.minSize` का उपयोग करें (सबसे छोटा पक्ष अभिविन्यासों के बीच स्थिर है), उदा.: `tablet = Screen.minSize >= 600`।

## यह भी देखें
- [लेआउट कैटलॉग](/docs/ui/layouts) · प्रिमिटिव: `Relative`/`Gap`