পাঠ্য ক্ষেত্র কনফিগার করুন

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

ব্রাশ API সহ স্টাইল ইনপুট

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

টেক্সট স্টাইল করতে ব্রাশ API ব্যবহার সম্পর্কে আরও তথ্যের জন্য, ব্রাশ 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)
)

বিল্ডঅ্যানোটেটেড স্ট্রিং এবং স্প্যানস্টাইল ব্যবহার করে, লিনিয়ার গ্রেডিয়েন্ট সহ, শুধুমাত্র পাঠ্যের একটি অংশ কাস্টমাইজ করতে।
চিত্র 1. TextField বিষয়বস্তুর জন্য একটি রংধনু গ্রেডিয়েন্ট প্রভাব।

পাঠ্য ক্ষেত্রের অবস্থা পরিচালনা করুন

TextField এর বিষয়বস্তু এবং বর্তমান নির্বাচনের জন্য TextFieldState নামে একটি ডেডিকেটেড স্টেট হোল্ডার ক্লাস ব্যবহার করে। TextFieldState আপনার আর্কিটেকচারে যেখানেই ফিট করে সেখানে উত্তোলনের জন্য ডিজাইন করা হয়েছে। TextFieldState দ্বারা প্রদত্ত 2টি প্রধান বৈশিষ্ট্য রয়েছে:

  • initialText : TextField বিষয়বস্তু।
  • initialSelection : কার্সার বা নির্বাচন বর্তমানে কোথায় রয়েছে তা নির্দেশ করে।

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

আপনি TextFieldState() ব্যবহার করতে পারেন TextField এ রাজ্য উত্তোলন করতে। এর জন্য, আমরা 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,
)

পাঠ্য ক্ষেত্রের ভিতরে প্রদর্শিত পাঠ্য ব্যবহারকারীর নাম সহ একটি পাঠ্যক্ষেত্র।
চিত্র 2. প্রাথমিক পাঠ্য হিসাবে "ব্যবহারকারীর নাম" সহ TextField

TextFieldBuffer দিয়ে টেক্সট পরিবর্তন করুন

একটি TextFieldBuffer একটি সম্পাদনাযোগ্য পাঠ্য ধারক হিসাবে কাজ করে, একটি StringBuilder এর মতো ফাংশন। এটি বর্তমান নির্বাচন সম্পর্কে পাঠ্য বিষয়বস্তু এবং তথ্য উভয়ই ধারণ করে।

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

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

val phoneNumberState = rememberTextFieldState()

LaunchedEffect(phoneNumberState) {
    phoneNumberState.edit { // TextFieldBuffer scope
        append("123456789")
    }
}

TextField(
    state = phoneNumberState,
    inputTransformation = InputTransformation { // TextFieldBuffer scope
        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 এবং আরও অনেক কিছু ব্যবহার করতে পারেন।

    val usernameState = rememberTextFieldState("I love Android")
    // textFieldState.text : I love Android
    // textFieldState.selection: TextRange(14, 14)
    usernameState.edit { insert(14, "!") }
    // textFieldState.text : I love Android!
    // textFieldState.selection: TextRange(15, 15)
    usernameState.edit { replace(7, 14, "Compose") }
    // textFieldState.text : I love Compose!
    // textFieldState.selection: TextRange(15, 15)
    usernameState.edit { append("!!!") }
    // textFieldState.text : I love Compose!!!!
    // textFieldState.selection: TextRange(18, 18)
    usernameState.edit { selectAll() }
    // textFieldState.text : I love Compose!!!!
    // textFieldState.selection: TextRange(0, 18)

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

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

  • clearText : সমস্ত পাঠ্য সাফ করে।

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

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

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

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

ইনপুট রূপান্তর সহ ব্যবহারকারীর ইনপুট ফিল্টার করুন

একটি ইনপুট রূপান্তর আপনাকে ব্যবহারকারীর কাছ থেকে ইনপুট ফিল্টার করতে দেয়। উদাহরণস্বরূপ, যদি আপনার TextField একটি আমেরিকান ফোন নম্বর নেয়, আপনি শুধুমাত্র 10 সংখ্যা গ্রহণ করতে চান। 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 (!TextUtils.isDigitsOnly(asCharSequence())) {
            revertAllChanges()
        }
    }
}

চেইন ইনপুট রূপান্তর

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

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

ইনপুট রূপান্তর যোগ করার পরে, TextField ইনপুট সর্বাধিক 10 সংখ্যা গ্রহণ করে।

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

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

একটি আমেরিকান ফোন নম্বর, সঠিকভাবে বন্ধনী, ড্যাশ এবং সংশ্লিষ্ট সূচকগুলির সাথে ফর্ম্যাট করা হয়েছে৷
চিত্র 3. সঠিক বিন্যাস এবং সংশ্লিষ্ট সূচক সহ একটি আমেরিকান ফোন নম্বর।

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

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

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

একটি ফোন নম্বর ফরম্যাট করতে, আপনার OutputTransformation সূচক 0 এ একটি খোলা বন্ধনী, সূচক 4 এ একটি বন্ধ বন্ধনী এবং 8 সূচকে একটি ড্যাশ যোগ করুন:

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()
)

কিভাবে রূপান্তর একসাথে কাজ করে

নিম্নলিখিত চিত্রটি পাঠ্য ইনপুট থেকে আউটপুটে রূপান্তরের প্রবাহ দেখায়:

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

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

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

  • capitalization
  • autoCorrect
  • keyboardType
  • imeAction

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

{% শব্দার্থে %} {% endverbatim %} {% শব্দার্থে %} {% endverbatim %}