پشتیبانی از محتوای قابل توسعه توسط کاربر

برای پشتیبانی از محتوای مقیاس‌پذیر در برنامه خود، از حرکات زوم با دو انگشت استفاده کنید. این یک روش استاندارد و سازگار با پلتفرم برای بهبود دسترسی است و به کاربران اجازه می‌دهد تا به طور شهودی اندازه متن و عناصر رابط کاربری را متناسب با نیازهای خود تنظیم کنند. برنامه شما می‌تواند رفتار مقیاس‌بندی سفارشی را با کنترل جزئی و رفتار زمینه‌ای تعریف کند که تجربه‌ای را ارائه می‌دهد که کاربران اغلب سریع‌تر از یک ویژگی سطح سیستم مانند بزرگنمایی صفحه نمایش، آن را کشف می‌کنند.

یک استراتژی مقیاس‌بندی انتخاب کنید

استراتژی‌های پوشش داده شده در این راهنما باعث می‌شوند که رابط کاربری (UI) برای تناسب با عرض صفحه نمایش، دوباره جریان پیدا کند و سازماندهی مجدد شود. این امر با حذف نیاز به حرکت افقی و حرکت "زیگزاگ" خسته‌کننده‌ای که در غیر این صورت برای خواندن خطوط طولانی متن لازم است، مزیت قابل توجهی در دسترسی‌پذیری ایجاد می‌کند.

مطالعه بیشتر : تحقیقات تأیید می‌کند که برای کاربران کم‌بینا، محتوای reflowing به طور قابل توجهی خواناتر و پیمایش آن آسان‌تر از رابط‌هایی است که نیاز به حرکت دو بعدی دارند. برای جزئیات بیشتر، به مقایسه محتوای Pan-and-Scan و Reflowable در دستگاه‌های تلفن همراه مراجعه کنید.

مقیاس‌بندی یا همه عناصر یا فقط عناصر متنی

جدول زیر تأثیر بصری هر استراتژی مقیاس‌بندی را نشان می‌دهد.

توصیه‌ها

حالا که تفاوت‌های بصری را مشاهده کردید، جدول زیر به شما کمک می‌کند تا جوانب مختلف را بسنجید و بهترین استراتژی را برای محتوای خود انتخاب کنید.

تشخیص حرکات مقیاس‌بندی در Jetpack Compose

برای پشتیبانی از محتوای مقیاس‌پذیر توسط کاربر، ابتدا باید حرکات چند لمسی را تشخیص دهید. در Jetpack Compose، می‌توانید این کار را با استفاده از Modifier.transformable انجام دهید.

اصلاحگر transformable یک API سطح بالا است که دلتای 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

نکات و ملاحظات

برای ایجاد یک تجربه کاربری روان‌تر و قابل دسترس‌تر، توصیه‌های زیر را در نظر بگیرید:

• ارائه کنترل‌های مقیاس بدون نیاز به اشاره را در نظر بگیرید : برخی از کاربران ممکن است با اشاره‌ها مشکل داشته باشند. برای پشتیبانی از این کاربران، ارائه یک روش جایگزین برای تنظیم یا تنظیم مجدد مقیاس که به اشاره‌ها متکی نباشد را در نظر بگیرید.
• ساخت برای همه مقیاس‌ها : رابط کاربری خود را هم در برابر مقیاس‌بندی درون برنامه و هم در برابر تنظیمات فونت یا نمایش در کل سیستم آزمایش کنید. بررسی کنید که طرح‌بندی‌های برنامه شما به درستی و بدون شکست، همپوشانی یا پنهان کردن محتوا سازگار می‌شوند. درباره نحوه ساخت طرح‌بندی‌های تطبیقی ​​بیشتر بیاموزید.