उपयोगकर्ता के हिसाब से कॉन्टेंट को बड़ा या छोटा करने की सुविधा

अपने ऐप्लिकेशन में, ज़ूम करने के लिए पिंच करने के जेस्चर लागू करें, ताकि कॉन्टेंट को ज़रूरत के हिसाब से बड़ा किया जा सके. यह सुलभता को बेहतर बनाने का स्टैंडर्ड तरीका है. यह सभी प्लैटफ़ॉर्म पर एक जैसा काम करता है. इससे उपयोगकर्ता, अपनी ज़रूरत के हिसाब से टेक्स्ट और यूज़र इंटरफ़ेस (यूआई) एलिमेंट के साइज़ को आसानी से अडजस्ट कर पाते हैं. आपका ऐप्लिकेशन, कस्टम स्केलिंग के व्यवहार को तय कर सकता है. इसमें बारीक कंट्रोल और कॉन्टेक्स्ट के हिसाब से व्यवहार शामिल होता है. इससे उपयोगकर्ताओं को ऐसा अनुभव मिलता है जो उन्हें अक्सर स्क्रीन मैग्नीफ़िकेशन जैसी सिस्टम-लेवल की सुविधा से ज़्यादा तेज़ी से मिलता है.

स्केलिंग की रणनीति चुनना

इस गाइड में बताई गई रणनीतियों की वजह से, यूज़र इंटरफ़ेस (यूआई) को स्क्रीन की चौड़ाई के हिसाब से फिर से व्यवस्थित किया जाता है. इससे सुलभता से जुड़ी एक अहम सुविधा मिलती है. इसकी मदद से, टेक्स्ट की लंबी लाइनों को पढ़ने के लिए, हॉरिज़ॉन्टल पैनिंग और "ज़िग-ज़ैग" मोशन की ज़रूरत नहीं पड़ती.

ज़्यादा जानकारी: रिसर्च से पता चला है कि कमज़ोर नज़र वाले लोगों के लिए, रिफ़्लो किए गए कॉन्टेंट को पढ़ना और उसके एक हिस्से से दूसरे पर जाना, उन इंटरफ़ेस की तुलना में ज़्यादा आसान होता है जिनमें दो डाइमेंशन में पैन करने की ज़रूरत होती है. ज़्यादा जानकारी के लिए, मोबाइल डिवाइसों पर पैन-एंड-स्कैन और रिफ़्लो होने वाले कॉन्टेंट की तुलना लेख पढ़ें.

सभी एलिमेंट या सिर्फ़ टेक्स्ट एलिमेंट को स्केल करना

यहां दी गई टेबल में, हर स्केलिंग रणनीति के विज़ुअल इफ़ेक्ट के बारे में बताया गया है.

सुझाव

अब आपने विज़ुअल में अंतर देख लिया है. यहां दी गई टेबल से, आपको फ़ायदे और नुकसान का आकलन करने में मदद मिलेगी. साथ ही, अपने कॉन्टेंट के लिए सबसे अच्छी रणनीति चुनने में मदद मिलेगी.

Jetpack Compose में स्केलिंग जेस्चर का पता लगाना

उपयोगकर्ता के हिसाब से कॉन्टेंट को स्केल करने की सुविधा देने के लिए, आपको सबसे पहले मल्टी-टच जेस्चर का पता लगाना होगा. Jetpack Compose में, Modifier.transformable का इस्तेमाल करके ऐसा किया जा सकता है.

transformable मॉडिफ़ायर एक हाई-लेवल एपीआई है. यह पिछले जेस्चर इवेंट के बाद से zoomChange डेल्टा उपलब्ध कराता है. इससे, सीधे तौर पर डेटा इकट्ठा करने के लिए, स्टेट अपडेट करने के लॉजिक को आसान बनाया जा सकता है. उदाहरण के लिए, scale *= zoomChange. इसलिए, यह इस गाइड में बताई गई अडैप्टिव स्केलिंग की रणनीतियों के लिए सबसे सही है.

लागू करने के उदाहरण

यहां दिए गए उदाहरणों में, डेंसिटी स्केलिंग और फ़ॉन्ट स्केलिंग की रणनीतियों को लागू करने का तरीका बताया गया है.

डेंसिटी के हिसाब से स्केल करना

इस तरीके से, यूज़र इंटरफ़ेस (यूआई) के किसी हिस्से के बेस density को स्केल किया जाता है. इस वजह से, लेआउट पर आधारित सभी मेज़रमेंट को स्केल किया जाता है. इनमें पैडिंग, स्पेसिंग, और कॉम्पोनेंट के साइज़ शामिल हैं. ऐसा लगता है कि स्क्रीन का साइज़ या रिज़ॉल्यूशन बदल गया है. टेक्स्ट का साइज़ भी डेनसिटी पर निर्भर करता है. इसलिए, यह भी उसी अनुपात में बढ़ता है. यह रणनीति तब असरदार होती है, जब आपको किसी खास जगह पर मौजूद सभी एलिमेंट को एक जैसा बड़ा करना हो. साथ ही, आपको अपने यूज़र इंटरफ़ेस (यूआई) के विज़ुअल रिदम और अनुपात को बनाए रखना हो.

