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

جستجو ...


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

ثبت نام کنید

رابط کاربری یا همان UI یکی از مهترین بخش‌های برنامه نویسی اندروید است. همراه لیداوب باشید تا با طراحی رابط کاربری اندروید بیشتر آشنا شویم.


اپلیکیشن‌های اندرویدی از دو بخش جاوا و XML تشکیل می‌شوند که بخش جاوا مربوط به کدهای اجرایی برنامه است و بخش xml به طراحی و شکل نمایش صفحات مربوط می‌شود. اما باید بدانید که اگر بهترین کد جاوا را بزنید و هیچ خطایی در آن وجود نداشته باشد، باز بدون داشتن یک رابط کاربری زیبا، اپلیکیشن شما نمی‌تواند موفق شود. مثال عملی برای این ادعا هم دقایقی جستجو در فروشگاه‌های آنلاین نرم افزاری نظیر کافه بازار و گوگل پلی است. با اندکی جستجو در کافه بازار و بررسی اپلیکیشن‌های مختلف، متوجه می‌شوید اپلیکیشن‌هایی که رابط کاربری زیبایی دارند عموما پر دانلود‌تر از اپلیکیشن‌هایی با رابط کاربری و گرافیک ضعیف‌تر هستند. البته منظور از رابط کاربری، تنها چینش درست موارد موجود در صفحه برای ساختن یک محیط کاربرپسند نیست، بلکه بخش‌های مختلفی نظیر ترکیب رنگ، زبان طراحی، انیمیشن‌ها و رنگ شناسی باعث ایجاد یک رابط کاربری زیبا می‌شوند.

متریال دیزاین

بیشتر بخوانید:

طریقه نصب و کار با اندروید استودیو

 اندروید استودیو که محیط توسعه اپلیکیشن‌های اندرویدی است، بخشی در خصوص طراحی رابط کاربری دارد که قابلیت‌های مختلفی را هم برای برنامه نویسان فراهم می‌کند. در این بخش تقریبا تمام ویژگی‌های مورد نیاز برنامه نویسان برای طراحی یک رابط کاربری مناسب را دارد. رابط کاربری، اغلب اپلیکیشن‌های فعلی هم در این محیط توسعه داده می‌شوند. اما در این بین افراد و شرکت‌هایی هستند که برای دستیابی به نتایج بهتر به سراغ نرم افزار‌های طراحی رابط کاربری می‌روند و یک محیط کاربری حرفه‌ای می‌سازند. نرم افزار‌های مختلفی در این خصوص وجود دارند که یکی معروف‌ترین آن‌ها کیوت (QTO) است. در حالتی که رابط کاربری در نرم افزار دیگری خارج از اندروید استودیو طراحی شود، در این صورت خروجی رابط کاربری برای اعمال در داخل اپلیکیشن، به اندروید استودیو منتقل می‌شود.

متریال دیزاین را بهتر بشناسید

متریال دیزاین

بیشتر بخوانید:

ساخت اولین پروژه اندروید در Android studio

اگرچه در زمان برنامه نویسی اندروید، برنامه نویس بر اساس سلیقه و خواسته خود می‌تواند به هر شکلی که تمایل داشت رابط کاربری را طراحی کند، اما خود گوگل هم یک استاندارد در این خصوص تعریف کرده است. زبان طراحی متریال دیزاین (Material Design) همان استاندارد گوگل در زمینه طراحی رابط کاربری به حساب می‌آيد. اگرچه استفاده برنامه نویسان از این زبان برنامه نویسی باعث شده که ظاهر کلی اپلیکیشن‌های جدید و نسبتا حرفه‌ای شبیه به یکدیگر باشند و تا حدودی تکراری به نظر برسند، اما در کل یک الگوی خوب و مناسب برای برنامه نویسان به حساب می‌آید و از طریق این الگو می‌توانند طراحی رابط کاربری اپلیکیشن‌شان را هر چه بیشتر به استانداردها نزدیک کنند.

متریال دیزاین در واقع نسل جدیدی از طراحی صاف یا Flat است که توسط گوگل شکل گرفته است. در این زبان طراحی از ترکیب رنگ‌ها برای فضاسازی استفاده می‌شود و خود گوگل مدعی شده که این نوع طراحی از مرکب و کاغذ الهام گرفته شده است. در متریال دیزاین به کمک رنگ‌ها سعی شده که عناصر به شکلی دیده شوند که گویا طول، عرض و ارتفاع دارند.

متریال دیزاین

