আলতো চাপুন

অনেক কম্পোজেবলে ট্যাপ বা ক্লিকের জন্য অন্তর্নির্মিত সমর্থন থাকে এবং এতে একটি onClick ল্যাম্বডা অন্তর্ভুক্ত থাকে। উদাহরণস্বরূপ, আপনি একটি ক্লিকযোগ্য Surface তৈরি করতে পারেন যাতে পৃষ্ঠের সাথে মিথস্ক্রিয়া করার জন্য উপযুক্ত সমস্ত উপাদান ডিজাইন আচরণ অন্তর্ভুক্ত থাকে:

Surface(onClick = { /* handle click */ }) {
    Text("Click me!", Modifier.padding(24.dp))
}
TapAndPress.kt

কিন্তু ক্লিকই একমাত্র উপায় নয় যা একজন ব্যবহারকারী কম্পোজেবলের সাথে ইন্টারঅ্যাক্ট করতে পারে। এই পৃষ্ঠাটি এমন অঙ্গভঙ্গিগুলির উপর ফোকাস করে যা একটি একক পয়েন্টারকে জড়িত করে, যেখানে সেই ইভেন্ট পরিচালনার জন্য সেই পয়েন্টারের অবস্থান উল্লেখযোগ্য নয়৷ নিম্নলিখিত সারণী এই ধরনের অঙ্গভঙ্গি তালিকাভুক্ত করে:

আলতো চাপুন বা ক্লিক করুন

clickable হল একটি সাধারণভাবে ব্যবহৃত সংশোধক যা ট্যাপ বা ক্লিকে একটি সংমিশ্রণযোগ্য প্রতিক্রিয়া তৈরি করে। এই সংশোধকটি অতিরিক্ত বৈশিষ্ট্যগুলিও যোগ করে, যেমন ফোকাস, মাউস এবং স্টাইলাস ঘোরাফেরা করার জন্য সমর্থন এবং চাপলে একটি কাস্টমাইজযোগ্য ভিজ্যুয়াল ইঙ্গিত। সংশোধক শব্দের বিস্তৃত অর্থে "ক্লিক"-এর প্রতি সাড়া দেয়-- শুধু মাউস বা আঙুল দিয়েই নয়, কিবোর্ড ইনপুটের মাধ্যমে বা অ্যাক্সেসিবিলিটি পরিষেবা ব্যবহার করার সময়ও ইভেন্টে ক্লিক করে।

চিত্রগুলির একটি গ্রিড কল্পনা করুন, যেখানে কোনও ব্যবহারকারী ক্লিক করলে একটি চিত্র পূর্ণ-স্ক্রীন দেখায়:

আপনি এই আচরণটি বাস্তবায়ন করতে গ্রিডের প্রতিটি আইটেমে clickable সংশোধক যোগ করতে পারেন:

@Composable
private fun ImageGrid(photos: List<Photo>) {
    var activePhotoId by rememberSaveable { mutableStateOf<Int?>(null) }
    LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 128.dp)) {
        items(photos, { it.id }) { photo ->
            ImageItem(
                photo,
                Modifier.clickable { activePhotoId = photo.id }
            )
        }
    }
    if (activePhotoId != null) {
        FullScreenImage(
            photo = photos.first { it.id == activePhotoId },
            onDismiss = { activePhotoId = null }
        )
    }
}
TapAndPress.kt

clickable সংশোধক অতিরিক্ত আচরণ যোগ করে:

