টেক্সট ফিল্ড কনফিগার করা

TextField ব্যবহারকারীদের টেক্সট লিখতে ও পরিবর্তন করতে দেয়। আপনি দুই ধরনের টেক্সট ফিল্ড ব্যবহার করতে পারবেন: স্টেট-ভিত্তিক টেক্সট ফিল্ড এবং ভ্যালু-ভিত্তিক টেক্সট ফিল্ড। আপনি যে ধরনের কন্টেন্ট দেখাতে চান তা বেছে নিন:

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

ফিচার

ভ্যালু-ভিত্তিক টেক্সট ফিল্ড

রাজ্য-ভিত্তিক টেক্সট ফিল্ড

রাজ্য-ভিত্তিক সুবিধা

স্টেট ম্যানেজমেন্ট

onValueChange কলব্যাকের মাধ্যমে টেক্সট ফিল্ডের স্ট্যাটাস আপডেট করে। onValueChange-এর রিপোর্ট করা পরিবর্তনের ভিত্তিতে আপনার নিজের রাজ্যের value আপডেট করার দায়িত্ব আপনার।

টেক্সট ইনপুট স্টেট (ভ্যালু, সিলেকশন ও কম্পোজিশন) ম্যানেজ করতে স্পষ্টভাবে TextFieldState অবজেক্ট ব্যবহার করে। এই স্টেট মনে রাখা ও শেয়ার করা যাবে।

  • onValueChange কলব্যাক সরিয়ে দেওয়া হয়েছে, যার ফলে আপনি অ্যাসিঙ্ক আচরণ ইন্ট্রোডিউস করতে পারবেন না।
  • স্টেটটি রিকম্পোজিশন, কনফিগারেশন এবং প্রসেস বন্ধ করার পরেও টিকে থাকে।

ভিজ্যুয়াল ট্রান্সফর্মেশন

দেখানো টেক্সট কেমন দেখাবে তা পরিবর্তন করতে VisualTransformation ব্যবহার করে। এটি সাধারণত একটি ধাপে ইনপুট এবং আউটপুট ফর্ম্যাটিং উভয়ই পরিচালনা করে।

স্টেটে কমিট করার আগে ব্যবহারকারীর ইনপুট পরিবর্তন করার জন্য InputTransformation এবং অন্তর্নিহিত স্টেট ডেটা পরিবর্তন না করে টেক্সট ফিল্ডের কন্টেন্ট ফর্ম্যাট করার জন্য OutputTransformation ব্যবহার করে।

  • OutputTransformation-এর মাধ্যমে আসল র টেক্সট ও রূপান্তরিত টেক্সটের মধ্যে অফসেট ম্যাপিং আপনাকে আর দিতে হবে না।

লাইনের সীমা

লাইনের সংখ্যা নিয়ন্ত্রণ করতে singleLine: Boolean, maxLines: Int এবং minLines: Int গ্রহণ করে।

টেক্সট ফিল্ডে কতগুলি লাইন থাকতে পারে তার সর্বনিম্ন ও সর্বোচ্চ সংখ্যা কনফিগার করতে lineLimits: TextFieldLineLimits ব্যবহার করে।

  • TextFieldLineLimits ধরনের lineLimits প্যারামিটার প্রদান করে লাইন সীমা কনফিগার করার সময় অস্পষ্টতা দূর করে।

সুরক্ষিত টেক্সট ফিল্ড

N/A

SecureTextField হল পাসওয়ার্ড ফিল্ড লেখার জন্য স্টেট-ভিত্তিক টেক্সট ফিল্ডের উপরে তৈরি করা একটি কম্পোজেবল।

  • এটি আপনাকে ব্যাকগ্রাউন্ডে নিরাপত্তার জন্য অপ্টিমাইজ করতে দেয় এবং textObfuscationMode-এর সাথে আগে থেকে নির্ধারিত UI সহ আসে।

এই পৃষ্ঠায় বর্ণনা করা হয়েছে যে কীভাবে আপনি TextField প্রয়োগ করতে, TextField ইনপুট স্টাইল করতে এবং অন্যান্য TextField বিকল্প কনফিগার করতে পারবেন, যেমন কীবোর্ড বিকল্প এবং ব্যবহারকারীর ইনপুট ভিজ্যুয়ালি ট্রান্সফর্ম করা।

