শৈলী পাঠ্য

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 composable-এ, অপরদিকে 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 এইচটিএমএল-এর ভেতরের লিঙ্কগুলোর স্টাইল নির্ধারণ করে। SpanStyle লিঙ্কগুলোর জন্য টেক্সট ডেকোরেশন, ফন্ট স্টাইল এবং রঙ নির্ধারণ করে।

  • Text কম্পোজেবলটি ফলাফলস্বরূপ প্রাপ্ত AnnotatedString প্রদর্শন করে।

ফলাফল

এই কোড স্নিপেটটি "Jetpack Compose"-কে একটি ক্লিকযোগ্য লিঙ্ক হিসেবে সক্রিয় করে, যা নীল রঙে স্টাইল করা, আন্ডারলাইন করা এবং ইটালিক করা থাকে:

একটি H1 হেডিং 'Jetpack Compose' এবং তার পরে 'Build better apps with Jetpack Compose', যেখানে Jetpack Compose হলো একটি ক্লিকযোগ্য লিঙ্ক যা নীল রঙ, আন্ডারলাইন এবং ইটালিক দিয়ে স্টাইল করা।
চিত্র ২। একটি শিরোনাম ও অনুচ্ছেদ, যেখানে অনুচ্ছেদের মধ্যে থাকা '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

পূর্বনির্ধারিত রঙের তালিকা সহ ব্রাশ এপিআই-এর `linearGradient` ফাংশন ব্যবহার করা।
চিত্র ৩। পূর্বনির্ধারিত রঙের তালিকা সহ ব্রাশ এপিআই-এর linearGradient ফাংশনের ব্যবহার।

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

ইন্টিগ্রেশন

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

একটি TextField মধ্যে ব্রাশ এপিআই (brush API) ব্যবহার সম্পর্কে আরও তথ্যের জন্য, “ব্রাশ এপিআই দিয়ে ইনপুট স্টাইল করুন” (Style input with Brush 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

টেক্সটের স্টাইল হিসেবে লিনিয়ারগ্রেডিয়েন্ট সহ একটি ডিফল্ট ব্রাশ ব্যবহার করা হচ্ছে।
চিত্র ৪। Text স্টাইল হিসেবে linearGradient সহ একটি ডিফল্ট ব্রাশের ব্যবহার।
পাঠ্যের পরিসরে অস্বচ্ছতা

টেক্সটের কোনো নির্দিষ্ট অংশের অস্বচ্ছতা (opacity) সামঞ্জস্য করতে, SpanStyle এর ঐচ্ছিক alpha প্যারামিটারটি ব্যবহার করুন। টেক্সটের উভয় অংশের জন্য একই ব্রাশ ব্যবহার করুন এবং সংশ্লিষ্ট স্প্যানে 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

buildAnnotatedString ও SpanStyle-এর alpha প্যারামিটারের সাথে linearGradient ব্যবহার করে কোনো টেক্সট স্প্যানে অস্বচ্ছতা যোগ করা হয়।
চিত্র ৫। buildAnnotatedString ও SpanStyle এর alpha প্যারামিটারের সাথে linearGradient ব্যবহার করে কোনো টেক্সট স্প্যানে অস্বচ্ছতা যোগ করা।

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

আপনি যেকোনো কম্পোজেবল-এ 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 মডিফায়ারের প্রয়োগ।

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

{% হুবহু %} {% endverbatim %} {% হুবহু %} {% endverbatim %}