متن در برنامه های اجتماعی و پیام رسانی

متن در قلب برنامه های اجتماعی قرار دارد، جایی که کاربران افکار را به اشتراک می گذارند، احساسات را بیان می کنند و داستان می گویند. این سند نحوه کار موثر با متن را با تمرکز بر شکلک، استایل و یکپارچه سازی محتوای غنی بررسی می کند.

کار با ایموجی

ایموجی به بخشی جدایی ناپذیر از ارتباطات مدرن، به ویژه در برنامه های اجتماعی و پیام رسانی تبدیل شده است. آنها از موانع زبانی فراتر می روند و به کاربران اجازه می دهند احساسات و ایده ها را سریع و موثر بیان کنند.

پشتیبانی از ایموجی در Compose

Jetpack Compose، جعبه ابزار مدرن UI اعلامی اندروید، مدیریت ایموجی ها را ساده می کند:

  • ورودی : مؤلفه TextField به طور بومی از ورودی ایموجی پشتیبانی می کند.
  • نمایش : مؤلفه Text Compose شکلک‌ها را به‌درستی ارائه می‌کند و از ظاهر ثابت آن‌ها در دستگاه‌ها و پلتفرم‌هایی که ارائه‌دهنده فونت‌های قابل دانلود سازگار با emoji2 را ارائه می‌کنند، مانند دستگاه‌هایی که توسط سرویس‌های Google Play ارائه می‌شوند، اطمینان حاصل می‌کند.

پوشش‌های شکلک نمایش برای نمایش شکلک‌ها در Jetpack Compose، از جمله نحوه اطمینان از اینکه برنامه شما جدیدترین فونت‌های ایموجی را نمایش می‌دهد، چگونه مطمئن شوید که شکلک‌ها به درستی کار می‌کنند اگر برنامه شما از Views و Compose در یک فعالیت استفاده می‌کند، و نحوه عیب‌یابی زمانی که ایموجی‌ها نیستند. همانطور که انتظار می رود نشان داده شود.

پشتیبانی از ایموجی در Views

اگر از Android Views استفاده می‌کنید، کتابخانه AppCompat نسخه 1.4 یا بالاتر از شکلک‌های زیر کلاس‌های پلتفرم TextView پشتیبانی می‌کند:

اگر یک نمای سفارشی ایجاد می‌کنید که زیر کلاس مستقیم یا غیرمستقیم TextView است، پیاده‌سازی AppCompat (به جای پیاده‌سازی پلتفرم) را گسترش دهید تا از شکلک داخلی پشتیبانی کنید. پشتیبانی از شکلک‌های مدرن نشان می‌دهد که چگونه یکپارچه‌سازی شکلک‌های خود را آزمایش و عیب‌یابی کنید، از شکلک‌ها بدون AppCompat پشتیبانی کنید، از شکلک‌ها در نمای‌های سفارشی پشتیبانی کنید، از فونت‌های جایگزین یا ارائه‌دهندگان فونت‌ها و موارد دیگر پشتیبانی کنید.

با استفاده از Emoji Picker

Jetpack Emoji Picker یک نمای آندروید است که فهرست دسته‌بندی‌شده‌ای از شکلک‌ها، انواع چسبنده و پشتیبانی از شکلک‌های اخیراً استفاده‌شده را ارائه می‌کند — سازگار با چندین نسخه و دستگاه اندروید. این یک راه آسان برای ارتقاء سطح ادغام ایموجی برنامه شما است.

با وارد کردن کتابخانه در build.gradle شروع کنید. 

dependencies {
   implementation("androidx.emoji2:emojipicker:$version")
}

استفاده از Emoji Picker با Compose

شما Emoji Picker را در Compose با استفاده از AndroidView composable می‌سازید. این قطعه شامل شنونده‌ای است که به شما اطلاع می‌دهد وقتی یک شکلک انتخاب شده است:

AndroidView(
    modifier = Modifier.fillMaxSize(),
    factory = { context ->
        val emojiPickerView = EmojiPickerView(context)
        emojiPickerView.setOnEmojiPickedListener(this::updateTextField)
        emojiPickerView
    },
)

Compose 1.7 عملکردهای جدیدی را به BasicTextField اضافه می کند، از جمله پشتیبانی از TextFieldState ، که می تواند در ViewModel شما قرار گیرد:

private val emojiTextFieldState = TextFieldState()

@Composable fun EmojiTextField() {
    BasicTextField(
        state = emojiTextFieldState,
    )
}

می توانید از TextFieldState برای درج متن در موقعیت مکان نما یا جایگزینی متن انتخاب شده استفاده کنید، گویی که در IME تایپ می کنید:

private fun insertStringAsIfTyping(textFieldState: TextFieldState, string: String) {
    textFieldState.edit {
        replace(selection.start, selection.end, string)
        // clear selection on replace if necessary
        if (hasSelection) selection = TextRange(selection.end)
    }
}

پاسخ به تماس می تواند BasicTextField با استفاده از تابع helper به روز کند: 

private fun updateTextField(emojiViewItem: EmojiViewItem) {
    insertStringAsIfTyping(emojiTextFieldState, emojiViewItem.emoji)
}

استفاده از Emoji Picker با Views

Emoji Picker همچنین با Views به خوبی کار می کند.

EmojiPickerView را باد کنید. به صورت اختیاری emojiGridColumns و emojiGridRows را بر اساس اندازه دلخواه هر سلول ایموجی تنظیم کنید.

<androidx.emoji2.emojipicker.EmojiPickerView
    …
    app:emojiGridColumns="9" />

یک کاراکتر در موقعیت مکان نما وارد کنید یا متن انتخاب شده را جایگزین کنید:

// Consider unregistering/reregistering anyTextWatcher that you might have as part of this
private fun insertStringAsIfTyping(editText: EditText, string: String) {
    val stringBuffer = StringBuffer(editText.text.toString())
    val index = editText.selectionStart
    if ( !editText.hasSelection() ) {
        stringBuffer.insert(index, string)
    } else {
        stringBuffer.replace(index, editText.selectionEnd, string)
    }
    editText.setText(stringBuffer.toString())
    editText.setSelection(index + string.length)
}

برای ایموجی انتخابی شنونده ای ارائه دهید و از آن برای اضافه کردن کاراکترها به EditText استفاده کنید. 

// a listener example
emojiPickerView.setOnEmojiPickedListener {
   val editText = findViewById<EditText>(R.id.edit_text)
   insertStringAsIfTyping(editText, it.emoji)
}

متن سبک

با اعمال تمایزات بصری برای متن، مانند سبک فونت، اندازه، وزن و رنگ، می توانید خوانایی، سلسله مراتب و جذابیت کلی زیبایی شناسی رابط کاربری برنامه اجتماعی یا پیام رسانی خود را افزایش دهید. سبک های متن به کاربران کمک می کند تا به سرعت اطلاعات را تجزیه کنند، انواع مختلف پیام ها را تشخیص دهند و عناصر مهم را شناسایی کنند.

سبک متن در نوشتن

Text composable گزینه های زیادی برای استایل ارائه می دهد، از جمله:

  • رنگ متن : Color را تنظیم کنید تا متن برجسته شود.
  • اندازه قلم : FontSize برای مقیاس مناسب کنترل کنید.
  • سبک قلم : از FontStyle برای ایتالیک کردن متن استفاده کنید.
  • وزن قلم : FontWeight برای تغییرات متنی پررنگ، سبک و غیره تنظیم کنید.
  • خانواده فونت : از FontFamily برای انتخاب فونت مناسب استفاده کنید.
Text(
    text = "Hello 👋",
    color = Color.Blue
    fontSize = 18.sp,
    fontWeight = FontWeight.Bold,
    fontFamily = FontFamily.SansSerif
)

می‌توانید این گزینه‌های یک ظاهر طراحی را به‌طور پیوسته در سراسر برنامه‌تان با استفاده از تم‌ها تنظیم کنید. 

MaterialTheme(
    // This theme would include Color.Blue (as appropriate for dark and light themes)
    colorScheme = colorScheme,
    content = content,
    typography = Typography(
        titleLarge = TextStyle(
            fontSize = 18.sp,
            fontFamily = titleFont,
            fontWeight = FontWeight.Bold
        ),
    ),
)

چند سبک در متن اضافه کنید

با استفاده از AnnotatedString می‌توانید سبک‌های مختلفی را در یک Text قابل تنظیم تنظیم کنید.

AnnotatedString دارای سازنده ایمن نوع ، buildAnnotatedString است تا ایجاد آن را آسان تر کند.

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

            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                append("S")
            }
            append("tyle")
        }
    )
}

برای اطلاعات بیشتر در مورد استایل نوشتار در Compose، از جمله افزودن سایه ، استایل‌سازی پیشرفته با قلم مو ، و شفافیت ، به Style text مراجعه کنید.

متن را در Views سبک کنید

با Views، برای تایپوگرافی منسجم به سبک ها و تم ها تکیه کنید. برای اطلاعات بیشتر در مورد نحوه اعمال طرح زمینه سفارشی برای نماهای برنامه خود، به سبک ها و تم ها مراجعه کنید. اگر می‌خواهید سبک‌های مختلفی را در یک نمای متنی تنظیم کنید، برای اطلاعات بیشتر در مورد نحوه تغییر متن به روش‌های مختلف، از جمله افزودن رنگ ، قابل کلیک کردن متن، مقیاس‌بندی اندازه متن ، و کشیدن متن به روش سفارشی، به Spans مراجعه کنید. .

از صفحه کلیدهای تصویری و سایر محتوای غنی پشتیبانی کنید

کاربران اغلب می خواهند با استفاده از استیکرها، انیمیشن ها و دیگر انواع محتوای غنی ارتباط برقرار کنند. برای ساده‌تر کردن دریافت محتوای غنی برای برنامه‌ها، Android 12 (سطح API 31) یک API یکپارچه معرفی کرد که به برنامه شما امکان می‌دهد محتوا را از هر منبعی بپذیرد: کلیپ‌بورد، صفحه‌کلید، یا کشیدن و رها کردن. برای سازگاری با نسخه های قبلی اندروید (در حال حاضر به سطح API 14 بازگشته است)، توصیه می کنیم از نسخه Android Jetpack (AndroidX) این API استفاده کنید.

شما یک OnReceiveContentListener را به مؤلفه‌های رابط کاربری متصل می‌کنید و زمانی که محتوا از طریق هر مکانیزمی درج می‌شود، پاسخ تماس دریافت می‌کنید. پاسخ به تماس، مکانی واحد برای کد شما می شود که می تواند تمام محتوا را دریافت کند، از متن ساده و سبک گرفته تا نشانه گذاری، تصاویر، فیلم ها، فایل های صوتی و موارد دیگر.

برای آشنایی بیشتر با نحوه اجرای پشتیبانی در برنامه خود، به دریافت محتوای غنی رجوع کنید. Jetpack Compose اکنون دارای اصلاح‌کننده‌های dragAndDropSource و dragAndDropTarget برای ساده‌سازی اجرای کشیدن و رها کردن در برنامه شما و بین برنامه‌های دیگر است.