طراحی فضای چت UI در اندروید

طراحی فضای چت UI در اندرویدReviewed by مهرخ on Nov 11Rating: 5.0یک  POJO (متن پیام) برای پروژه بسازید:در این پست به شما نشان میدهم که چگونه با استفاده از 9-patch images و listview این آرایش را برای برنامه ی چت بسازید.

طراحی فضای چت UI در اندروید

برنامه ی ارسال پیام همزمان اپلیکیشنی ست که همه ما با آن آشنا هستیم که هر پیام را به صورت حباب های مربعی به ما نشان میدهد. و اندازه ی حباب را با توجه به سایز متن تغییر می دهد.

در این پست به شما نشان میدهم که چگونه با استفاده از ۹-patch images و listview این آرایش را برای برنامه ی چت بسازید.

chat screen

طراحی آرایش حبابی شکل

طراحی  “core design” پشت زمینه ی صفحه ی چت را به nine-patch images ( عکس ۹ تکه) تبدیل می کند. پس ابتدا باید دو عدد حباب PNG  شکل برای پیام های ورودی و خروجی بسازید. شما میتوانید با استفاده از ابزار draw9patch دراندروید SDK عکس  ۹-patch images  بسازید.

به فولدر [YOUR_SDK_PATH]\sdk\tools میرویم و Command Prompt   را در سیستم اندروید و یا  Terminal را در سیستم های مک و لینوکس باز میکنیم و عبارت زیر را مینویسیم:

بعد این صفحه ی دیالوگ باز میشود:

9-patch-image

و بعد شکل های حبابی که ساختید را به درون صفحه میکشید یک مقدار میتوانید چزییاتش را تغییر دهید و ذخیره اش کنید. بعد از انجام تمام این کار ها شما یک عکس ۹-patch images جدید دارید.

پیام های ورودیپیام های ورودی

پیام های خروجی

پیام های خروجی

کد پروژه نمونه

دو تا عکس ۹-patch images را در فولدر drawable بزارید و کد زنی را شروع کنید. اول دو تا آرایش بر اساس نوع پیام ها بسازید:

item_chat_right.xml

item_chat_left.xml

یک  POJO (متن پیام) برای پروژه بسازید:

ChatMessage.java

اصل لیست متن پیام بر اساس ListView و با ردیف های زوج و فرد است که بستگی به خروجی و ورودی بودن پیام بستگی دارد. یک آداپتور ListView با این نوع طراحی می سازیم. فراموش نکنید که getViewTypeCount() و getItemViewType() را از کد حذف کنید.

MessageAdapter.java

در این قسمت فقط activity  را اجرا می کنیم:

MainActivity.java

آرایش به صورت زیر است:

activity_main.xml

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

result

 

پاسخ دهید