TextField ইমপ্লিমেন্টেশন বেছে নিন

TextField প্রয়োগ করার দুটি লেভেল আছে:

  1. TextField হল মেটেরিয়াল ডিজাইন প্রয়োগ। আমরা আপনাকে এই ইমপ্লিমেন্টেশন বেছে নিতে সাজেস্ট করি কারণ এটি মেটেরিয়াল ডিজাইন নির্দেশিকা অনুসরণ করে:
  2. BasicTextField ব্যবহারকারীদের হার্ডওয়্যার বা সফ্টওয়্যার কীবোর্ড ব্যবহার করে টেক্সট এডিট করার সুবিধা দেয়, কিন্তু ইঙ্গিত বা প্লেসহোল্ডারের মতো কোনও সাজসজ্জা প্রদান করে না।

TextField(
    state = rememberTextFieldState(initialText = "Hello"),
    label = { Text("Label") }
)

এডিট করা যায় এমন টেক্সট ফিল্ড যাতে শব্দ আছে

OutlinedTextField(
    state = rememberTextFieldState(),
    label = { Text("Label") }
)

এডিট করা যায় এমন টেক্সট ফিল্ড, যার বেগুনি রঙের বর্ডার ও লেবেল আছে।

TextField নম্বর স্টাইল

TextField এবং BasicTextField কাস্টমাইজেশনের জন্য অনেক সাধারণ প্যারামিটার শেয়ার করে। TextField-এর সম্পূর্ণ তালিকা TextField সোর্স কোডে উপলভ্য। এটি কিছু প্রয়োজনীয় প্যারামিটারের অসম্পূর্ণ তালিকা:

  • textStyle
  • lineLimits

TextField(
    state = rememberTextFieldState("Hello\nWorld\nInvisible"),
    lineLimits = TextFieldLineLimits.MultiLine(maxHeightInLines = 2),
    placeholder = { Text("") },
    textStyle = TextStyle(color = Color.Blue, fontWeight = FontWeight.Bold),
    label = { Text("Enter text") },
    modifier = Modifier.padding(20.dp)
)

একাধিক লাইনের TextField, যেখানে দুটি এডিট করা যায় এমন লাইন এবং লেবেল আছে

আপনার ডিজাইনে Material TextField বা OutlinedTextField-এর প্রয়োজন হলে, আমরা BasicTextField-এর পরিবর্তে TextField ব্যবহার করার সাজেশন দিই। তবে, BasicTextField ব্যবহার করা উচিত যখন এমন ডিজাইন তৈরি করা হয় যেখানে Material স্পেসিফিকেশন থেকে সাজসজ্জার প্রয়োজন হয় না।

লাইনের সীমা কনফিগার করুন

TextField কম্পোজেবল একটি একক অক্ষ বরাবর স্ক্রোলিং সমর্থন করে। স্ক্রল করার প্রক্রিয়া lineLimits প্যারামিটার দ্বারা নির্ধারিত হয়। এক লাইনের জন্য কনফিগার করা TextField অনুভূমিকভাবে স্ক্রল করে, যেখানে একাধিক লাইনের TextField উল্লম্বভাবে স্ক্রল করে।

আপনার TextField-এর জন্য উপযুক্ত লাইন কনফিগারেশন বেছে নিতে TextFieldLineLimits ব্যবহার করুন:

TextField(
    state = rememberTextFieldState(),
    lineLimits = TextFieldLineLimits.SingleLine
)

টেক্সট সহ একটি লাইন টেক্সট ফিল্ড

SingleLine কনফিগারেশনে নিম্নলিখিত বৈশিষ্ট্যগুলি রয়েছে:

  • টেক্সট কখনও র‍্যাপ হয় না এবং নতুন লাইন যোগ করার অনুমতি দেয় না।
  • TextField-এর উচ্চতা সবসময় নির্দিষ্ট থাকে।
  • টেক্সট উপচে পড়লে, এটি অনুভূমিকভাবে স্ক্রল করে।

TextField(
    state = rememberTextFieldState("Hello\nWorld\nHello\nWorld"),
    lineLimits = TextFieldLineLimits.MultiLine(1, 4)
)

টেক্সট সহ একাধিক লাইনের টেক্সট ফিল্ড

