چطور می تونم کمکتون کنم؟

آموزش برنامه نویسی به زبان اندروید (قسمت سوم)

ساخت یک رابط کاربری ساده

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

رابط کاربری گرافیکی یک اپلیکیشن اندرویدی، از تعدادی کلاس View  و   ViewGroupتشکیل می‌شود. کلاس View  شامل یک سری ویدجت ها (Widgets)  مانند دکمه ها (Buttons)  یا قسمت متنی (Text Field)  می‌باشد. کلاس ViewGroup شامل چند کانتینر (Container) کلاس View  می‌باشد که قابل دیدن نیستند و وظیفه آن‌ها این است که طرح (layout) فرزند (child)، مانند شبکه بندی (Grid)  یا لیست های عمودی (Vertical Lists)  را تعریف کند.

اندروید یک سری لیست کلمات XML  ای دارد که به زیر کلاس‌های View  و ViewGroup مربوطند. بنا بر این شما می‌توانید رابط کاربری اپلیکیشنتان را با استفاده از المان‌های UI در XML  تعریف کنید.

طرح‌ها زیر کلاس‌های ViewGroup  هستند. در این تمرین  ما با Linear Layout  کار خواهیم کرد.

ساخت Linear Layout

  • در اندروید استودیو، از آدرس res/layout، فایل activity_my.xml  را باز کنید. تمپلیت BlankActivity  ای را که هنگام ساخت پروژه انتخاب می‌کنید حاوی فایل activity_my.xml  است که این فایل خود دارای دید (view)  ریشه RelativeLayout  و یک دید فرزند TextView  می‌باشد.
  • در قسمت Preview بر روی آیکون Hide کلیک کنید تا این قسمت بسته شود. در اندروید استودیو، هنگامی که یک فایل لی اوت را باز می‌کنید، اولین چیزی که به نظر شما می‌رسد قسمت Preview  است. با کلیک کردن بر روی المان‌های این بخش، یک جعبه ابزار به نام WYSIWYG در قسمت Design  باز می‌شود. در این بخش ما مستقیماً با XML  کار خواهیم کرد.
  • المان <TextView>  را پاک کنید.
  • المان <RelativeLayeout>  را به  <linear Layout> تغییر بدهید.
  • خاصیت android:orientation  را اضافه و آن را به صورت افقی (horizontal)  تنظیم کنید.
  • خاصیت‌های  android:padding و  tools:context  را حذف کنید.

نتیجه مانند زید خواهد شد:

Res/layout/activity_my.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
</LinearLayout>

LinearLayout یک view group است که child view را هم به صورت افقی و هم به صورت عمودی طرح می‌دهد. این طرح دهی توسط خاصیت android:orientation  صورت می‌پذیرد. هر فرزند یک LinearLayout در صفحه به ترتیب نمایش آن‌ها در XML ظاهر می‌شود.

دو خاصیت دیگر android:layout_width  و android:layout_height در هر دیدی لازمند تا بتوان اندازه آن‌ها را تغییر داد.

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

اضافه کردن قسمت متنی

همان طوذ که می‌دانید، باید برای هر خاصیت مشخص در XML  یک EditText در نظر بگیرید.

  • در فایل activity_my.xml در المان‌ <LinearLayout> ، یک المان <EditText> دارای id به صورت @+id/edit_message  تعریف می‌شود.
  • خاصبت‌های layout_width  و layout_height  را مانند wrap_content  تعریف کنید.
  • یک خاصیت hint  به عنوان رشته به نام edit_message تعریف کنید.

المان <EditText> باید به صورت زیر باشد:

Res/layout/activity_my.xml

<EditText android:id="@+id/edit_message"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:hint="@string/edit_message" />

اکنون به تعریف برخی از اصطلاحات می‌پردازیم

Android:id

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

علامت @ زمانی استفاده می‌شود که بخواهید به چیزی در XML  اشاره کنید. معمولاً با یک / همراهی ‌می‌شود و سپس نام می‌آید.

علامت + قبل نوع ریسورس تنها هنگامی مورد نیاز است که بخواهید برای اولین بار به آن ID بدهید. وقتی که اپلیکیشن کامپایل می‌شود، SDK tools از اسم ID  استفاده می‌کند تا یک ID  جدید برای ریسورس در پروژه شما ایجاد کند. این ID  در فایل gen/R.java به المان TextEdit اشاره می‌کند. بعد از آن دیگر برای ریسورس‌ها به علامت + احتیاج نیست.

Android:layout_width و android:layout_height

این دو به جای عدد دهی مستقیم از value  های wrap_content  استفاده می‌کنند که به دید این امکان را می‌دهد که تا به آن اندازه‌ای که احتیاج است بزرگ شود.

Android:hint

زمانی که قسمت متنی خالی باشد این رشته به صورت پیش فرض نمایش داده می‌شود.  به جای یک رشته کد hard-coded، فایل "@string/edit_message" به یک رشته ریسورس که در یک فایل جداگانه تعریف شده‌اند اشاره می‌کند.