• interactionSource এবং indication , যেটি ডিফল্টভাবে একটি লহর আঁকে যখন একজন ব্যবহারকারী কম্পোজেবল ট্যাপ করে। হ্যান্ডলিং ইউজার ইন্টারঅ্যাকশন পৃষ্ঠায় এগুলি কীভাবে কাস্টমাইজ করবেন তা শিখুন।
• অ্যাক্সেসিবিলিটি পরিষেবাগুলিকে শব্দার্থবিদ্যার তথ্য সেট করে উপাদানের সাথে ইন্টারঅ্যাক্ট করার অনুমতি দেয়৷
• ফোকাস করার অনুমতি দিয়ে কীবোর্ড বা জয়স্টিক মিথস্ক্রিয়া সমর্থন করে এবং Enter টিপে বা ডি-প্যাডের কেন্দ্রে ইন্টারঅ্যাক্ট করতে পারে।
• উপাদানটিকে ঘোরানো যায় এমন করুন, যাতে এটি মাউস বা স্টাইলাস এর উপর ঘোরাফেরা করার প্রতিক্রিয়া জানায়।

একটি প্রাসঙ্গিক প্রসঙ্গ মেনু দেখাতে দীর্ঘক্ষণ প্রেস করুন

combinedClickable আপনাকে স্বাভাবিক ক্লিক আচরণের পাশাপাশি ডবল ট্যাপ বা দীর্ঘ-প্রেস আচরণ যোগ করতে দেয়। আপনি একটি প্রসঙ্গ মেনু দেখানোর জন্য combinedClickable ব্যবহার করতে পারেন যখন একজন ব্যবহারকারী একটি গ্রিড চিত্র স্পর্শ করে এবং ধরে রাখে:

var contextMenuPhotoId by rememberSaveable { mutableStateOf<Int?>(null) }
val haptics = LocalHapticFeedback.current
LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 128.dp)) {
    items(photos, { it.id }) { photo ->
        ImageItem(
            photo,
            Modifier
                .combinedClickable(
                    onClick = { activePhotoId = photo.id },
                    onLongClick = {
                        haptics.performHapticFeedback(HapticFeedbackType.LongPress)
                        contextMenuPhotoId = photo.id
                    },
                    onLongClickLabel = stringResource(R.string.open_context_menu)
                )
        )
    }
}
if (contextMenuPhotoId != null) {
    PhotoActionsSheet(
        photo = photos.first { it.id == contextMenuPhotoId },
        onDismissSheet = { contextMenuPhotoId = null }
    )
}
TapAndPress.kt

একটি সর্বোত্তম অনুশীলন হিসাবে, ব্যবহারকারী যখন উপাদানগুলিকে দীর্ঘক্ষণ চাপ দেয় তখন আপনার হ্যাপটিক প্রতিক্রিয়া অন্তর্ভুক্ত করা উচিত, এই কারণেই স্নিপেটে performHapticFeedback আহ্বান অন্তর্ভুক্ত করা হয়।

একটি স্ক্রিম ট্যাপ করে একটি রচনাযোগ্য খারিজ করুন

উপরের উদাহরণগুলিতে, clickable এবং combinedClickable আপনার কম্পোজেবলগুলিতে দরকারী কার্যকারিতা যোগ করুন। তারা ইন্টারঅ্যাকশনের উপর একটি ভিজ্যুয়াল ইঙ্গিত দেখায়, হোভারিং-এ সাড়া দেয় এবং ফোকাস, কীবোর্ড এবং অ্যাক্সেসিবিলিটি সমর্থন অন্তর্ভুক্ত করে। কিন্তু এই অতিরিক্ত আচরণ সবসময় কাম্য নয়।

চলুন চিত্র বিস্তারিত পর্দা তাকান. ব্যাকগ্রাউন্ডটি আধা-স্বচ্ছ হওয়া উচিত এবং ব্যবহারকারীর বিস্তারিত স্ক্রীন খারিজ করতে সেই পটভূমিতে ট্যাপ করতে সক্ষম হওয়া উচিত:

এই ক্ষেত্রে, সেই ব্যাকগ্রাউন্ডে ইন্টারঅ্যাকশনের উপর কোন ভিজ্যুয়াল ইঙ্গিত থাকা উচিত নয়, ঘোরাঘুরিতে সাড়া দেওয়া উচিত নয়, ফোকাসযোগ্য হওয়া উচিত নয় এবং কীবোর্ড এবং অ্যাক্সেসিবিলিটি ইভেন্টগুলিতে এর প্রতিক্রিয়া একটি সাধারণ কম্পোজেবলের থেকে আলাদা। clickable আচরণ মানিয়ে নেওয়ার চেষ্টা করার পরিবর্তে, আপনি একটি নিম্ন বিমূর্ততা স্তরে নেমে যেতে পারেন এবং detectTapGestures পদ্ধতির সাথে সমন্বয়ে সরাসরি pointerInput মডিফায়ার ব্যবহার করতে পারেন:

@Composable
private fun Scrim(onClose: () -> Unit, modifier: Modifier = Modifier) {
    val strClose = stringResource(R.string.close)
    Box(
        modifier
            // handle pointer input
            .pointerInput(onClose) { detectTapGestures { onClose() } }
            // handle accessibility services
            .semantics(mergeDescendants = true) {
                contentDescription = strClose
                onClick {
                    onClose()
                    true
                }
            }
            // handle physical keyboard input
            .onKeyEvent {
                if (it.key == Key.Escape) {
                    onClose()
                    true
                } else {
                    false
                }
            }
            // draw scrim
            .background(Color.DarkGray.copy(alpha = 0.75f))
    )
}
TapAndPress.kt

pointerInput মডিফায়ারের কী হিসাবে আপনি onClose ল্যাম্বডা পাস করেন। এটি স্বয়ংক্রিয়ভাবে ল্যাম্বডা পুনরায় কার্যকর করে, নিশ্চিত করে যে ব্যবহারকারী যখন স্ক্রিম ট্যাপ করে তখন সঠিক কলব্যাক কল করা হয়।

জুম করতে ডবল ট্যাপ করুন

কখনও কখনও clickable এবং combinedClickable সঠিক উপায়ে মিথস্ক্রিয়ায় প্রতিক্রিয়া জানাতে যথেষ্ট তথ্য অন্তর্ভুক্ত করে না। উদাহরণস্বরূপ, কম্পোজেবলের কম্পোজেবলের সীমার মধ্যে অবস্থানে অ্যাক্সেসের প্রয়োজন হতে পারে যেখানে মিথস্ক্রিয়া হয়েছিল।

এর চিত্র বিস্তারিত পর্দা আবার তাকান. একটি সর্বোত্তম অভ্যাস হল ডবল ট্যাপ করে ছবিটি জুম করা সম্ভব করে তোলা:

আপনি ভিডিওতে দেখতে পাচ্ছেন, ট্যাপ ইভেন্টের অবস্থানের চারপাশে জুম ইন করা হয়। আমরা যখন চিত্রের বাম অংশ বনাম ডান অংশে জুম করি তখন ফলাফল ভিন্ন হয়। আমরা আমাদের গণনার মধ্যে ট্যাপ অবস্থানকে অন্তর্ভুক্ত করতে detectTapGestures এর সাথে একত্রে pointerInput মডিফায়ার ব্যবহার করতে পারি:

var zoomed by remember { mutableStateOf(false) }
var zoomOffset by remember { mutableStateOf(Offset.Zero) }
Image(
    painter = rememberAsyncImagePainter(model = photo.highResUrl),
    contentDescription = null,
    modifier = modifier
        .pointerInput(Unit) {
            detectTapGestures(
                onDoubleTap = { tapOffset ->
                    zoomOffset = if (zoomed) Offset.Zero else
                        calculateOffset(tapOffset, size)
                    zoomed = !zoomed
                }
            )
        }
        .graphicsLayer {
            scaleX = if (zoomed) 2f else 1f
            scaleY = if (zoomed) 2f else 1f
            translationX = zoomOffset.x
            translationY = zoomOffset.y
        }
)
TapAndPress.kt