جت‌پک کامپوز در اندروید: نمایش و استایل‌ دهی متن با تابع Text

جت‌پک کامپوز در اندروید: نمایش و استایل‌ دهی متن با تابع Text

معرفی تابع Text

تابع Text یک تابع از کامپوز (Compose) است که باهاش میتونیم متن ها رو در اندروید نمایش بدیم؛ برای نمایش متن، باید متن رو به صورت String به پارامتر text تابع پاس بدیم.

Text(
    text: String
)
                

استایل دهی متن در تابع Text

با استفاده از پارامتر های تابع Text میتونیم متن رو استایل دهی کنیم.

<<Function>>
androidx.compose.material3.Text
Parameters
modifier: Modifier با استفاده از Modifier میتونیم برای تابع یک سری ویژگی های عمومی تعریف کنیم.
color: Color رنگ متن رو تغییر میده.
fontSize: TextUnit اندازه ی متن رو تغییر میده.
fontWeight: FontWeight وزن متن رو تغییر میده (Bold, Medium, Normal و ...).
fontFamily: FontFamily فونت مورد استفاده در متن رو تغییر میده.
fontStyle: FontStyle استایل فونت رو تغییر میده (Italic, Normal).
letterSpacing: TextUnit فاصله بین حروف متن رو تغییر میده.
lineHeight: TextUnit ارتفاع هر خط در متن رو تغییر میده.
textDecoration: TextDecoration دکوراسیون متن رو تغییر میده (Underline, Linethrough, None).
textAlign: TextAlign محل قرار گیری متن در داخل کادر رو مشخص میکنه (Center, End, Start, ...).
maxLines: Int مشخص میکنه متن حداکثر در چند خط نمایش داده بشه، مقدار پیشفرضش Int.MAX_VALUE است.
overflow: TextOverflow نحوه نمایش متن، زمانی که طول متن از maxLines بیشتر شد (Clip, Ellipsis, Visible).

در مثال زیر میخوایم یک متن رو با اندازه 100 sp با وزن Bold و فونت Monospace تعریف کنیم و رنگ متن رو آبی کنیم.

@Composable
fun MyHead(title: String){
    Text(
        text = title,
        color = Color(0xFF0D47A1),
        fontSize = 100.sp,
        fontWeight = FontWeight.Bold,
        fontFamily = FontFamily.Monospace
    )
}
                

در بالا sp یک اکستنشن پراپرتی است که یک نمونه از TextUnit رو بر میگردونه.

در مثال زیر میخوایم یک متن نمایش بدیم که زیرش خط کشیده شده باشه و اندازه متن 18 sp باشه.

@Composable
fun MyDescription(description: String){
    Text(
        text = description,
        textDecoration = TextDecoration.Underline,
        fontSize = 18.sp
    )
}
            

در زیر میخوایم متن های طولانی رو فقط در یک خط نمایش بدیم.

@Composable
fun MyOneLineText(text: String, modifier: Modifier = Modifier){
    Text(
        text = text,
        overflow = TextOverflow.Ellipsis,
        maxLines =  1,
        modifier = modifier,
        fontSize = 24.sp
    )
}
             

میتونیم یک نمونه از TextStyle ایجاد کنیم و پارامتر های گفته شده رو بهش پاس بدیم و در نهایت خودشو به پارامتر style در تابع Text پاس بدیم.

@Composable
fun MyTitle(title: String, modifier: Modifier){
    Text(
        text = title,
        modifier = modifier.background(Color(0xFFF5F5F5)).padding(16.dp),
        style = TextStyle(
            color = Color(0xFF0D47A1),
            letterSpacing = 0.5.sp,
            lineHeight = 80.sp, 
            fontSize = 70.sp, 
            textAlign = TextAlign.Center
        )
    )
}
            

میتونیم هر کدوم از مثال های گفته شده رو داخل تابع setContent که در قسمت قبل گفته شد صدا بزنیم.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            HelloWorldTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    MyText(
                        "Hello World",
                        Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun MyTitle(title: String, modifier: Modifier){
    Text(
        text = title,
        modifier = modifier.background(Color(0xFFF5F5F5)).padding(16.dp),
        style = TextStyle(
            color = Color(0xFF0D47A1),
            letterSpacing = 0.5.sp,
            lineHeight = 80.sp,
            fontSize = 70.sp,
            textAlign = TextAlign.Center
        )
    )
}
            

خلاصه

  • تابع Text یک تابع از کامپوز است که ازش برای نمایش متن استفاده می‌کنیم.
  • پراپرتی sp یک پراپرتی اکستنشن است که یک نمونه از TextUnit رو برمیگردونه.
  • برای تزیین متن در تابع Text پارمتر های مختلفی وجود داره که میتونیم ویژگی های ظاهری متن رو باهاشون تغییر بدیم.
  • میتونیم ویژگی های ظاهری متن رو با کلاس TextStyle تعریف کنیم.

بازخورد و دیدگاه‌ ها

اولین نفری باشید که در این صفحه نظر می‌دهید

notifications برای اطلاع از جدیدترین مطالب و پست های مرتبط، عضو کانال تلگرام ما بشید.

arrow_drop_up
کپی شد!