MultiLine কনফিগারেশনে নিম্নলিখিত বৈশিষ্ট্যগুলি রয়েছে:

  • দুটি প্যারামিটার গ্রহণ করে: minHeightInLines এবং maxHeightInLines।
  • টেক্সট ফিল্ডটি অন্তত minHeightInLines লম্বা।
  • টেক্সট ওভারফ্লো হলে, এটি র‍্যাপ করা হবে।
  • টেক্সটের জন্য আরও লাইনের প্রয়োজন হলে, ফিল্ডটি maxHeightInLines লম্বা না হওয়া পর্যন্ত বড় হতে থাকে এবং উল্লম্বভাবে স্ক্রল করে।

Brush API-এর মাধ্যমে স্টাইল ইনপুট

আপনার TextField-এ আরও উন্নত স্টাইলিংয়ের জন্য আপনি Brush API ব্যবহার করতে পারেন। নিম্নলিখিত বিভাগ থেকে আপনি জানতে পারবেন যে কীভাবে ব্রাশ ব্যবহার করে TextField ইনপুটে রঙের সমাহার যোগ করতে পারবেন।

টেক্সট স্টাইল করার জন্য Brush API ব্যবহার করা সম্পর্কে আরও তথ্যের জন্য, Brush API-এর মাধ্যমে উন্নত স্টাইলিং চালু করুন দেখুন।

TextStyle ব্যবহার করে রঙিন গ্রেডিয়েন্ট প্রয়োগ করুন

TextField-এর মধ্যে টাইপ করার সময় রঙের সমাহার প্রয়োগ করতে, আপনার TextField-এর জন্য TextStyle হিসেবে আপনার পছন্দের ব্রাশ সেট করুন। এই উদাহরণে, আমরা linearGradient সহ একটি বিল্ট-ইন ব্রাশ ব্যবহার করি যাতে TextField-এ টেক্সট টাইপ করার সাথে সাথে রেইনবো গ্রেডিয়েন্ট এফেক্ট দেখা যায়।

val brush = remember {
    Brush.linearGradient(
        colors = listOf(Color.Red, Color.Yellow, Color.Green, Color.Blue, Color.Magenta)
    )
}
TextField(
    state = rememberTextFieldState(), textStyle = TextStyle(brush = brush)
)

টেক্সট ফিল্ডে টেক্সট টাইপ করা হচ্ছে, যা রেইনবো গ্রেডিয়েন্ট এফেক্ট দেখাচ্ছে।
ছবি ১. TextField কন্টেন্টের জন্য রামধনু গ্রেডিয়েন্ট এফেক্ট।

টেক্সট ফিল্ডের স্ট্যাটাস ম্যানেজ করুন

TextField তার কন্টেন্ট ও বেছে নেওয়ার জন্য TextFieldState নামক একটি ডেডিকেটেড স্টেট হোল্ডার ক্লাস ব্যবহার করে। আপনার আর্কিটেকচারে যেখানেই এটি ফিট করে সেখানেই TextFieldState হোস্ট করার জন্য ডিজাইন করা হয়েছে। TextFieldState-এর মাধ্যমে প্রদান করা ২টি প্রধান প্রপার্টি আছে:

  • initialText: TextField-এর কন্টেন্ট।
  • initialSelection: কার্সর বা বাছাই করা অংশ কোথায় আছে তা দেখায়।

TextFieldState-কে অন্যান্য অ্যাপ্রোচ থেকে যা আলাদা করে, যেমন onValueChange কলব্যাক, তা হল TextFieldState সম্পূর্ণ ইনপুট ফ্লোকে সম্পূর্ণরূপে এনক্যাপসুলেট করে। এর মধ্যে সঠিক ব্যাকিং ডেটা স্ট্রাকচার, ইনলাইনিং ফিল্টার ও ফর্ম্যাটার ব্যবহার করা এবং বিভিন্ন সোর্স থেকে আসা সব এডিট সিঙ্ক করা অন্তর্ভুক্ত।

TextField-এ স্টেট হোস্ট করতে আপনি TextFieldState() ব্যবহার করতে পারবেন। এর জন্য, আমরা rememberTextFieldState() ফাংশন ব্যবহার করার সাজেশন দিই। rememberTextFieldState() আপনার কম্পোজেবলে TextFieldState ইনস্ট্যান্স তৈরি করে, স্টেট অবজেক্ট মনে রাখা হয়েছে কিনা তা নিশ্চিত করে এবং বিল্ট-ইন সেভ ও রিস্টোর করার কার্যকারিতা প্রদান করে:

val usernameState = rememberTextFieldState()
TextField(
    state = usernameState,
    lineLimits = TextFieldLineLimits.SingleLine,
    placeholder = { Text("Enter Username") }
)

rememberTextFieldState-এ একটি ফাঁকা প্যারামিটার থাকতে পারে বা ইনিশিয়ালাইজেশনের সময় টেক্সটের ভ্যালু দেখানোর জন্য একটি প্রাথমিক ভ্যালু পাস করা থাকতে পারে। পরবর্তী রিকম্পোজিশনে অন্য কোনও ভ্যালু পাস করা হলে, স্টেট ভ্যালু আপডেট করা হয় না। শুরু করার পরে স্ট্যাটাস আপডেট করতে, TextFieldState-এ এডিট পদ্ধতি কল করুন।

TextField(
    state = rememberTextFieldState(initialText = "Username"),
    lineLimits = TextFieldLineLimits.SingleLine,
)

টেক্সট ফিল্ডের মধ্যে 'ব্যবহারকারীর নাম' টেক্সট সহ একটি TextField দেখা যাচ্ছে।
ছবি ২. TextField, যেখানে "ইউজারনেম" হল প্রাথমিক টেক্সট।

TextFieldBuffer-এর মাধ্যমে টেক্সট পরিবর্তন করুন

TextFieldBuffer এডিট করা যায় এমন টেক্সট কন্টেনার হিসেবে কাজ করে, যার ফাংশন StringBuilder-এর মতোই। এতে টেক্সট কন্টেন্ট এবং বেছে নেওয়া অংশ সম্পর্কে তথ্য, উভয়ই থাকে।

TextFieldState.edit, InputTransformation.transformInput বা OutputTransformation.transformOutput-এর মতো ফাংশনে রিসিভার স্কোপ হিসেবে আপনি প্রায়ই TextFieldBuffer দেখতে পান। এইসব ফাংশনে, আপনি প্রয়োজন অনুযায়ী TextFieldBuffer পড়তে বা আপডেট করতে পারবেন। এরপর, এইসব পরিবর্তন হয় TextFieldState-এ কমিট করা হয় অথবা OutputTransformation-এর ক্ষেত্রে রেন্ডারিং পাইপলাইনে পাস করা হয়।

আপনি বাফারের কন্টেন্ট পরিবর্তন করতে append, insert, replace বা delete-এর মতো স্ট্যান্ডার্ড এডিটিং ফাংশন ব্যবহার করতে পারেন। বেছে নেওয়ার স্ট্যাটাস পরিবর্তন করতে, সরাসরি এর selection: TextRange ভেরিয়েবল সেট করুন অথবা placeCursorAtEnd বা selectAll-এর মতো ইউটিলিটি ফাংশন ব্যবহার করুন। বেছে নেওয়া অংশটি TextRange দ্বারা দেখানো হয়, যেখানে শুরুর ইনডেক্স অন্তর্ভুক্ত এবং শেষের ইনডেক্স অন্তর্ভুক্ত নয়। (3, 3)-এর মতো একই শুরু ও শেষ ভ্যালু সহ TextRange, কোনও অক্ষর বেছে না নেওয়া কার্সার পজিশন চিহ্নিত করে।

val phoneNumberState = rememberTextFieldState("1234567890")

TextField(
    state = phoneNumberState,
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Phone
    ),
    inputTransformation = InputTransformation.maxLength(10).then {
        if (!asCharSequence().isDigitsOnly()) {
            revertAllChanges()
        }
    },
    outputTransformation = OutputTransformation {
        if (length > 0) insert(0, "(")
        if (length > 4) insert(4, ")")
        if (length > 8) insert(8, "-")
    }
)

TextFieldState-এ টেক্সট এডিট করুন

