اضافه کردن emoji به اپلیکیشن اندروید
سلام ! مثل همیشه با قدرت بیشتر برگشتیم ! امیدوارم حالتون خوب باشه بدون مقدمه برویم به سراغ اضافه کردن emoji به اپلیکیشن اندروید شما .شاید این emoji ها را در برنامه تلگرام دیده باشید و خواسته باشید آنها را به اپلیکیشن خود اضافه کنید Emoji ها واقعا فوق العاده هستند ? در ادامه با ما همراه باشید.
دقت کنید باید خط های زیر را در Gradle خود قرار دهید.
1 2 3 4 5 6 7 8 9 10 | repositories { maven { url "https://dl.bintray.com/hani-momanii/maven"} } dependencies { . . . // Supernova Emoji compile 'hani.momanii.supernova_emoji_library:supernova-emoji-library:0.0.2' } |
این رو اشاره کنیم که emoji ها قابلیت render را فقط در بخش Text fields ها دارند.
syntax های ارتباط با emoji ها بسیار ساده هستند یعنی با چند خط کد شما می توانید از اموجی در اپ خود استفاده کنید و سازنده ها (constructer ) در اموجی چهار پارامتر ورودی Context, RootView, EmojiconEditText و ImageView را می گیرند. که در پایین تر به آنها می پردازیم.
برای نمایش emoji ها در بخش textview از EmojiconTextView باید استفاده کنید.
اولین کد برای برقراری ارتباط با emoji ها
1 2 3 |
EmojIconActions emojIcon= new EmojIconActions(this, rootView, emojiconEditText, emojiImageView);
emojIcon.ShowEmojIcon(); |
اگر می خواهید با استفاده از فایل xml ان را ایجا کنید به جای editText معمولی از EmojiconEditText باید استفاده کنید.
1 2 3 4 5 | <hani.momanii.supernova_emoji_library.Helper.EmojiconEditText android:id="@+id/emojicon_edit_text" android:layout_width="match_parent" android:layout_height="wrap_content" emojicon:emojiconSize="28sp" /> |
و به جای استفاده از textView باید از EmojiconTextView استفاده کنید.
1 2 3 4 5 | <hani.momanii.supernova_emoji_library.Helper.EmojiconTextView android:id="@+id/emojicon_text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" emojicon:emojiconSize="28sp"/> |
برای سویچ کردن بین کیبورد معمولی و کیبورد اموجی می تونید از setIconsIds() استفاده کنید که دو پارامتر ورودی keyboard Icon ID و smiley Icon ID می توان استفاده کرد.
1 | emojIcon.setIconsIds(R.drawable.ic_action_keyboard,R.drawable.smiley); |
استفاده از اموجی های پیشفرض دستگاه
SuperNove-Emoji به شما اجازه می دهد تا از emoji های پیشفرض دستگاه کاربر به سادگی استفاده کنید.
برای اینکه بتوانیم از اموجی های پیشرفض دستگاه استفاده کینم کافی است مقدارboolean را به true تغییر دهیم.
1 2 3 | emojIcon.setUseSystemEmoji(true); textView.setUseSystemDefault(true);
emojiconEditText.setUseSystemDefault(true); |
می توانید بدون کد نویسی هم این کار رو انجام دهید.
1 | emojicon:emojiconUseSystemDefault="true" |
تغییر اندازه اموجی ها
1 | textView.setEmojiconSize(30); |
با استفاده از ویژگی در Xml
1 | emojicon:emojiconSize="28sp" |
تشخیص دادن باز با بسته بودن کیبورد
1 2 3 4 5 6 7 8 9 10 | emojIcon.setKeyboardListener(new EmojIconActions.KeyboardListener() { @Override public void onKeyboardOpen() { Log.i("Keyboard","open"); } @Override public void onKeyboardClose() { Log.i("Keyboard","close"); } }); |
تغییر دادن رنگ کیبورد (بالای emoji رنگش تعییر می کند)
1 2 3 |
EmojIconActions emojIcon= new EmojIconActions(this, rootView, emojiconEditText, emojiImageView, "#F44336","#e8e8e8","#f4f4f4");
emojIcon.ShowEmojIcon(); |
خسته نشدید که !
حال کد کامل رو برای شما قرارمیدم تا از آن استفاده کنید.
کد های مرتبط با activity_Main.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:emojicon="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/root_view" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="info.androidhive.emojis.MainActivity"> <ImageView android:id="@+id/emoji_btn" android:layout_width="40dp" android:layout_height="40dp" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:padding="4dp" android:src="@drawable/ic_insert_emoticon_black_24dp" /> <ImageView android:id="@+id/submit_btn" android:layout_width="40dp" android:layout_height="40dp" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:padding="4dp" android:src="@android:drawable/ic_menu_send" /> <hani.momanii.supernova_emoji_library.Helper.EmojiconEditText android:id="@+id/emojicon_edit_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_toLeftOf="@id/submit_btn" android:layout_toRightOf="@id/emoji_btn" emojicon:emojiconSize="28sp" /> <CheckBox android:id="@+id/use_system_default" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/textView" android:layout_centerHorizontal="true" android:checked="false" android:text="Use System Default?" /> <hani.momanii.supernova_emoji_library.Helper.EmojiconTextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:layout_marginTop="26dp" android:text="Hello Emojis!" android:textAppearance="@style/TextAppearance.AppCompat.Large" android:textColor="#000000" emojicon:emojiconSize="45sp" emojicon:emojiconUseSystemDefault="true" /> </RelativeLayout> |
و کد مرتبط با Mainactivity.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.util.Log; import android.view.View; import android.widget.CheckBox; import android.widget.CompoundButton; import android.widget.ImageView; import hani.momanii.supernova_emoji_library.Actions.EmojIconActions; import hani.momanii.supernova_emoji_library.Helper.EmojiconEditText; import hani.momanii.supernova_emoji_library.Helper.EmojiconTextView; public class MainActivity extends AppCompatActivity { private static final String TAG = MainActivity.class.getSimpleName(); CheckBox mCheckBox; EmojiconEditText emojiconEditText; EmojiconTextView textView; ImageView emojiImageView; ImageView submitButton; View rootView; EmojIconActions emojIcon; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); rootView = findViewById(R.id.root_view); emojiImageView = (ImageView) findViewById(R.id.emoji_btn); submitButton = (ImageView) findViewById(R.id.submit_btn); mCheckBox = (CheckBox) findViewById(R.id.use_system_default); emojiconEditText = (EmojiconEditText) findViewById(R.id.emojicon_edit_text); textView = (EmojiconTextView) findViewById(R.id.textView); emojIcon = new EmojIconActions(this, rootView, emojiconEditText, emojiImageView); emojIcon.ShowEmojIcon(); emojIcon.setIconsIds(R.drawable.ic_action_keyboard, R.drawable.smiley); emojIcon.setKeyboardListener(new EmojIconActions.KeyboardListener() { @Override public void onKeyboardOpen() { Log.e(TAG, "Keyboard opened!"); } @Override public void onKeyboardClose() { Log.e(TAG, "Keyboard closed"); } }); mCheckBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton compoundButton, boolean b) { emojIcon.setUseSystemEmoji(b); textView.setUseSystemDefault(b); } }); submitButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String newText = emojiconEditText.getText().toString(); textView.setText(newText); } }); } } |
حال زمان اجرا برنامه است.انشالله که مفید واقع شده باشد.
می توانید خبر های مرتبط با سایت را در کانال ما دریافت کنید تمامی مطالب به صورت اتوماتیک به کانال ارسال می شود.
سلام ممنون از مطلب خوبتون!میخواستم ببینم چطوری میتونم یه ایموجی خودم طراحی کنم و یونیکد کنم و به کیبوردم اضافه کنم آیا راهی هست؟ چن تا اپلیکیشن ساخت اموجی با عکس بود ک بدردم نخورد چون بعد ساخت یونیکد نمیشدن و بصورت عکس باقی میموندن!البته یه جا یه برنامه ای دیدم ک میشد با تصاویر بیتمپ ایموجی ساخت ولی اسم برنامش یادم نیست و هرچی گشتم دیگه پیدا نکردم همچین چیزی!اگه اطلاعی دارید راهنماییم کنید ممنون
سلام کاربر گرامی از لینک زیر استفاده کنید
https://goo.gl/fGRk99
موفق باشید.
خیلی مچکر
ببخشید شما که تو زبان سی شارپ و پی اچ پی تخصص دارید میتونید کتاب آموزشی خوب برای یادگیری این دو زبان بهم معرفی کنید؟
اگر بخواهیم از این اپ در کیبوردمون استفاده کنیم جه کاری باید انجام بدیم؟ چون کیبورد یک سرویس هست و اکتیویتی نداره در نتیجه RootView ندریم .همچنین کاراکتر هایی که در EmojiconEditText چاپ شدن رو چطوری میشه در فیلدی که کیورد باهاش در ارتباط هست چاپ کرد؟ خواهشا راهنماییم کنید ممنون .
سلام ,
چون سرویس دارید باید یک فرگمنت در نظر بگیرید و آن Emoji را در آنجا قرار دهید سپس در هنگام نمایش کیبور لایه را Inflate کنید تا Emoji در یک بخشی (مثلا کنار کیبور نمایش داده شود) و در مورد نمایش آن چون بخشی از آن emoji های سفارشی است باید در EmojiconTextView نمایش داده شود که کد را قرار دادم ولی اگر می خواهید از Emoji های گوشی استفاده شود باید setUseSystemEmoji را true کنید و مقدار Emoji در متغیر newText ذخیره شده است که می توانید در جای دیگه نیز نمایش دهید.
موفق باشید.
خیلی ممنون
ای کاش یه آموزش ساده هم در این مورد میزاشتین.
سلام خیلی ممنون از آموزش خوبتون
کتابخانه رو که به برنامم اضافه کردم حجمش رفت بالا قبلش حدود 3 مگ بود ولی الان شده 8 مگ اگه بخوام از ایموجی های پیش فرض دستگاه استفاده کنم بازم باید این کتابخانه رو داشته باشم؟یا راهی هست که بشه حجمشو آورد پایین؟
اول آموزش گفتید این چند خط کد رو در Gradle وارد کنیم خط دومی که مربوط به کتابخانس اما از خط اولی که این باشه:
repositories {
maven { url “https://dl.bintray.com/hani-momanii/maven”}
}
نفهمیدم برا چی هست کارش چیه فک کنم دلیل اینکه حجم برنامم رفته بالا از این باشه
لطفا راهنماییم کنید ممنون میشم
سلام
اگر بخواهیم با تاچ کردن هر شکلک مستقیما در فیلد مورد نظر کاربر چاپ شود چکار باید کرد؟ یعنی اینطور نباشه که بعد از زدن کلید سابمیت شکلک ها در فیلد چاپ شوند . ممنون
باید رویداد OnTouch رو صدا بزنید.
سلام خسته نباشین
.
یع کیبورد دارم. میخام ایموجی بهش اضافه کنم
کیبوردمم کلا سه صفحهس. اگه میتونین یه صفحه اضافی براش بنویسین که ایموجی توی اون باشه و ایموجیهارو اونجا اد کنین 60,000 واریز میکنم.
یه کیبورد دارم بگی نگی شبیه کیبورد خودم هس. خاستین میدمش ایموجی براش بزارین
ok شد
واریز میکنم?
آیدی تلگرامم
@niran98
سلام ممنون از آموزش
سلام
ببخشید من چه جوری میتونم ایموجی سفارشی خودم رو درست کنم
و در پیام رسان ها استفاده کنم
ممنون میشم راهنمایی کنید ؟
سلام
لطفا آموزش افزودن ایموجی در کیبورد رو هم بزارید
لطفا♡
یا یه سایتی بدین ک توی اون باشع
اگ که توی وبسایترخودتون باشه عالیه❤
سلام میشه بگید چجوری برای کیبورد تم بزاریم