یک نشانگر صفحه سفارشی اضافه کنید

با استفاده از نشانگرهای صفحه، می توانید به کاربران خود کمک کنید تا موقعیت فعلی خود را در محتوای برنامه خود درک کنند و یک نشانه بصری از پیشرفت ارائه دهید. این نشانه های ناوبری زمانی مفید هستند که محتوا را به صورت متوالی ارائه می کنید، مانند پیاده سازی چرخ فلک، گالری تصاویر و نمایش اسلاید، یا صفحه بندی در لیست ها.

سازگاری نسخه

این پیاده سازی مستلزم آن است که minSDK پروژه شما روی سطح API 21 یا بالاتر تنظیم شود.

وابستگی ها

یک پیجر افقی با نشانگر صفحه سفارشی ایجاد کنید

کد زیر یک پیجر افقی ایجاد می‌کند که دارای نشانگر صفحه است و به کاربر نشانه‌های بصری می‌دهد که تعداد صفحات وجود دارد و کدام صفحه قابل مشاهده است: 

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize()
) { page ->
    // Our page content
    Text(
        text = "Page: $page",
    )
}
Row(
    Modifier
        .wrapContentHeight()
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .padding(bottom = 8.dp),
    horizontalArrangement = Arrangement.Center
) {
    repeat(pagerState.pageCount) { iteration ->
        val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray
        Box(
            modifier = Modifier
                .padding(2.dp)
                .clip(CircleShape)
                .background(color)
                .size(16.dp)
        )
    }
}
PagerSnippets.kt

نکات کلیدی در مورد کد

  • کد یک HorizontalPager پیاده سازی می کند که به شما امکان می دهد به صورت افقی بین صفحات مختلف محتوا بکشید. در این حالت هر صفحه شماره صفحه را نمایش می دهد.
  • تابع rememberPagerState() پیجر را مقداردهی اولیه می کند و تعداد صفحات را 4 تنظیم می کند. این تابع یک شیء حالت ایجاد می کند که صفحه جاری را ردیابی می کند و به شما امکان می دهد پیجر را کنترل کنید.
  • ویژگی pagerState.currentPage برای تعیین اینکه کدام نشانگر صفحه باید برجسته شود استفاده می شود.
  • صفحه indictator در پیجری ظاهر می‌شود که با اجرای Row پوشانده شده است.
  • یک دایره 16 dp برای هر صفحه در پیجر رسم می شود. نشانگر صفحه فعلی به صورت DarkGray نمایش داده می شود، در حالی که بقیه دایره های نشانگر LightGray هستند.
  • Text composable در HorizontalPager متن "Page: [شماره صفحه]" را در هر صفحه نمایش می دهد.

نتایج

شکل 1. پیجر نشانگر دایره ای را در زیر محتوا نشان می دهد.

مجموعه هایی که حاوی این راهنما هستند

این راهنما بخشی از مجموعه‌های راهنمای Quick Guide است که اهداف توسعه Android گسترده‌تری را پوشش می‌دهد:

فهرست‌ها و شبکه‌ها به برنامه شما اجازه می‌دهند مجموعه‌ها را به شکل بصری دلپذیری نمایش دهد که مصرف آن برای کاربران آسان است.
مجموعه راهنمای سریع
بیاموزید که چگونه توابع ترکیب‌پذیر می‌توانند به شما کمک کنند تا به راحتی اجزای رابط کاربری زیبا را بر اساس سیستم طراحی مواد طراحی کنید.
مجموعه راهنمای سریع

سوال یا بازخورد داشته باشید

به صفحه سوالات متداول ما بروید و درباره راهنماهای سریع بیاموزید یا با ما تماس بگیرید و نظرات خود را با ما در میان بگذارید.
به سؤالات متداول بروید بازخورد بگذارید