আপনার স্টেট ভেরিয়েবলের মাধ্যমে সরাসরি স্টেট এডিট করার জন্য একাধিক পদ্ধতি আছে:

  • edit: আপনাকে স্টেট কন্টেন্ট এডিট করতে দেয় এবং TextFieldBuffer ফাংশন দেয় যাতে আপনি insert, replace, append এবং আরও অনেক মেথড ব্যবহার করতে পারেন।

    // Initial textFieldState text passed in is "I love Android"
    // textFieldState.text : I love Android
    // textFieldState.selection: TextRange(14, 14)
    textFieldState.edit { insert(14, "!") }
    // textFieldState.text : I love Android!
    // textFieldState.selection: TextRange(15, 15)
    textFieldState.edit { replace(7, 14, "Compose") }
    // textFieldState.text : I love Compose!
    // textFieldState.selection: TextRange(15, 15)
    textFieldState.edit { append("!!!") }
    // textFieldState.text : I love Compose!!!!
    // textFieldState.selection: TextRange(18, 18)
    textFieldState.edit { selectAll() }
    // textFieldState.text : I love Compose!!!!
    // textFieldState.selection: TextRange(0, 18)

  • setTextAndPlaceCursorAtEnd: বর্তমান টেক্সট মুছে দেয়, প্রদত্ত টেক্সট দিয়ে এটি প্রতিস্থাপন করে এবং শেষে কার্সর সেট করে।

    textFieldState.setTextAndPlaceCursorAtEnd("I really love Android")
    // textFieldState.text : I really love Android
    // textFieldState.selection : TextRange(21, 21)

  • clearText: সব টেক্সট মুছে দেয়।

    textFieldState.clearText()
    // textFieldState.text :
    // textFieldState.selection : TextRange(0, 0)

অন্যান্য TextFieldState ফাংশনের জন্য, TextFieldState রেফারেন্স দেখুন।

ব্যবহারকারীর ইনপুট পরিবর্তন করুন

নিম্নলিখিত বিভাগে ব্যবহারকারীর ইনপুট কীভাবে পরিবর্তন করতে হয় তা বর্ণনা করা হয়েছে। ইনপুট ট্রান্সফর্মেশন আপনাকে ব্যবহারকারীর টাইপ করার সময় TextField ইনপুট ফিল্টার করতে দেয়, যেখানে আউটপুট ট্রান্সফর্মেশন ব্যবহারকারীর ইনপুট স্ক্রিনে দেখানোর আগে ফর্ম্যাট করে।

ইনপুট ট্রান্সফর্মেশনের মাধ্যমে ব্যবহারকারীর ইনপুট ফিল্টার করুন

ইনপুট ট্রান্সফর্মেশন আপনাকে ব্যবহারকারীর থেকে ইনপুট ফিল্টার করতে দেয়। যেমন, আপনার TextField যদি মার্কিন যুক্তরাষ্ট্রের ফোন নম্বর গ্রহণ করে, তাহলে আপনি শুধু ১০ সংখ্যার নম্বর গ্রহণ করতে চাইবেন। InputTransformation-এর ফলাফল TextFieldState-এ সেভ করা হয়।

সাধারণ InputTransformation ব্যবহারের ক্ষেত্রে বিল্ট-ইন ফিল্টার আছে। দৈর্ঘ্য সীমিত করতে, InputTransformation.maxLength()-এ কল করুন:

TextField(
    state = rememberTextFieldState(),
    lineLimits = TextFieldLineLimits.SingleLine,
    inputTransformation = InputTransformation.maxLength(10)
)

কাস্টম ইনপুট ট্রান্সফর্মেশন

InputTransformation হল একটি সিঙ্গল ফাংশন ইন্টারফেস। আপনার কাস্টম InputTransformation প্রয়োগ করার সময়, আপনাকে TextFieldBuffer.transformInput ওভাররাইড করতে হবে:

class CustomInputTransformation : InputTransformation {
    override fun TextFieldBuffer.transformInput() {
    }
}

ফোন নম্বরের জন্য, একটি কাস্টম ইনপুট ট্রান্সফর্মেশন যোগ করুন যা শুধুমাত্র TextField-এ সংখ্যা টাইপ করার অনুমতি দেয়:

class DigitOnlyInputTransformation : InputTransformation {
    override fun TextFieldBuffer.transformInput() {
        if (!asCharSequence().isDigitsOnly()) {
            revertAllChanges()
        }
    }
}

চেন ইনপুট ট্রান্সফর্মেশন

