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

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

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

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

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

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

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

रणनीति डेंसिटी स्केलिंग फ़ॉन्ट स्केलिंग

व्यवहार

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

इसका असर सिर्फ़ टेक्स्ट एलिमेंट पर पड़ता है. पूरे लेआउट और बिना टेक्स्ट वाले कॉम्पोनेंट का साइज़ पहले जैसा ही रहता है.

किस तरह के कॉन्टेंट को स्केल किया जा सकता है

सभी विज़ुअल एलिमेंट: टेक्स्ट, कॉम्पोनेंट (बटन, आइकॉन), इमेज, और लेआउट स्पेसिंग (पैडिंग, मार्जिन)

सिर्फ़ टेक्स्ट

डेमो

सुझाव

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

यूज़र इंटरफ़ेस (यूआई) का टाइप

सुझाई गई रणनीति

वजह

रीडिंग-इंटेंसिव लेआउट

उदाहरण: समाचार लेख, मैसेजिंग ऐप्लिकेशन

डेंसिटी या फ़ॉन्ट स्केलिंग

इनलाइन इमेज के साथ-साथ, पूरे कॉन्टेंट एरिया को स्केल करने के लिए, डेंसिटी स्केलिंग का इस्तेमाल करना बेहतर होता है.

अगर सिर्फ़ टेक्स्ट को स्केल करना है, तो फ़ॉन्ट स्केलिंग एक आसान विकल्प है.

विज़ुअल तौर पर व्यवस्थित लेआउट

उदाहरण: ऐप स्टोर, सोशल मीडिया फ़ीड

डेंसिटी स्केलिंग

यह कैरसेल या ग्रिड में, इमेज और टेक्स्ट के बीच के विज़ुअल रिलेशनशिप को बनाए रखता है. रीफ़्लोइंग की सुविधा, हॉरिज़ॉन्टल पैनिंग से बचाती है. इससे नेस्ट किए गए स्क्रोलिंग एलिमेंट के साथ होने वाली गड़बड़ी से बचा जा सकता है.

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
        )
    }
}

@Composable
fun DensityScalingSample() {
    val currentDensity = LocalDensity.current
    val scaleState =
        remember(currentDensity) { DensityScalingState(currentDensity = currentDensity) }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .transformable(state = scaleState.transformableState),
        contentAlignment = Alignment.TopCenter
    ) {
        CompositionLocalProvider(
            LocalDensity provides scaleState.scaledDensity()
        ) {
            DemoCard()
        }
    }
}

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

यह रणनीति ज़्यादा टारगेट की गई है. इसमें सिर्फ़ 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
        )
    }
}

@Composable
fun FontScalingSample() {
    val currentDensity = LocalDensity.current
    val scaleState = remember { FontScaleState(currentDensity = currentDensity) }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .transformable(state = scaleState.transformableState),
        contentAlignment = Alignment.TopCenter
    ) {
        CompositionLocalProvider(
            LocalDensity provides scaleState.scaledFont()
        ) {
            DemoCard()
        }
    }
}

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

यह शेयर किया गया 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
            )
        }
    }
}

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

अपने ऐप्लिकेशन को बेहतर और ज़्यादा से ज़्यादा लोगों के लिए सुलभ बनाने के लिए, यहां दिए गए सुझावों को आज़माएं:

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