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

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

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

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

TextField প্রয়োগ করা বেছে নিন

TextField ইমপ্লিমেন্টেশনের দুটি লেভেল আছে:

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

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

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

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)
)
StateBasedText.kt

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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, "-")
    }
)
StateBasedText.kt

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)
  StateBasedText.kt

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

TextField(
    state = rememberTextFieldState(),
    outputTransformation = PhoneNumberOutputTransformation()
)
StateBasedText.kt

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

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

1. ইনপুট সোর্স থেকে ইনপুট পাওয়া যায়।
2. ইনপুট একটি InputTransformation-এর মাধ্যমে ফিল্টার করা হয়, যা TextFieldState-এ সেভ করা হয়।
3. ফর্ম্যাটিংয়ের জন্য ইনপুটকে OutputTransformation-এর মাধ্যমে পাস করা হয়।
4. ইনপুটটি TextField-এ দেখানো হয়।

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

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

• capitalization
• autoCorrect
• keyboardType
• imeAction

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

• টেক্সট ফিল্ডে ফোন নম্বর অটো-ফর্ম্যাট করা
• ব্যবহারকারীর টগল করা বিকল্পের উপর ভিত্তি করে পাসওয়ার্ড দেখানো বা লুকানো
• ব্যবহারকারী টাইপ করার সাথে সাথে ইনপুট যাচাই করা