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

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

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(
                    imageVector = Icons.Filled.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 ক্লাস থেকে কন্টেনার কালার ও পজিশন থ্রেশহোল্ড ব্যবহার করা হয়েছে। এইভাবে, আপনি Material লাইব্রেরি থেকে ডিফল্ট আচরণ ও স্টাইলিং আবার ব্যবহার করতে পারবেন, শুধুমাত্র সেইসব এলিমেন্ট কাস্টমাইজ করতে পারবেন যেগুলিতে আপনার আগ্রহ আছে।
  • MyCustomIndicator ক্লাউড আইকন ও CircularProgressIndicator-এর মধ্যে ট্রানজিশন করতে Crossfade ব্যবহার করে। ব্যবহারকারী পুল করার সাথে সাথে ক্লাউড আইকনটি বড় হতে থাকে এবং রিফ্রেশ অ্যাকশন শুরু হলে এটি CircularProgressIndicator-এ ট্রানজিট করে।
    • targetState কোন স্টেট দেখাতে হবে তা নির্ধারণ করতে isRefreshing ব্যবহার করে (ক্লাউড আইকন বা বৃত্তাকার প্রগ্রেস ইন্ডিকেটর)।
    • animationSpec ট্রানজিশনের জন্য tween অ্যানিমেশনকে সংজ্ঞায়িত করে, যার নির্দিষ্ট সময়সীমা CROSSFADE_DURATION_MILLIS।
    • state.distanceFraction থেকে 0f (কোনও পুল নেই) থেকে 1f (সম্পূর্ণ পুল করা হয়েছে) পর্যন্ত রেঞ্জ ব্যবহারকারী কতদূর নিচে টেনেছেন তা দেখায়।
    • graphicsLayer মডিফায়ার স্কেল ও স্বচ্ছতা পরিবর্তন করে।

ফলাফল

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

ছবি ৩. কাস্টম ইন্ডিকেটর সহ পুল-টু-রিফ্রেশ প্রয়োগ।

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