আপনার টেক্সট ইনপুটে একাধিক ফিল্টার যোগ করতে, then এক্সটেনশন ফাংশন ব্যবহার করে InputTransformation চেইন করুন। ফিল্টারগুলি ক্রমানুসারে কার্যকর করা হয়। সবচেয়ে ভালো পদ্ধতি হিসেবে, প্রথমে সবচেয়ে বেশি বেছে নেওয়া ফিল্টার প্রয়োগ করুন যাতে ডেটার উপর অপ্রয়োজনীয় ট্রান্সফর্মেশন এড়ানো যায়, যা শেষ পর্যন্ত ফিল্টার করে বাদ দেওয়া হবে।

TextField(
    state = rememberTextFieldState(),
    inputTransformation = InputTransformation.maxLength(6)
        .then(CustomInputTransformation()),
)

ইনপুট ট্রান্সফর্মেশন যোগ করার পরে, TextField ইনপুটে সর্বাধিক ১০টি সংখ্যা গ্রহণ করা হয়।

ইনপুট দেখানোর আগে ফর্ম্যাট করুন

OutputTransformation-এর সাহায্যে আপনি স্ক্রিনে দেখানোর আগে ব্যবহারকারীর ইনপুট ফর্ম্যাট করতে পারবেন। InputTransformation-এর মতো, OutputTransformation-এর মাধ্যমে করা ফর্ম্যাটিং TextFieldState-এ সেভ করা হয় না। আগের ফোন নম্বরের উদাহরণে, আপনাকে সঠিক জায়গায় বন্ধনী ও ড্যাশ যোগ করতে হবে:

একটি আমেরিকান ফোন নম্বর, বন্ধনী, ড্যাশ এবং সংশ্লিষ্ট ইনডেক্স সহ সঠিকভাবে ফর্ম্যাট করা।
ছবি ৩. সঠিক ফর্ম্যাটিং ও সংশ্লিষ্ট ইন্ডেক্স সহ মার্কিন যুক্তরাষ্ট্রের ফোন নম্বর।

এটি হল ভ্যালু-ভিত্তিক TextField-এ VisualTransformation ম্যানেজ করার আপডেট করা পদ্ধতি, যার মূল পার্থক্য হল আপনাকে তাদের অফসেট ম্যাপিং গণনা করতে হবে না।

OutputTransformation হল একটি একক অ্যাবস্ট্রাক্ট মেথড ইন্টারফেস। কাস্টম OutputTransformation প্রয়োগ করতে, আপনাকে transformOutput পদ্ধতি ওভাররাইড করতে হবে:

class CustomOutputTransformation : OutputTransformation {
    override fun TextFieldBuffer.transformOutput() {
    }
}

ফোন নম্বর ফর্ম্যাট করতে, আপনার OutputTransformation-এর ইন্ডেক্স ০-তে একটি ওপেনিং প্যারেন্থেসিস, ইন্ডেক্স ৪-এ একটি ক্লোজিং প্যারেন্থেসিস এবং ইন্ডেক্স ৮-এ একটি ড্যাশ যোগ করুন:

class PhoneNumberOutputTransformation : OutputTransformation {
    override fun TextFieldBuffer.transformOutput() {
        if (length > 0) insert(0, "(")
        if (length > 4) insert(4, ")")
        if (length > 8) insert(8, "-")
    }
}

এরপর, TextField-এ আপনার OutputTransformation যোগ করুন:

TextField(
    state = rememberTextFieldState(),
    outputTransformation = PhoneNumberOutputTransformation()
)

ট্রান্সফর্মেশন কীভাবে একসাথে কাজ করে

নিচের ডায়াগ্রামে টেক্সট ইনপুট থেকে ট্রান্সফর্মেশন হয়ে আউটপুট পর্যন্ত ফ্লো দেখানো হয়েছে:

টেক্সট ইনপুট কীভাবে টেক্সট আউটপুটে পরিণত হওয়ার আগে রূপান্তরের মধ্য দিয়ে যায় তার একটি ভিজ্যুয়ালাইজেশন।
ছবি ৪. টেক্সট ইনপুট কীভাবে টেক্সট আউটপুটে রূপান্তরিত হয় তা এই ডায়াগ্রামে দেখানো হয়েছে।
  1. ইনপুট সোর্স থেকে ইনপুট পাওয়া গেছে।
  2. ইনপুটটি InputTransformation-এর মাধ্যমে ফিল্টার করা হয়, যা TextFieldState-এ সেভ করা হয়।
  3. ফর্ম্যাট করার জন্য ইনপুটটি OutputTransformation-এর মাধ্যমে পাস করা হয়।
  4. ইনপুটটি TextField-এ দেখানো হয়েছে।

