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

Text কম্পোজেবলের কন্টেন্ট স্টাইল করার জন্য একাধিক ঐচ্ছিক প্যারামিটার আছে। নিচে আমরা এমন প্যারামিটার তালিকাভুক্ত করেছি যা টেক্সটের সাথে সবচেয়ে সাধারণ ব্যবহারের ক্ষেত্রে প্রযোজ্য। Text-এর সব প্যারামিটারের জন্য, Compose 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-এ টেক্সটের রঙ পরিবর্তন করার বিষয়ে আরও জানা
• Compose-এ অ্যানিমেটিং ব্রাশ টেক্সট কালারিং
• একটি টেক্সট স্ট্রিংয়ে একাধিক লিঙ্ক যোগ করা