রিফ্রেশ করতে টানুন

'রিফ্রেশ করতে নিচের দিকে টানুন' কম্পোনেন্ট ব্যবহারকারীদের অ্যাপের কন্টেন্টের শুরুতে নিচের দিকে টেনে ডেটা রিফ্রেশ করার অনুমতি দেয়।

API সারফেস

রিফ্রেশ করতে নিচের দিকে টানুন ফিচার প্রয়োগ করতে PullToRefreshBox কম্পোজেবল ব্যবহার করুন, যা আপনার স্ক্রল করা যায় এমন কন্টেন্টের জন্য কন্টেনার হিসেবে কাজ করে। নিম্নলিখিত কী প্যারামিটার রিফ্রেশ করার আচরণ ও উপস্থিতি নিয়ন্ত্রণ করে:

  • isRefreshing: রিফ্রেশ অ্যাকশন প্রোগ্রেসে আছে কিনা তা ইঙ্গিত করে এমন একটি বুলিয়ান ভ্যালু।
  • onRefresh: ব্যবহারকারী রিফ্রেশ শুরু করলে একটি ল্যাম্বডা ফাংশন চালু হয়।
  • indicator: 'রিফ্রেশ করতে নিচের দিকে টানুন' অ্যাকশনের জন্য সিস্টেম যে ইন্ডিকেটর দেখায় তা কাস্টমাইজ করে।

প্রাথমিক উদাহরণ

এই স্নিপেট PullToRefreshBox-এর প্রাথমিক ব্যবহার দেখায়:

@Composable
fun PullToRefreshBasicSample(
    items: List<String>,
    isRefreshing: Boolean,
    onRefresh: () -> Unit,
    modifier: Modifier = Modifier
) {
    PullToRefreshBox(
        isRefreshing = isRefreshing,
        onRefresh = onRefresh,
        modifier = modifier
    ) {
        LazyColumn(Modifier.fillMaxSize()) {
            items(items) {
                ListItem({ Text(text = it) })
            }
        }
    }
}

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

  • PullToRefreshBox একটি LazyColumn-কে র‍্যাপ করে, যা স্ট্রিংয়ের একটি তালিকা দেখায়।
  • PullToRefreshBox-এর জন্য isRefreshing এবং onRefresh প্যারামিটার প্রয়োজন।
  • PullToRefreshBox ব্লকের মধ্যে থাকা কন্টেন্ট স্ক্রল করা যায় এমন কন্টেন্টকে বোঝায়।

ফলাফল

এই ভিডিওতে পূর্ববর্তী কোড থেকে বেসিক পুল-টু-রিফ্রেশ ইমপ্লিমেন্টেশন দেখানো হয়েছে:

ছবি ১। আইটেমের তালিকায় রিফ্রেশ করতে নিচের দিকে টানার প্রাথমিক প্রয়োগ।

উন্নত উদাহরণ: ইন্ডিকেটরের রঙ কাস্টমাইজ করুন

@Composable
fun PullToRefreshCustomStyleSample(
    items: List<String>,
    isRefreshing: Boolean,
    onRefresh: () -> Unit,
    modifier: Modifier = Modifier
) {
    val state = rememberPullToRefreshState()

    PullToRefreshBox(
        isRefreshing = isRefreshing,
        onRefresh = onRefresh,
        modifier = modifier,
        state = state,
        indicator = {
            Indicator(
                modifier = Modifier.align(Alignment.TopCenter),
                isRefreshing = isRefreshing,
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                color = MaterialTheme.colorScheme.onPrimaryContainer,
                state = state
            )
        },
    ) {
        LazyColumn(Modifier.fillMaxSize()) {
            items(items) {
                ListItem({ Text(text = it) })
            }
        }
    }
}

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

  • indicator প্যারামিটারে containerColor এবং color প্রপার্টির মাধ্যমে ইন্ডিকেটরের রঙ কাস্টমাইজ করা হয়।
  • rememberPullToRefreshState() রিফ্রেশ অ্যাকশনের স্ট্যাটাস ম্যানেজ করে। আপনি indicator প্যারামিটারের সাথে এই স্ট্যাটাস ব্যবহার করেন।

ফলাফল

এই ভিডিওতে রঙিন ইন্ডিকেটর সহ রিফ্রেশ করতে নিচের দিকে টানার প্রয়োগ দেখানো হয়েছে:

ছবি ২। কাস্টম স্টাইল সহ রিফ্রেশ করতে নিচের দিকে টানার সুবিধা।

উন্নত উদাহরণ: সম্পূর্ণ কাস্টমাইজ করা ইন্ডিকেটর তৈরি করুন

আগে থেকে থাকা কম্পোজেবল ও অ্যানিমেশন ব্যবহার করে আপনি জটিল কাস্টম ইন্ডিকেটর তৈরি করতে পারবেন। এই স্নিপেট দেখায় যে কীভাবে আপনার রিফ্রেশ করতে নিচের দিকে টানুন ইমপ্লিমেন্টেশনে সম্পূর্ণ কাস্টম ইন্ডিকেটর তৈরি করতে হয়:

