Android Compose 中的尋呼機指示器

Question

我是 android Compose 的新手 誰能告訴我是否有任何方法可以在沒有第三個庫的情況下在 Compose 中實現 Page indcater？ 我正在使用 Material design 3 我已經嘗試了很多解決方案但是它已被復制

我嘗試使用 state 尋呼機，但現在它已被復制

Answer 1

經過多次嘗試找到有效的解決方案后，我找到了兩種方法

第一： Jetpack Compose 動畫尋呼機點指示器？

第二： 用於撰寫的分頁指示器

但是你會遇到一些關於 PagerState Class 的問題，它現在是重復的，所以你可以使用 rememberPagerState

fun PageIndicatorSample() {
Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally
) {

    Spacer(Modifier.height(40.dp))
    val pagerState1 = rememberPagerState(initialPage = 0)
    val coroutineScope = rememberCoroutineScope()

    PagerIndicatornew(pagerState = pagerState1, indicatorCount = getAllData.size) {
        coroutineScope.launch {
            pagerState1.scrollToPage(it)
        }

    }

    HorizontalPager(
        pageCount = getAllData.size,
        state = pagerState1,
    ) {
        // Here You Add what compose You Want... this is just example
        Card(getAllData[it])
    }
  }
 }

對於尋呼機指示器

  @OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun PagerIndicatornew(
modifier: Modifier = Modifier,
pagerState: PagerState,
indicatorCount: Int = 5,
indicatorSize: Dp = 16.dp,
indicatorShape: Shape = CircleShape,
space: Dp = 8.dp,
activeColor: Color = Color(0xffEC407A),
inActiveColor: Color = Color.LightGray,
onClick: ((Int) -> Unit)? = null) {
val listState = rememberLazyListState()
val totalWidth: Dp = indicatorSize * indicatorCount + space * (indicatorCount - 1)
val widthInPx = LocalDensity.current.run { indicatorSize.toPx() }
val currentItem by remember {
    derivedStateOf {
        pagerState.currentPage
    }
}
val itemCount = indicatorCount
LaunchedEffect(key1 = currentItem) {
    val viewportSize = listState.layoutInfo.viewportSize
    listState.animateScrollToItem(
        currentItem,
        (widthInPx / 2 - viewportSize.width / 2).toInt()
    )
}
LazyRow(
    modifier = modifier.width(totalWidth),
    state = listState,
    contentPadding = PaddingValues(vertical = space),
    horizontalArrangement = Arrangement.spacedBy(space),
    userScrollEnabled = false
) {

    items(itemCount) { index ->

        val isSelected = (index == currentItem)

        // Index of item in center when odd number of indicators are set
        // for 5 indicators this is 2nd indicator place
        val centerItemIndex = indicatorCount / 2

        val right1 =
            (currentItem < centerItemIndex &&
                    index >= indicatorCount - 1)

        val right2 =
            (currentItem >= centerItemIndex &&
                    index >= currentItem + centerItemIndex &&
                    index <= itemCount - centerItemIndex + 1)
        val isRightEdgeItem = right1 || right2

        // Check if this item's distance to center item is smaller than half size of
        // the indicator count when current indicator at the center or
        // when we reach the end of list. End of the list only one item is on edge
        // with 10 items and 7 indicators
        // 7-3= 4th item can be the first valid left edge item and
        val isLeftEdgeItem =
            index <= currentItem - centerItemIndex &&
                    currentItem > centerItemIndex &&
                    index < itemCount - indicatorCount + 1

        Box(
            modifier = Modifier
                .graphicsLayer {
                    val scale = if (isSelected) {
                        1f
                    } else if (isLeftEdgeItem || isRightEdgeItem) {
                        .5f
                    } else {
                        .8f
                    }
                    scaleX = scale
                    scaleY = scale

                }

                .clip(indicatorShape)
                .size(indicatorSize)
                .background(
                    if (isSelected) activeColor else inActiveColor,
                    indicatorShape
                )
                .then(
                    if (onClick != null) {
                        Modifier
                            .clickable {
                                onClick.invoke(index)
                            }
                    } else Modifier
                )
            )
          }
         }
      }

注意：第一個解決方案在索引方面存在一些問題，所以我更喜歡第二個

Answer 2

查看伴奏源代碼並根據需要自定義它或更好地使用第三方庫