private class DensityScalingState(
    // Note: For accessibility, typical min/max values are ~0.75x and ~3.5x.
    private val minScale: Float = 0.75f,
    private val maxScale: Float = 3.5f,
    private val currentDensity: Density
) {
    val transformableState = TransformableState { zoomChange, _, _ ->
        scaleFactor.floatValue =
            (scaleFactor.floatValue * zoomChange).coerceIn(minScale, maxScale)
    }
    val scaleFactor = mutableFloatStateOf(1f)
    fun scaledDensity(): Density {
        return Density(
            currentDensity.density * scaleFactor.floatValue,
            currentDensity.fontScale
        )
    }
}
ScalableContentSnippets.kt

फ़ॉन्ट स्केलिंग

यह रणनीति ज़्यादा टारगेटेड है. इसमें सिर्फ़ fontScale फ़ैक्टर में बदलाव किया जाता है. इसका नतीजा यह होता है कि सिर्फ़ टेक्स्ट एलिमेंट का साइज़ बढ़ता या घटता है. वहीं, लेआउट के अन्य सभी कॉम्पोनेंट—जैसे कि कंटेनर, पैडिंग, और आइकॉन—का साइज़ एक जैसा रहता है. यह रणनीति, पढ़ने से जुड़े ऐप्लिकेशन में टेक्स्ट को साफ़ तौर पर दिखाने के लिए सबसे सही है.

class FontScaleState(
    // Note: For accessibility, typical min/max values are ~0.75x and ~3.5x.
    private val minScale: Float = 0.75f,
    private val maxScale: Float = 3.5f,
    private val currentDensity: Density
) {
    val transformableState = TransformableState { zoomChange, _, _ ->
        scaleFactor.floatValue =
            (scaleFactor.floatValue * zoomChange).coerceIn(minScale, maxScale)
    }
    val scaleFactor = mutableFloatStateOf(1f)
    fun scaledFont(): Density {
        return Density(
            currentDensity.density,
            currentDensity.fontScale * scaleFactor.floatValue
        )
    }
}
ScalableContentSnippets.kt

शेयर किया गया डेमो यूज़र इंटरफ़ेस (यूआई)

यह शेयर किया गया DemoCard कंपोज़ेबल है. इसका इस्तेमाल ऊपर दिए गए दोनों उदाहरणों में किया गया है, ताकि अलग-अलग स्केलिंग बिहेवियर को हाइलाइट किया जा सके.

@Composable
private fun DemoCard() {
    Card(
        modifier = Modifier
            .width(360.dp)
            .padding(16.dp),
        shape = RoundedCornerShape(12.dp)
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Text("Demo Card", style = MaterialTheme.typography.headlineMedium)
            var isChecked by remember { mutableStateOf(true) }
            Row(verticalAlignment = Alignment.CenterVertically) {
                Text("Demo Switch", Modifier.weight(1f), style = MaterialTheme.typography.bodyLarge)
                Switch(checked = isChecked, onCheckedChange = { isChecked = it })
            }
            Row(verticalAlignment = Alignment.CenterVertically) {
                Icon(Icons.Filled.Person, "Icon", Modifier.size(32.dp))
                Spacer(Modifier.width(8.dp))
                Text("Demo Icon", style = MaterialTheme.typography.bodyLarge)
            }
            Row(
                Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Box(
                    Modifier
                        .width(100.dp)
                        .weight(1f)
                        .height(80.dp)
                        .background(Color.Blue)
                )
                Box(
                    Modifier
                        .width(100.dp)
                        .weight(1f)
                        .height(80.dp)
                        .background(Color.Red)
                )
            }
            Text(
                "Demo Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit," +
                    " sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                style = MaterialTheme.typography.bodyMedium,
                textAlign = TextAlign.Justify
            )
        }
    }
}
ScalableContentSnippets.kt

सलाह और ध्यान रखने वाली बातें

बेहतर और आसानी से ऐक्सेस किया जा सकने वाला अनुभव देने के लिए, यहां दी गई सलाह पर ध्यान दें:

• स्केल करने के लिए, बिना जेस्चर वाले कंट्रोल उपलब्ध कराएं: कुछ लोगों को जेस्चर करने में परेशानी हो सकती है. इन उपयोगकर्ताओं की मदद करने के लिए, स्केल को अडजस्ट करने या रीसेट करने का कोई दूसरा तरीका उपलब्ध कराएं. यह तरीका, जेस्चर पर आधारित नहीं होना चाहिए.
• सभी साइज़ के लिए बनाएं: अपने यूज़र इंटरफ़ेस (यूआई) की जांच, ऐप्लिकेशन में स्केलिंग और सिस्टम-वाइड फ़ॉन्ट या डिसप्ले सेटिंग के हिसाब से करें. देखें कि आपके ऐप्लिकेशन के लेआउट, कॉन्टेंट को तोड़े, ओवरलैप किए या छिपाए बिना सही तरीके से अडैप्ट हो रहे हों. अडैप्टिव लेआउट बनाने के तरीके के बारे में ज़्यादा जानें.