آموزش طراحی رابط کاربری رسپانسیو برای اپلیکیشن

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

خب یکی از راه حل ها استفاده از layoutهای مختلف هست . که اغلب برای 5 سایز mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi ساخته می شوند.

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

طراحی رابط کاربری رسپانسیو برای اپلیکیشن اندروید

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

یه کتابخونه هست به نام SDP ،  که با مراجعه به سایت گیت هاب میتونید  صفحه ی اصلی مرتبط بهش رو مطالعه کنید و با این کتابخانه بیشتر آشنا بشوید.

همانظور که توسعه دهنده این کتابخانه ادعا یا عنوان کرده شما میتونید با استفاده از این کتابخانه رابط کاربری اپلیکیشن ریسپانسیو طراحی کنید و یکبار برای همیشه از دست مشکلاتی که رابط کاربری اپلیکیشن ها در سایز های مختلف صفحه داشتند راحت شوید . نتیجه نهایی رو در قالب یک مثال در تصویر زیر می بینید :

و اینو با روش قبلی ما که هیچ اقدامی برای ریسپانسیو کردن اپلیکیشن انجام نمی دادیم و به تنظیم dp اکتفا میکردیم مقایسه میکنه ، که نتیجه رو در تصاویر زیر می تونید ببینید و مقایسه کنید :

مراحل طراحی رابط کاربری رسپانسیو برای اپلیکیشن اندروید

برای شروع استفاده از این کتابخونه ی ساده کافیه این خط رو در قسمت dependencies های فایل گریدل ماژولتون اضافه کنید :

dependencies {
  implementation 'com.intuit.sdp:sdp-android:1.0.6'
}

برای TextView  ها هم میتونید از SSP استفاده کنید که با توجه  به صفحه ی مربوطه در گیت هاب این خط رو اضافه کنید :

  implementation 'com.intuit.ssp:ssp-android:1.0.6'

برای استفاده از این کتابخونه هم در xml میتونید از سایز هایی که به صورت پیش فرض در dimen.xml قرار داده شده استفاده کنید به طور مثال :

1. استفاده از sdp برای یک Button

Button android:id="@+id/give_us_a_review_landmine_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="@dimen/_25sdp" android:padding="@dimen/_8sdp" android:text="Rate" android:textSize="@dimen/_15sdp" android:visibility="visible" android:textColor="@android:color/white" android:gravity="center" android:minWidth="120dp" android:includeFontPadding="false" android:background="#0ac775" android:singleLine="true" 

2.استفاده از ssp  برای یک TextView

TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Intuit" android:textColor="@android:color/black" android:textSize="@dimen/_40ssp"

به همین سادگی شما حالا می دانید چطور یک رابط کاربری رسپانسیو برای اپلیکیشن خودتون طراحی کنید 🙂 امیدوارم از این مقاله برای ساخت رابط کاربری زیبا و شگفت انگیز خودتون نهایت استفاده رو برده باشید ، خوشحال میشم نظراتتون رو از طریق ثبت یک دیدگاه با من به اشتراک بگذارید

مقالات مرتبط را بخوانید :

سورس های اندروید شامل تخفیف رو ببین !

  خرید سورس های حرفه ای بازی و اپلیکیشن اندروید

  تخفیف ها و اخبار ویژه رو در تلگراممون دنبال کن :)