@Composable
fun PullToRefreshCustomIndicatorSample(
    items: List<String>,
    isRefreshing: Boolean,
    onRefresh: () -> Unit,
    modifier: Modifier = Modifier
) {
    val state = rememberPullToRefreshState()

    PullToRefreshBox(
        isRefreshing = isRefreshing,
        onRefresh = onRefresh,
        modifier = modifier,
        state = state,
        indicator = {
            MyCustomIndicator(
                state = state,
                isRefreshing = isRefreshing,
                modifier = Modifier.align(Alignment.TopCenter)
            )
        }
    ) {
        LazyColumn(Modifier.fillMaxSize()) {
            items(items) {
                ListItem({ Text(text = it) })
            }
        }
    }
}

// ...
@Composable
fun MyCustomIndicator(
    state: PullToRefreshState,
    isRefreshing: Boolean,
    modifier: Modifier = Modifier,
) {
    Box(
        modifier = modifier.pullToRefresh(
            state = state,
            isRefreshing = isRefreshing,
            threshold = PositionalThreshold,
            onRefresh = {

            }
        ),
        contentAlignment = Alignment.Center
    ) {
        Crossfade(
            targetState = isRefreshing,
            animationSpec = tween(durationMillis = CROSSFADE_DURATION_MILLIS),
            modifier = Modifier.align(Alignment.Center)
        ) { refreshing ->
            if (refreshing) {
                CircularProgressIndicator(Modifier.size(SPINNER_SIZE))
            } else {
                val distanceFraction = { state.distanceFraction.coerceIn(0f, 1f) }
                Icon(
                    painter = rememberVectorPainter(AppIcons.CloudDownload),
                    contentDescription = "Refresh",
                    modifier = Modifier
                        .size(18.dp)
                        .graphicsLayer {
                            val progress = distanceFraction()
                            this.alpha = progress
                            this.scaleX = progress
                            this.scaleY = progress
                        }
                )
            }
        }
    }
}

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

  • আগের স্নিপেট লাইব্রেরির দেওয়া Indicator ব্যবহার করেছে। এই স্নিপেট MyCustomIndicator নামে একটি কাস্টম ইন্ডিকেটর কম্পোজেবল তৈরি করে। এই কম্পোজেবলে, pullToRefreshIndicator মডিফায়ার পজিশন করা এবং রিফ্রেশ ট্রিগার করা ম্যানেজ করে।
  • আগের স্নিপেটের মতো, উদাহরণটি PullToRefreshState ইনস্ট্যান্স এক্সট্র্যাক্ট করে, যাতে আপনি PullToRefreshBox এবং pullToRefreshModifier, দুটিতেই একই ইনস্ট্যান্স পাস করতে পারেন।
  • এই উদাহরণে কন্টেনারের রঙ এবং PullToRefreshDefaults ক্লাস থেকে পজিশন থ্রেশহোল্ড ব্যবহার করা হয়েছে। এইভাবে, আপনি মেটেরিয়াল লাইব্রেরি থেকে ডিফল্ট অ্যাকশন ও স্টাইলিং আবার ব্যবহার করতে পারবেন, তবে শুধুমাত্র আপনার আগ্রহের এলিমেন্ট কাস্টমাইজ করতে পারবেন।
  • MyCustomIndicator, ক্লাউড আইকন ও CircularProgressIndicator-এর মধ্যে ট্রানজিশন করতে Crossfade ব্যবহার করে। ব্যবহারকারী টানলে ক্লাউড আইকন বড় হয়, এবং রিফ্রেশ অ্যাকশন শুরু হলে CircularProgressIndicator-এ পরিবর্তিত হয়।
    • কোন স্ট্যাটাস দেখানো হবে (ক্লাউড আইকন বা সার্কুলার প্রগ্রেস ইন্ডিকেটর) তা নির্ধারণ করতে targetState, isRefreshing ব্যবহার করে।
    • animationSpec ট্রানজিশনের জন্য tween অ্যানিমেশনকে সংজ্ঞায়িত করে, যার নির্দিষ্ট সময়সীমা হল CROSSFADE_DURATION_MILLIS।
    • state.distanceFraction ব্যবহারকারী কতটা নিচে টেনেছেন তা দেখায়, 0f (টানা হয়নি) থেকে 1f (পুরোটা টানা হয়েছে) পর্যন্ত।
    • graphicsLayer মডিফায়ার স্কেল ও ট্রান্সপারেন্সি মডিফাই করে।

ফলাফল

এই ভিডিওতে পূর্ববর্তী কোড থেকে কাস্টম ইন্ডিকেটর দেখানো হয়েছে:

ছবি ৩। কাস্টম ইন্ডিকেটর সহ রিফ্রেশ করতে নিচের দিকে টানার সুবিধা।

অতিরিক্ত রিসোর্স