اضافه کردنن رشته ریسورس (String Resources)

به صورت پیش فرض، پروژه اندرویدی شما حاوی یک فایل رشته ریسورس  در res/values/string.xml  می‌باشد. در این قسمت شما یک رشته جدید یه نام edit_message  به وجود می‌آورید و آن را با Enter a message  مقدار دهی می‌کنید.

  • در اندروید استودیو، از آدرس res/value  فایل string.xml  را باز کنید.
  • یک خط رشته با نام edit_message  اضافه کنید و آن را با مقدار Enter a message  ارزش دهی کنید.
  • یک خط رشته با نام button_send  اضافه کنید و آن را با مقدار Send  مقدار دهی کنید. به این ترتیب شما یک دکمه که رشته را به بخش بعدی می‌فرستد ساخته‌اید.
  • خط رشته hello world  را حذف کنید.

نتیجه به صورت زیر نمایش داده می‌شود:

res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="app_name">My First App</string>

    <string name="edit_message">Enter a message</string>

    <string name="button_send">Send</string>

    <string name="action_settings">Settings</string>

    <string name="title_activity_main">MainActivity</string>

</resources>

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

اضافه کردن یک دکمه

  • در اندروید استودیو، از آدرس res/layout  فایل activity_my.xml  را ویرایش کنید.
  • در المان <LinearLayout>  یک المان <Button> تعریف کنید که بلافاصله به دنبالش المان <EditText>  باشد.
  • عرض و ارتفاع این خاصیت را به wrap_content مرتبط کنید تا دکمه هرقدر که لازم باشد بزرگ شود.
  • لیبل متن این دکمه را با خاصیت android:text تعریف کنید؛ با رشته ریسورس button_send (در بخش قبلی آموزش داده شد) ارزش دهی کنید.

<LinearLayout> باید به شکل زیر باشد:

res/layout/activity_my.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal" >

      <EditText android:id="@+id/edit_message"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:hint="@string/edit_message" />

      <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/button_send" />

</LinearLayout>

به یاد داشته باشید که دکمه به android:id احتیاج ندارد. زیرا به کد فعالیت ارجاع داده نمی‌شود.

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

این کد برای دکمه‌ها بسیار عالی عمل می‌کند اما برای قسمت متنی زیاد کارآمد نیست؛ چرا که کاربر ممکن است متنی طولانی تایپ کند. اگر عرض قسمت دیده نشده صفحه را با قسمت متنی پر کنید بهتر است. با استفاده از یک خصوصیت weight که LinearLayout  با android:layout_weight ارزش دهی شده است، به این منظور برسید.

Weight مقدار عددی است که میزان فضای باقی مانده، که هر دید لازم دارد را مشخص می‌کند. طرز کار این قسمت مانند دستور تهیه یک نوشیدنی می‌باشد: 2 قسمت سودا، 1قسمت شربت. که در این تعریف مشخص است که دو سوم این نوشیدنی از سودا تشکیل داده شده است. پس اگر به weight  یک دید مقدار 2 و به قسمت دیگر مقدار یک را بدهید، مجموع آن‌ها 3 خواهد شد و دو سوم فضا به دید اول و یک سوم آن به دید دوم اختصاص می‌یابد. اگر دید سوم را به آن‌ها اضافه کنید و  مقدار weight  آن 1باشد، دید اول نصف فضا را خواهد گرفت و سایر دیدها هر کدام یک چهارم فضا را در اختیار خواهند داشت.

چطور عرض جعبه ورودی (Input Box) را به اندازه عرض صحفه نمایش برسانیم؟

برای آن که بتوانید فضای باقی مانده را با EditText  طرح بدهید، باید مراحل زیر را دنبال کنید

  • در فایل activity_my.xml ، به خصوصیت layout_weight  المان <EdithText> مقدار 1 بدهید
  • همچنین، به خصوصیت layout_width  المان <EditText> مقدار 0dp  بدهید.

res/layout/activity_my.xml

<EditText

    android:layout_weight="1"

    android:layout_width="0dp"

    ... />

برای بالا بردن کارایی لی اوت، بهتر است عرض EditText  را به صفر (0dp) تغییر بدهید. با این کار عملکرد لی اوت با استفاده از wrap_content بالا می‌رود.

در آخر فایل activity_my.xml  باید به صورت زیر باشد:

res/layout/activity_my.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal">

    <EditText android:id="@+id/edit_message"

        android:layout_weight="1"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:hint="@string/edit_message" />

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/button_send" />

</LinearLayout>

اجرای اپلیکیشن

هنگامی که یک پروژه می‌سازید، این طرح به صورت پیش فرض توسط کلاس Activity که در SDK tools تولید شده است، به کار گرفته می‌شود. برای دیدن نتیجه برنامه را اجرا کنید:

  • در اندروید استودیو، از طریق toolbar بر روی Run  کلیک کنید.

 

 

طراحی سایت,وبرند,وب رند,webrend,اندروید استودیو,ساخت پروژه اندرویدی,اپلیکیشن