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

بهمن 16, 1398| سنا عبادی
طراحی رابط کاربری استاندارد برای اپلیکیشن اندروید | وبلاگ مارکت سورس اندروید ریور

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

خب یکی از راه حل ها استفاده از 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"

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

همچنین بخوانید :  آموزش کاتلین : تفاوت متغیرهای var و val در زبان برنامه نویسی کاتلین
3.7/5 (3 Reviews)
سنا عبادی CO-Founder نویسنده مقاله

توسعه دهنده موبایل به ویژه سیستم عامل اندروید ، هم بنیانگذار اندروید ریور و در تلاش برای تحقق یک رویا..



می تونی سنا عبادی رو توی شبکه های اجتماعی هم دنبال کنی ...

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


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

به این مقاله امتیاز دهید :
3.7/5 (3 Reviews)
  خرید سورس های حرفه ای بازی و اپلیکیشن اندروید

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

دسته‌ها: آموزش برنامه نویسی اندروید

دیدگاهتان را بنویسید

راهنما : برای نوشتن موارد مختلف در دیدگاه می توانید از راهنمای نگارش اندروید ریور استفاده کنید : نگارش کد کوتاه `your code`
نگارش کد بلند یا نگارش بخش عمده یک سورس کد :
[sourcecode lang="your code language"] your code here [/sourcecode]