কীবোর্ড বিকল্প সেট করা

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

  • capitalization
  • autoCorrect
  • keyboardType
  • imeAction

KeyboardOptions ক্লাসে এখন একটি নতুন বুলিয়ান প্যারামিটার, showKeyboardOnFocus অন্তর্ভুক্ত করা হয়েছে, যা আপনি বিশেষভাবে TextField কম্পোনেন্টের জন্য ব্যবহার করেন যা TextFieldState-এর সাথে ইন্টিগ্রেট করা হয়েছে। এই বিকল্পটি সফ্টওয়্যার কীবোর্ডের আচরণ নিয়ন্ত্রণ করে যখন TextField ব্যবহারকারীর সরাসরি ইন্টারঅ্যাকশন ছাড়া অন্য উপায়ে ফোকাস অর্জন করে (যেমন, প্রোগ্রাম্যাটিকভাবে)।

KeyboardOptions.showKeyboardOnFocus-এর ভ্যালু true হিসেবে সেট করা থাকলে, TextField পরোক্ষভাবে ফোকাস পেলেও সফ্টওয়্যার কীবোর্ড অটোমেটিক দেখানো হয় না। এই ধরনের ক্ষেত্রে, কীবোর্ড দেখানোর জন্য ব্যবহারকারীকে TextField-এ ট্যাপ করতে হবে।

কীবোর্ড ইন্টার‍্যাকশন লজিক নির্ধারণ করুন

Android-এর সফ্টওয়্যার কীবোর্ডের অ্যাকশন বোতাম আপনার অ্যাপ্লিকেশনের মধ্যে ইন্টার‍্যাক্টিভ উত্তরের সুবিধা দেয়। অ্যাকশন বোতাম কনফিগার করার ব্যাপারে আরও তথ্যের জন্য, কীবোর্ড বিকল্প সেট করুন বিভাগ দেখুন।

সফ্টওয়্যার কীবোর্ড অ্যাকশন বোতাম (একটি চেকমার্ক আইকন) লাল রঙে বৃত্তাকার।
ছবি ৫. সফ্টওয়্যার কীবোর্ড অ্যাকশন বোতাম।

ব্যবহারকারী এই অ্যাকশন বোতামে ট্যাপ করলে কী ঘটবে তা নির্ধারণ করতে, onKeyboardAction প্যারামিটার ব্যবহার করুন। এই প্যারামিটার KeyboardActionHandler নামের একটি ঐচ্ছিক ফাংশনাল ইন্টারফেস গ্রহণ করে। KeyboardActionHandler ইন্টারফেসে একটি মাত্র পদ্ধতি, onKeyboardAction(performDefaultAction: () -> Unit) আছে। এই onKeyboardAction পদ্ধতির জন্য একটি ইমপ্লিমেন্টেশন প্রদান করে, আপনি কাস্টম লজিক চালু করতে পারেন যা ব্যবহারকারী কীবোর্ডের অ্যাকশন বোতাম প্রেস করলে এক্সিকিউট হয়।

কয়েকটি স্ট্যান্ডার্ড কীবোর্ড অ্যাকশনের ধরন বিল্ট-ইন ডিফল্ট অ্যাকশনের সাথে আসে। যেমন, অ্যাকশনের ধরন হিসেবে ImeAction.Next বা ImeAction.Previous বেছে নিলে, ডিফল্ট হিসেবে, যথাক্রমে পরবর্তী বা পূর্ববর্তী ইনপুট ফিল্ডে ফোকাস শিফট হবে। একইভাবে, ImeAction.Done-এ সেট করা অ্যাকশন বোতাম সাধারণত সফ্টওয়্যার কীবোর্ড বন্ধ করে দেয়। এইসব ডিফল্ট ফাংশনালিটি অটোমেটিক এক্সিকিউট করা হয় এবং আপনাকে কোনও KeyboardActionHandler দিতে হয় না।

