ফ্লোটিং অ্যাকশন বোতাম

একটি ফ্লোটিং অ্যাকশন বোতাম (এফএবি) একটি উচ্চ-জোরযুক্ত বোতাম যা ব্যবহারকারীকে একটি অ্যাপ্লিকেশনে একটি প্রাথমিক ক্রিয়া সম্পাদন করতে দেয়। এটি একটি একক, ফোকাসড অ্যাকশন প্রচার করে যা একজন ব্যবহারকারীর সবচেয়ে সাধারণ পথ এবং এটি সাধারণত স্ক্রিনের নীচে ডানদিকে নোঙর করা পাওয়া যায়।

এই তিনটি ব্যবহারের ক্ষেত্রে বিবেচনা করুন যেখানে আপনি একটি FAB ব্যবহার করতে পারেন:

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

মেটেরিয়াল ডিজাইনে, চার ধরনের FAB আছে:

  • FAB : সাধারণ আকারের একটি ভাসমান অ্যাকশন বোতাম।
  • ছোট FAB : একটি ছোট ভাসমান অ্যাকশন বোতাম।
  • বড় FAB : একটি বড় ভাসমান অ্যাকশন বোতাম।
  • এক্সটেন্ডেড FAB : একটি ভাসমান অ্যাকশন বোতাম যাতে শুধু একটি আইকন ছাড়াও আরও কিছু থাকে।
চারটি ভাসমান অ্যাকশন বোতাম উপাদানগুলির প্রতিটির একটি উদাহরণ।
চিত্র 1. চারটি ভাসমান অ্যাকশন বোতামের ধরন।

API পৃষ্ঠ

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

  • onClick : ব্যবহারকারী বোতাম টিপে যখন ফাংশন বলা হয়।
  • containerColor : বোতামের রঙ।
  • contentColor : আইকনের রঙ।

ফ্লোটিং অ্যাকশন বোতাম

একটি সাধারণ ফ্লোটিং অ্যাকশন বোতাম তৈরি করতে, মৌলিক FloatingActionButton কম্পোজেবল ব্যবহার করুন। নিম্নলিখিত উদাহরণ একটি FAB এর একটি মৌলিক বাস্তবায়ন প্রদর্শন করে: 

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

গোলাকার কোণ, একটি ছায়া, এবং একটি 'অ্যাড' আইকন সহ একটি আদর্শ ভাসমান অ্যাকশন বোতাম৷
চিত্র 2. একটি ভাসমান অ্যাকশন বোতাম।

ছোট বোতাম

একটি ছোট ভাসমান অ্যাকশন বোতাম তৈরি করতে, কম্পোজেবল SmallFloatingActionButton ব্যবহার করুন। নিম্নলিখিত উদাহরণটি কাস্টম রঙের সংযোজন সহ কীভাবে তা করতে হয় তা প্রদর্শন করে। 

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}
FloatingActionButton.kt

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

SmallFloatingActionButton এর একটি বাস্তবায়ন যাতে একটি 'অ্যাড' আইকন রয়েছে।
চিত্র 3. একটি ছোট ভাসমান অ্যাকশন বোতাম।

বড় বোতাম

একটি বড় ভাসমান অ্যাকশন বোতাম তৈরি করতে, কম্পোজযোগ্য LargeFloatingActionButton ব্যবহার করুন। এই কম্পোজেবলটি অন্যান্য উদাহরণ থেকে উল্লেখযোগ্যভাবে আলাদা নয় কারণ এটি একটি বড় বোতামে পরিণত হয়।

নিম্নলিখিত একটি বৃহৎ FAB এর একটি সরল বাস্তবায়ন।

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

LargeFloatingActionButton এর একটি বাস্তবায়ন যাতে একটি 'অ্যাড' আইকন রয়েছে।
চিত্র 4. একটি বড় ভাসমান অ্যাকশন বোতাম।

বর্ধিত বোতাম

আপনি ExtendedFloatingActionButton কম্পোজেবল দিয়ে আরও জটিল ফ্লোটিং অ্যাকশন বোতাম তৈরি করতে পারেন। এটি এবং FloatingActionButton মধ্যে মূল পার্থক্য হল এটিতে ডেডিকেটেড icon এবং text প্যারামিটার রয়েছে। তারা আপনাকে আরও জটিল বিষয়বস্তু সহ একটি বোতাম তৈরি করতে দেয় যা সঠিকভাবে এর বিষয়বস্তুকে মানানসই করে।

নিম্নলিখিত স্নিপেটটি প্রদর্শন করে কিভাবে ExtendedFloatingActionButton বাস্তবায়ন করতে হয়, icon এবং text জন্য পাস করা মানগুলির উদাহরণ সহ। 

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}
FloatingActionButton.kt

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

ExtendedFloatingActionButton এর একটি বাস্তবায়ন যা 'বর্ধিত বোতাম' এবং একটি সম্পাদনা আইকন বলে পাঠ্য প্রদর্শন করে।
চিত্র 5. পাঠ্য এবং একটি আইকন উভয় সহ একটি ভাসমান অ্যাকশন বোতাম।

অতিরিক্ত সম্পদ