টেক্সট স্টাইল করা

Text কম্পোজ করার উপযুক্ত আইটেমের কন্টেন্ট স্টাইল করার জন্য একাধিক ঐচ্ছিক প্যারামিটার আছে। নিচে, আমরা এমন প্যারামিটার তালিকাভুক্ত করেছি যা টেক্সটের সাথে সবচেয়ে সাধারণ ব্যবহারের ক্ষেত্রে কভার করে। Text-এর সব প্যারামিটারের জন্য, টেক্সট কম্পোজ করুন সোর্স কোড দেখুন।

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

টেক্সট স্টাইলিং সংক্রান্ত সাধারণ সমস্যা

নিচের বিভাগে আপনার টেক্সট স্টাইল করার সাধারণ পদ্ধতি বর্ণনা করা হয়েছে।

টেক্সটের রঙ পরিবর্তন করুন

@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}
TextSnippets.kt

টেক্সটের আকার পরিবর্তন করুন

@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}
TextSnippets.kt

টেক্সট ইটালিক করুন

টেক্সট ইটালিক করতে fontStyle প্যারামিটার ব্যবহার করুন (অথবা অন্য কোনও FontStyle সেট করুন)।

@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = FontStyle.Italic)
}
TextSnippets.kt

টেক্সট বোল্ড করা

টেক্সট মোটা করার জন্য fontWeight প্যারামিটার ব্যবহার করুন (অথবা অন্য FontWeight সেট করুন)।

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}
TextSnippets.kt

ছায়া যোগ করুন

style প্যারামিটার আপনাকে TextStyle ধরনের অবজেক্ট সেট করতে দেয় এবং একাধিক প্যারামিটার কনফিগার করতে দেয়, যেমন, শ্যাডো। Shadow, ছায়ার জন্য একটি রঙ অফসেট বা Text-এর সাপেক্ষে এটি কোথায় অবস্থিত এবং ব্লার রেডিয়াস পায়, যা এটি কতটা অস্পষ্ট দেখায়।

@Composable
fun TextShadow() {
    val offset = Offset(5.0f, 10.0f)
    Text(
        text = "Hello world!",
        style = TextStyle(
            fontSize = 24.sp,
            shadow = Shadow(
                color = Color.Blue, offset = offset, blurRadius = 3f
            )
        )
    )
}
TextSnippets.kt

টেক্সটে একাধিক স্টাইল যোগ করা

একই Text কম্পোজ করার উপযুক্ত আইটেমের মধ্যে আলাদা আলাদা স্টাইল সেট করতে, AnnotatedString, একটি স্ট্রিং ব্যবহার করুন যা ইচ্ছামতো অ্যানোটেশনের স্টাইল দিয়ে অ্যানোটেট করা যায়।

AnnotatedString হল একটি ডেটা ক্লাস যার মধ্যে এগুলি থাকে:

• Text ভ্যালু
• SpanStyleRange-এর List, যা পজিশন টেক্সট ভ্যালুর মধ্যে রেঞ্জ সহ ইনলাইন স্টাইলের সমতুল্য
• ParagraphStyleRange-এর List, যাতে টেক্সট অ্যালাইনমেন্ট, টেক্সট ডাইরেকশন, লাইন হাইট ও টেক্সট ইন্ডেন্ট স্টাইলিং উল্লেখ করা আছে

TextStyle ব্যবহার করা হয় Text কম্পোজেবলে, যেখানে SpanStyle ও ParagraphStyle ব্যবহার করা হয় AnnotatedString-এ। প্যারাগ্রাফে একাধিক স্টাইল সম্পর্কে আরও জানতে, প্যারাগ্রাফে একাধিক স্টাইল যোগ করুন দেখুন।

AnnotatedString-এ টাইপ-সেফ বিল্ডার আছে যা এটিকে আরও সহজে তৈরি করতে সাহায্য করে: buildAnnotatedString.

@Composable
fun MultipleStylesInText() {
    Text(
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("H")
            }
            append("ello ")

            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                append("W")
            }
            append("orld")
        }
    )
}
TextSnippets.kt

টেক্সটে লিঙ্ক সহ HTML দেখানো

আপনার Jetpack Compose অ্যাপ্লিকেশনে HTML-ফর্ম্যাট করা টেক্সট ও ক্লিক করা যায় এমন লিঙ্ক দেখাতে AnnotatedString.fromHtml() ব্যবহার করুন। এই ফাংশনটি HTML ট্যাগ সহ একটি স্ট্রিংকে AnnotatedString-এ কনভার্ট করে, যা স্টাইলিং এবং লিঙ্ক ম্যানেজ করার অনুমতি দেয়।

উদাহরণ: স্টাইল করা লিঙ্ক সহ HTML

এই স্নিপেটটি একটি লিঙ্ক সহ HTML-ফর্ম্যাট করা টেক্সট রেন্ডার করে, লিঙ্কে নির্দিষ্ট স্টাইলিং প্রয়োগ করে:

@Composable
fun AnnotatedHtmlStringWithLink(
    modifier: Modifier = Modifier,
    htmlText: String = """
       <h1>Jetpack Compose</h1>
       <p>
           Build <b>better apps</b> faster with <a href="https://www.android.com">Jetpack Compose</a>
       </p>
    """.trimIndent()
) {
    Text(
        AnnotatedString.fromHtml(
            htmlText,
            linkStyles = TextLinkStyles(
                style = SpanStyle(
                    textDecoration = TextDecoration.Underline,
                    fontStyle = FontStyle.Italic,
                    color = Color.Blue
                )
            )
        ),
        modifier
    )
}
HtmlStyling.kt

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