এছাড়াও, আপনি এইসব ডিফল্ট অ্যাকশন ছাড়াও কাস্টম আচরণ প্রয়োগ করতে পারবেন। আপনি KeyboardActionHandler প্রদান করলে, এটির onKeyboardAction পদ্ধতি performDefaultAction ফাংশন পায়। বর্তমান IME অ্যাকশনের সাথে যুক্ত স্ট্যান্ডার্ড ডিফল্ট অ্যাকশন ট্রিগার করতে, আপনার কাস্টম লজিকের মধ্যে যেকোনও সময় এই performDefaultAction() ফাংশন কল করতে পারবেন।

TextField(
    state = textFieldViewModel.usernameState,
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
    onKeyboardAction = { performDefaultAction ->
        textFieldViewModel.validateUsername()
        performDefaultAction()
    }
)

এই স্নিপেটটি রেজিস্ট্রেশন স্ক্রিনে একটি সাধারণ ব্যবহারের উদাহরণ দেখায় যেখানে একটি ইউজারনেম ফিল্ড রয়েছে। এই ফিল্ডের জন্য, কীবোর্ড অ্যাকশন বোতামের জন্য ImeAction.Next বেছে নেওয়া হয়েছে। এই বিকল্পটি পরবর্তী পাসওয়ার্ড ফিল্ডে দ্রুত, নির্বিঘ্ন নেভিগেশন চালু করে।

এই স্ট্যান্ডার্ড নেভিগেশন ছাড়াও, ব্যবহারকারী পাসওয়ার্ড লিখতে এগিয়ে যাওয়ার সাথে সাথে ইউজারনেমের জন্য একটি ব্যাকগ্রাউন্ড যাচাইকরণ প্রক্রিয়া শুরু করার প্রয়োজনীয়তা রয়েছে। ImeAction.Next-এর সাথে ডিফল্ট ফোকাস-সুইচিং আচরণ যাতে এই কাস্টম ভ্যালিডেশন লজিকের সাথে বজায় থাকে, তার জন্য performDefaultAction() ফাংশনটি কল করা হয়। performDefaultAction() কল করলে তা অন্তর্নিহিত ফোকাস ম্যানেজমেন্ট সিস্টেমকে ইমপ্লিসিটলি ট্রিগার করে যাতে ফোকাস পরবর্তী উপযুক্ত UI এলিমেন্টে সরানো যায় এবং প্রত্যাশিত নেভিগেশনাল ফ্লো বজায় থাকে।

একটি সুরক্ষিত পাসওয়ার্ড ফিল্ড তৈরি করুন

SecureTextField হল স্টেট-ভিত্তিক টেক্সট ফিল্ডের উপরে তৈরি করা একটি কম্পোজেবল যা পাসওয়ার্ড ফিল্ড লেখার জন্য ব্যবহার করা হয়। পাসওয়ার্ড টেক্সট ফিল্ড তৈরি করার জন্য আমরা SecureTextField ব্যবহার করার সাজেশন দিই, কারণ এটি ডিফল্ট হিসেবে অক্ষর ইনপুট লুকায় এবং কাট ও কপি অ্যাকশন বন্ধ করে দেয়।

SecureTextField-এ textObfuscationMode আছে, যা ব্যবহারকারী কীভাবে অক্ষর ইনপুট দেখেন তা নিয়ন্ত্রণ করে। textObfuscationMode-এর কাছে নিম্নলিখিত বিকল্পগুলি রয়েছে:

  • Hidden: সব ইনপুট লুকায়। ডেস্কটপ প্ল্যাটফর্মে ডিফল্ট অ্যাকশন।

    একটি সুরক্ষিত টেক্সট ফিল্ড যেখানে টাইপ করা অক্ষর লুকানো থাকে।

  • Visible: সব ইনপুট দেখায়।

    একটি সুরক্ষিত টেক্সট ফিল্ড যেখানে টাইপ করা অক্ষর দেখা যায়।

  • RevealLastTyped: শেষ অক্ষরটি ছাড়া সব ইনপুট লুকায়। মোবাইল ডিভাইসে ডিফল্ট অ্যাকশন।

    একটি সুরক্ষিত টেক্সট ফিল্ড যেখানে শুধুমাত্র শেষ টাইপ করা অক্ষরটি অল্প সময়ের জন্য দেখানো হয়।

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