گوگل که به عنوان صاحب اصلی سیستم عامل اندروید به حساب می‌آید و همه ساله در حال توسعه و گسترش آن است، سایتی را برای توسعه دهندگان خود آماده کرده است که از طریق آن، می‌توان به اطلاعات زیادی پی برد. این سایت که با آدرس developers.google.com قابل دسترس است یک منبع غنی و کامل برای برنامه نویسان اندروید به حساب می‌آید. تمام قابلیت‌های جدید نسخه‌های مختلف اندروید و شیوه استفاده از آن‌ها به همراه کد‌های مربوطه در این سایت قرار می‌گیرند و توسعه دهندگان نو پا هم می‌توانند از طریق این سایت برنامه نویسی اندروید را فرا بگیرند. البته لازم به ذکر است که اطلاعات فارسی روی این سایت وجود ندارد و تمام اطلاعات موجود به زبان انگلیسی هستند. اگر به خاطر داشته باشید،‌ در مقاله‌ای که قبلا در لیداوب منتشر کردیم، به اهمیت آشنایی برنامه نویسان با زبان انگلیسی اشاره کرده بودیم. اگر تاحدودی به اندروید و زبان انگلیسی آشنا باشید، بخش توسعه دهندگان گوگل می‌تواند مکانی هیجان انگیز برای شما باشد. البته ناگفته نماند که توسعه دهندگان ایرانی، با IP ایران قادر به دسترسی به بخش توسعه دهندگان گوگل نیستند و گوگل تحریم‌هایی را در این خصوص اعمال کرده است. این افراد با تغییر IP به سادگی می‌توانند وارد وب‌سایت مذکور شوند.

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

پوشه Layout در پروژه اندروید استودیو را باز کنید و به روی فایل موجود که در واقع لایه نامیده می‌شود،‌ کلیک کنید تا اجرا شود. حال صفحه‌ای به شکل زیر مشاهده خواهید کرد.

متریال دیزاین

در این صفحه، یک میز کار وجود دارد که صفحه‌ای شبیه صفحه موبایل در آن‌جا دیده می‌شود و در واقع طراحی را از این طریق انجام خواهید داد. موقعیت چینش عناصر در صفحه هم از طریق این بخش تنظیم می‌شوند. البته کد‌هایی هم در این بخش وجود دارند که اغلب برنامه نویسان حرفه، از طریق آن‌ها، طراحی را انجام می‌دهند (در ادامه با این کد‌ها بیشتر آشنا خواهیم شد).

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

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

متریال دیزاین

در پایین این بخش، دو سربرگ با نام‌های Design و Text وجود دارد. عکس‌هایی که در بالا مشاهده می‌کنید مربوط به حالت Design هستند. اگر به خاطر داشته باشید، در پاراگراف‌های قبلی گفتیم که برنامه نویسان حرفه‌ای از بخش کد برای طراحی رابط کاربری استفاده می‌کنند و بخش Text در واقع همان قسمت است. هر عنصری که در بخش Design با کشیدن ماوس به لایه اضافه می‌کردید، در واقع کد‌های مربوط به آن را هم به لایه خود انتقال می‌داد. با ورود به بخش Text متوجه کد‌های مربوطه می‌شوید. عکس زیر مربوط به لایه‌ای است که یک دکمه و یک بخش نمایش متن تحت عنوان TextView در آن وجود دارد.

متریال دیزاین

کد زیر مربوط به دکمه (Button) در رابط کاربری است که بدون تغییر خاصی قرار داده شده است و قصد داریم با تک تک بخش‌های آن آشنا شویم.

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    tools:layout_editor_absoluteY="121dp"
    tools:layout_editor_absoluteX="148dp" />

همان‌طور که مشاهده می‌کنید، این کد با کلمه Button شروع شده است که نشان می‌دهد این کد مربوط به دکمه است. سطر اول این کد به id دکمه اختصاص دارد که در این بخش آی‌دی دکمه باید تعریف شود (البته در زمان انتخاب از طریق بخش Design، آی‌دی به صورت خودکار تعریف می‌شود اما امکان ویرایش آن هم وجود دارد). به ساختار هر سطر هم توجه داشته باشید. همان‌طور که مشاهده می‌کنید تمام سطر‌ها از ساختار مشابهی بهره می‌شوند و با کلمه android یا tools شروع می‌شوند و بعد از دو نقطه (:) عنوان کد نوشته می‌شود. کلمه android و tools هم در ابتدای هر کد اشاره به بخشی دارد که آن کد از آن‌ها خوانده می‌شود.

سطر دوم و سوم در این کد مربوط به عرض و ارتفاع دکمه می‌شوند که متن «wrap_content» اشاره به این دارد که عرض و ارتفاع بر اساس متن دکمه تنظیم می‌شود. البته امکان تغییر این قسمت و وارد کردن عدد هم وجود دارد. در سطر چهار به text اشاره می‌کند که در واقع همان متنی است که داخل دکمه نمایش داده می‌شود. اکنون در این کد، متنی که داخل دکمه نمایش داده می‌شود «Button» است اما می‌توانید آن را به هر کلمه دیگری (حتی به زبان فارسی) تغییر دهید. دو سطر آخر هم اشاره به موقعیت دکمه‌ها در صفحه دارند که در آینده با آن‌ها بیشتر آشنا خواهیم شد.

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

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند



دیدگاه ها (1)

در حال بارگزاری ...

برترین های