• AnnotatedString.fromHtml() htmlText স্ট্রিংটিকে একটি AnnotatedString-এ কনভার্ট করে। linkStyles প্যারামিটার লিঙ্ক কেমন দেখাবে তা কাস্টমাইজ করে।

• TextLinkStyles HTML-এর মধ্যে লিঙ্কগুলির স্টাইল নির্ধারণ করে। SpanStyle লিঙ্কের জন্য টেক্সট সজ্জা, ফন্ট স্টাইল ও রঙ সেট করে।

• Text কম্পোজ করার উপযুক্ত আইটেমটি ফলাফল হিসেবে AnnotatedString দেখায়।

ফলাফল

এই স্নিপেটটি ক্লিক করা যায় এমন লিঙ্ক হিসেবে "Jetpack Compose" চালু করে, যা নীল রঙ, আন্ডারলাইন ও ইটালিক ফন্টে স্টাইল করা হয়:

Brush-এর মাধ্যমে উন্নত স্টাইলিং চালু করুন

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

টেক্সট স্টাইলিংয়ের জন্য ব্রাশ ব্যবহার করা

TextStyle-এর মধ্যে বিল্ট-ইন ব্রাশ ব্যবহার করে আপনার টেক্সট কনফিগার করুন। যেমন, আপনি নিচের মতো করে আপনার টেক্সটে linearGradient ব্রাশ কনফিগার করতে পারেন:

val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/)

Text(
    text = text,
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = gradientColors
        )
    )
)
TextSnippets.kt

আপনি এই নির্দিষ্ট কালার স্কিম বা কালারিং স্টাইলের মধ্যে সীমাবদ্ধ নন। হাইলাইট করার জন্য আমরা একটি সহজ উদাহরণ দিলেও, আপনার টেক্সট আরও উন্নত করতে, বিল্ট-ইন ব্রাশ বা এমনকি শুধু SolidColor ব্যবহার করুন।

ইন্টিগ্রেশন

যেহেতু আপনি TextStyle ও SpanStyle-এর সাথে Brush ব্যবহার করতে পারবেন, TextField ও buildAnnotatedString-এর সাথে ইন্টিগ্রেশন নির্বিঘ্নে হয়।

TextField-এর মধ্যে ব্রাশ API ব্যবহার করা সম্পর্কে আরও তথ্য পেতে, ব্রাশ API-এর মাধ্যমে ইনপুট স্টাইল করা দেখুন।

SpanStyle ব্যবহার করে অতিরিক্ত স্টাইলিং

টেক্সটের কোনও অংশে ব্রাশ প্রয়োগ করা

আপনি যদি টেক্সটের কোনও অংশে ব্রাশ প্রয়োগ করতে চান, তাহলে আপনার পছন্দের ব্রাশ ও গ্রেডিয়েন্টের সাথে buildAnnotatedString ও SpanStyle API ব্যবহার করুন।

Text(
    text = buildAnnotatedString {
        append("Do not allow people to dim your shine\n")
        withStyle(
            SpanStyle(
                brush = Brush.linearGradient(
                    colors = rainbowColors
                )
            )
        ) {
            append("because they are blinded.")
        }
        append("\nTell them to put some sunglasses on.")
    }
)
TextSnippets.kt

টেক্সটের স্প্যানে অস্বচ্ছতা

টেক্সটের কোনও নির্দিষ্ট স্প্যানের অস্বচ্ছতা অ্যাডজাস্ট করতে, SpanStyle-এর ঐচ্ছিক alpha প্যারামিটার ব্যবহার করুন। টেক্সটের দুটি অংশের জন্যই একই ব্রাশ ব্যবহার করুন এবং সংশ্লিষ্ট স্প্যানে আলফা প্যারামিটার পরিবর্তন করুন। কোড স্যাম্পেলে, টেক্সটের প্রথম স্প্যানটি অর্ধেক অস্বচ্ছতা (alpha =.5f) সহ দেখানো হয়, যেখানে দ্বিতীয়টি সম্পূর্ণ অস্বচ্ছতা (alpha = 1f) সহ দেখানো হয়।

val brush = Brush.linearGradient(colors = rainbowColors)

buildAnnotatedString {
    withStyle(
        SpanStyle(
            brush = brush, alpha = .5f
        )
    ) {
        append("Text in ")
    }
    withStyle(
        SpanStyle(
            brush = brush, alpha = 1f
        )
    ) {
        append("Compose ❤️")
    }
}
TextSnippets.kt

টেক্সটে মারকিউ এফেক্ট প্রয়োগ করা

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

নিচের স্নিপেটটি একটি Text কম্পোজ করার উপযুক্ত আইটেমে একটি সাধারণ মারকিউ এফেক্ট প্রয়োগ করে:

@Composable
fun BasicMarqueeSample() {
    // Marquee only animates when the content doesn't fit in the max width.
    Column(Modifier.width(400.dp)) {
        Text(
            "Learn about why it's great to use Jetpack Compose",
            modifier = Modifier.basicMarquee(),
            fontSize = 50.sp
        )
    }
}
TextSnippets.kt

ছবি ৬. টেক্সটে basicMarquee মডিফায়ার প্রয়োগ করা হয়েছে।

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

• কম্পোজ টেক্সট কালারিং সম্পর্কে আরও জানুন
• Compose-এ ব্রাশ টেক্সট কালারিং অ্যানিমেট করা
• টেক্সটের একটি স্ট্রিংয়ে একাধিক লিঙ্ক কাজ করে