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

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 ব্যবহার করার সাজেশন দিই। তবে, BasicTextField ব্যবহার করা উচিত যখন এমন ডিজাইন তৈরি করা হয় যেখানে Material স্পেসিফিকেশন থেকে সাজসজ্জার প্রয়োজন হয় না।

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

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

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

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

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

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, "-")
    }
)
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 এক্সটেনশন ফাংশন ব্যবহার করে InputTransformation চেইন করুন। ফিল্টারগুলি ক্রমানুসারে কার্যকর করা হয়। সবচেয়ে ভালো পদ্ধতি হিসেবে, প্রথমে সবচেয়ে বেশি বেছে নেওয়া ফিল্টার প্রয়োগ করুন যাতে ডেটার উপর অপ্রয়োজনীয় ট্রান্সফর্মেশন এড়ানো যায়, যা শেষ পর্যন্ত ফিল্টার করে বাদ দেওয়া হবে।

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

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

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

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

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

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

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

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