रिस्पॉन्सिवनेस: सभी स्क्रीन के लिए एक UI

CrossFly में, रिस्पॉन्सिवनेस कोई अलग सुविधा नहीं है — यह संबंधों द्वारा मापने का परिणाम है। यदि आप नीचे दिए गए सिद्धांतों का पालन करते हैं, तो स्क्रीन आकार, घनत्व (DPI), फ़ॉन्ट स्केल और ओरिएंटेशन के अनुसार बिना media queries और बिना मैन्युअल पुनर्गणना के पुनः-अनुकूलित हो जाती है। यह पृष्ठ अध्याय 36 का कार्य-केंद्रित अंश है; “क्यों” लेआउट और Relative मॉडल में है।

5 सिद्धांत

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

टूलबॉक्स

Screen.minSize के साथ Breakpoints

छोटी भुजा (Screen.minSize) का उपयोग करें, width का नहीं — यह तब स्थिर रहता है जब डिवाइस घूमता है:

boolean tablet = Screen.minSize >= 600;   // उदाहरण के लिए, 1 बनाम 2 कॉलम तय करता है

जब (कभी-कभार) व्यवस्था बदलनी हो: onReposition()

यदि लेआउट को ओरिएंटेशन के अनुसार संरचना बदलनी चाहिए, तो Window.onReposition() को ओवरराइड करें:

@Override protected void onReposition() throws Exception {
   painel.removeAll();
   if (Screen.isLandscape) {                     // 2 कॉलम
      painel.setLayout(new HorizontalLayout());
      painel.add(0.5f, lista); painel.add(0.5f, detalhe);
   } else {                                       // 1 कॉलम
      painel.setLayout(new VerticalLayout());
      painel.add(LAY_FILL, lista); painel.add(LAY_AUTO, detalhe);
   }
}

रिस्पॉन्सिवनेस चेकलिस्ट

• शून्य निश्चित ofPixels/setBounds (उचित अपवाद को छोड़कर)।
• प्रति लचीले अक्ष ठीक एक LAY_FILL।
• Gap.ofFont/ofScreen के साथ अंतराल।
• ofScreen(v, ScreenSize.MIN) के साथ वर्ग/आइकन।
• Screen.minSize के साथ breakpoints।

एंटी-पैटर्न

यह भी देखें

• विहित स्रोत: अध्याय 36 · अवधारणा: लेआउट और Relative
• लेआउट · रिस्पॉन्सिवनेस (ui)