यह पृष्ठ पुर्तगाली से मशीन-अनुवादित है और इसमें त्रुटियाँ हो सकती हैं। पुर्तगाली संस्करण प्रामाणिक है।
10. रिस्पॉन्सिव बनाना
आप क्या सीखेंगे: ऐप को बिना किसी फिक्स्ड पिक्सेल के किसी भी स्क्रीन के अनुकूल बनाना। पूर्वापेक्षाएँ: डेटा को स्थायी बनाना.
पूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)
अनुकूली ऐप: onReposition() ओरिएंटेशन के अनुसार लेआउट बदलता है (landscape में 2 कॉलम, portrait में 1)
स्टेट को फिर से बनाए बिना, Relative/Gap और Screen का उपयोग करके। जैसा है वैसा ही कंपाइल होता है।
package com.exemplo;
import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
public class MainWindow extends Window
{
private final Component painel = new Component();
private final Component listaBox = new Component();
private final Component detalheBox = new Component();
@Override
public void onShow() throws Exception
{
super.onShow();
setLayout(new VerticalLayout());
listaBox.setLayout(new VerticalLayout());
listaBox.add(LAY_AUTO, new Label("Lista"));
detalheBox.setLayout(new VerticalLayout());
detalheBox.add(LAY_AUTO, new Label("Detalhe"));
boolean largo = Screen.minSize >= 600; // breakpoint: छोटा किनारा (घुमाने पर स्थिर)
add(LAY_AUTO, new Label(largo ? "Tablet/desktop" : "Telefone"));
add(LAY_FILL, painel);
onReposition(); // प्रारंभिक व्यवस्था
}
@Override
protected void onReposition() throws Exception
{
painel.removeAll();
if (Screen.isLandscape) { // 2 कॉलम: सूची | विवरण
painel.setLayout(new HorizontalLayout());
painel.add(0.4f, listaBox);
painel.add(0.6f, detalheBox);
} else { // 1 कॉलम
painel.setLayout(new VerticalLayout());
painel.add(LAY_FILL, listaBox);
}
painel.setValidLayout(false);
}
}नीचे दिए गए स्निपेट केवल मुख्य भाग दिखाते हैं (जो
onShow()के अंदर जाता है)। चलाने के लिए, उन्हें ऊपर दिए गएMainWindowढाँचे में रखें।
उपकरण
Relative.ofFont(1.5f); // फ़ॉन्ट/DPI के साथ स्केल करता है
Relative.ofScreen(0.8f, ScreenSize.MIN); // छोटे किनारे का अंश (portrait/landscape के अनुसार ढलता है)
Gap.ofFont(0.5f); // स्केल होने वाला स्पेसिंग
add(LAY_FILL, comp); // प्रति अक्ष एक इलास्टिक क्षेत्रScreen.minSize के साथ ब्रेकपॉइंट
छोटे वाले पक्ष का उपयोग करें — जब डिवाइस घूमता है तो स्थिर रहता है:
boolean largo = Screen.minSize >= 600; // tablet/desktopओरिएंटेशन के अनुसार लेआउट बदलना — onReposition()
जब संरचना बदलनी चाहिए (portrait में 1 कॉलम, landscape में 2), तो onReposition() को ओवरराइड करें
(resize पर बुलाया जाता है) — स्टेट को फिर से बनाए बिना:
@Override protected void onReposition() throws Exception {
painel.removeAll();
if (Screen.isLandscape) { // 2 कॉलम: सूची | विवरण
painel.setLayout(new HorizontalLayout());
painel.add(0.4f, listaBox);
painel.add(0.6f, detalheBox);
} else { // 1 कॉलम
painel.setLayout(new VerticalLayout());
painel.add(LAY_FILL, listaBox);
}
}इस चरण में आप बनाते हैं
ऐप अनुकूली बन जाता है — portrait में फ़ोन, landscape में tablet/desktop — बिना किसी फिक्स्ड पिक्सेल के।
संक्षेप में
Relative/Gap/LAY_FILL = स्वचालित रिस्पॉन्सिव; Screen.minSize = ब्रेकपॉइंट; onReposition()
स्टेट को संरक्षित रखते हुए लेआउट बदलता है।