ارتباط XML با Android UI (یوزر اینترفیس اندروید)

 به درخواست یکی از دوستان، امروز درباره چگونگی طراحی یوزر اینترفیس (User interface) در اندروید صحبت می کنیم و اینکه کلیت یک فایل XML و ارتباط آن با Android User Interface چگونه است ! در این آموزش ابتدا پروژه جدیدی را ایجاد می نماییم و مرحله به مرحله با هم پیش می رویم. این آموزش بسیار پرمحتوی و آموزنده است. (همراه با تمرین و توصیه های مختلف)

 

 

» یک پروژه جدید را ایجاد و در آن ادامه خواهیم دارد .پروژه ای به نام UnitConverter ایجاد نمایید و نام package آنرا com.uncocoder.course.project.unitconverter قرار دهید. همچنین از ورژن 2.1 اندروید یا همان API Version 7 استفاده کنید.

 

همانطور که می بینید در بدو پیدایش پروژه یک کلاس به نام UnitConverterActivity و یک فایل به نام main.xml ( که در res\layout ) است پدید آمده. از آنجاییکه می خواهیم خودکفا باشیم و به

کارهایی اتوماتیک کمتر توجه کنیم، این دو فایل را حذف می کنیم و خودمان یک نمونه می سازیم:

 

» از package اصلی برنامه فایل ( کلاس ) UnitConverterActivity را حذف کنید ( بله با استفاده از Del روی کیبورد )

» از دایرکتوری res\layout فایل main.xml را حذف کنید.

» از فایل manifest خطوط ما بین <activity و </activity> را ( به علاوه خود این خطوط ) حذف کنید. بنابراین در این شرایط در تگ application فقط دو سطر خواهید داشت.

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

 

کلیت یک فایل XML و ارتباط آن با Android UI :

با توجه به کد زیر:

 

    <TagName1>
        AttributeName1=AttributeValue1
        AttributeName2=AttributeValue2 />;
 
    <TagName2
        AttributeName3=AttributeValue3
        AttributeName4=AttributeValue4 >
            Content
    </TagName2>

عبارت بعد از نماد > ، Tag نام دارد. مقادیر ما بین باز شدن تگ تا بسته شدن آن با نماد < ، Attribute نام دارند که به همراه مقادیرشان نوشته می شوند. ممکن است یک Tag دارای Content باشد، در اینصورت Attribute های آنرا با استفاده از نماد < به پایان می رسانیم و سپس Content آنرا می نویسیم و بعد از نماد /> برای بستن کل Tag استفاده می کنیم. همانطور که در TagName2 می بینید. در صورتیکه Content مورد نیاز نباشد می توانیم مستقیماً با استفاده از نماد /> پس از ذکر Attribute ها، Tag را ببنیدم. در صورتیکه در مورد ساختار XML به اطلاعات بیشتری نیاز دارید از لینک * مطالعه بفرمائید.

خوب حالا به ساختار یک فایل XML ـی که برای Android UI نوشته شده توجه کنید.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <Button
        android:id="@+id/btn_about"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dip"
        android:text="About"
        android:width="150dip" />
 
</RelativeLayout> 

خط 1: بسیار مهم و کلیشه ایست و تعریف XML را تعیین می کند.

خط 2: یک کلاس RelativeLayout مورد درخواست است که در برگیرنده سایر کنترلها خواهد بود، در این خط با استفاده از xmlns یک namespace تعریف شده که آنهم کلیشه ای اما بسیار مهم است و نبود آن باعث اجرا نشدن UI شما می شود.

خط 3: Attribute های مرتبط با کلاس RelativeLayout مقداردهی می شود، تعداد آنها می تواند بسیار زیاد باشد و هر کدام که نوشته نشوند، مقدار پیش فرض را خواهند گرفت. نام Attribute خط 3 ، layout_width است که در android namespace قرار گرفته است، از این پس آنرا فقط layout_width صدا خواهیم کرد.

خط 7: به عنوان Content مربوط به RelativeLayout سایر کنترل های UI قرار می گیرند که خود می توانند ( بسته به ماهیتشان ) در برگیرنده کنترلهای دیگری باشند. بطور مثال Button نمی تواند کنترل دیگری را در برگیرد اما LinearLayout می تواند.

خط 17: Tag مربوط به RelativeLayout را می بندیم تا Structure صحیح XML حفظ شود.

به همین ترتیب یک XML Structure می تواند ارائه دهنده یک UI باشد. برای روشن شدن بیشتر مطلب آنرا به یک Outline تشبیه خواهم کرد. به کد زیر توجه کنید، این کد همان کدی است که برای فرم form_distance طراحی شده است، تصویر آنرا هم در پایین خواهید دید.

» بر روی res\layout راست کلیک کرده و انتخاب کنید New->Other

» Android XML Layout File را انتخاب کنید

» LinearLayout را انتخاب کرده و در قسمت نام بنویسید: form_distance

» با گزینه های Next و Finish به کار خاتمه داده و در اینحالت باید فایلی به نام form_distance در res\layout داشته باشید، همینطور پنجره ای برای ویرایش UI باز خواهد شد.

» در پنجره طراحی UI باز شده از پایین پنل form_distance.xml را انتخاب کنید و محتوای آنرا با محتوای زیر عوض کنید.

 

با فرآیند فوق خواهیم گفت ساخت یک UI به نام form_distance. و از این پس آنرا به اختصار اینگونه بیان خواهیم کرد.

 

کد مربوط به form_distance.xml :

 

 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <Button
        android:id="@+id/btn_return"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dip"
        android:text="Return"
        android:width="150dip" />
 
    <TextView
        android:id="@+id/txt_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:gravity="center_horizontal"
        android:text="Distance Converter"
        android:textColor="#ffff00"
        android:textSize="20dip" />
 
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txt_title"
        android:layout_marginTop="10dip"
        android:orientation="vertical" >
 
        <LinearLayout
            android:id="@+id/panel_meter"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="2dip"
            android:paddingLeft="10dip"
            android:paddingRight="10dip"
            android:paddingTop="2dip" >
 
            <TextView
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="0.3"
                android:text="Meter"
                android:textColor="#ffffff"
                android:textSize="18dip" />
 
            <EditText
                android:id="@+id/edt_meter"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="0.7"
                android:inputType="numberDecimal" />
        </LinearLayout>
 
        <LinearLayout
            android:id="@+id/panel_centimeter"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="2dip"
            android:paddingLeft="10dip"
            android:paddingRight="10dip"
            android:paddingTop="2dip" >
 
            <TextView
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="0.3"
                android:text="Centimeter"
                android:textColor="#ffffff"
                android:textSize="18dip" />
 
            <EditText
                android:id="@+id/edt_centimeter"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="0.7"
                android:inputType="numberDecimal" />
        </LinearLayout>
 
        <LinearLayout
            android:id="@+id/panel_inch"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="2dip"
            android:paddingLeft="10dip"
            android:paddingRight="10dip"
            android:paddingTop="2dip" >
 
            <TextView
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="0.3"
                android:text="Inch"
                android:textColor="#ffffff"
                android:textSize="18dip" />
 
            <EditText
                android:id="@+id/edt_inch"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="0.7"
                android:inputType="numberDecimal" />
        </LinearLayout>
 
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dip"
            android:paddingBottom="2dip"
            android:paddingLeft="10dip"
            android:paddingRight="10dip"
            android:paddingTop="2dip" >
 
            <Button
                android:id="@+id/btn_reset"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="0.5"
                android:text="Reset" />
 
            <Button
                android:id="@+id/btn_convert"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="0.5"
                android:text="Convert" />
        </LinearLayout>
    </LinearLayout>
 
</RelativeLayout>

 

به خودتان فرصتی دهید و کد بالا را با این تصویر و ساختار تطبیق دهید.

 

پس اگر خوب توانسته باشید، کد بالا را با Outline بالا تطبیق دهید الان باید به راحتی ارتباط XML , Android UI را درک کرده باشید. از این پس نباید در تعریف یک UI با استفاده از XML مشکلی وجود داشته باشد و فقط مهم این است که بدانید چه کنترلی چه کار می کند و چه خاصیتهایی چه اثری بر آن کنترل می گذارند. برای فهمیدن این دو مورد به تدریج پیش خواهیم رفت اما مقدمات آنرا در همین قسمت می گوییم.

---

چند قائده کلامی:

♦ هر وقت می گوییم یک Control فلان تعریف کنید یعنی یک Tag در XML با نام فلان تعریف کنید.

♦ هر وقت می گوییم property بهمانم از Control فلانم را با مقدار x ، ست کنید، یعنی در Tag فلانم یک Attribute بسازید و مقدار x رو بهش بدید.

♦ وقتی می گوییم که Control فلانم Child کنترل بهمانم هست، یعنی فلانم در Content بهمانم قرار گرفته است.

♦ وقتی می گوییم که Control فلانم Parent کنترل بهمانم هست، یعنی بهمانم در Content فلانم قرار گرفته است.

 

---

کنترل های پر کاربرد:

---

قوائد و خصوصیات مهم:

♦ هر Attribute در یک Tag با یک مقدار مشابه آن در Property Window محیط طراحی UI منطبق است. با سوئیچ کردن بین حالت XML و Graphical Layout می توانید پنجره Property Window را از سمت چپ صفحه باز کنید و با انتخاب یک Control از محیط طراحی مقادیر آن را مشاهده کنید.

♦ با RightClick کردن روی هر Control و با انتخاب گزینه Edit ID می توانید، Id کنترل ( همان که در findViewById نوشته می شد ) را تغییر دهید. این مقدار در XML با استفاده از android:id نمایش داده خواهد شد. همینطور در RelativeLayout های می توان با استفاده از /id+@ به آن دسترسی پیدا کرد.

♦ توجه داشته باشید که در یک فایل XML از Id های تکراری و مشترک استفاده نکنید.

♦ توجه داشته باشید که Id ها را با نام کوچک بنویسید و از حروف بزرگ استفاده نکنید. برای جدا کردن کلمات از _ استفاده کنید.

♦ در صورتیکه مقدار width برابر fill_parent باشد، عرض کنترل به اندازه parent آن خواهد بود و اگر برابر wrap_content باشد، به اندازه محتویات داخلش خواهد بود و اگر عددی به شکل 50dip باشد، به اندازه 50 واحد خواهد بود. توجه کنید به هیچ عنوان از هیچ عددی و نمادی غیر از مثلاً 20dip استفاده نکنید. 20 غلط است، 20px غلط است، 20% غلط است و تنها جایی که استفاده از عدد تنها مجاز است داخل weight است که توضیح خواهیم داد.

♦ قائده بالا برای height هم صادق است با این تفاوت که ارتفاع کنترل تعیین می شود.

♦ مقدار Text محتویات یک Button، TextView  و مشابه این کنترل ها را تعیین می کنید.

♦ مقدار Text Size یک کنترل بزرگی نوشته آن است.

♦ از مطرح کردن سایر خصوصیاتی که واضح هستند، خودداری می کنم و از شما دعوت می کنم با آزمایش کردن آنها خود را با UI آشنا کنید. اما خواص مهمتر:

♦ با استفاده از weight می توان ابعاد عرضی ( طولی ) چندین کنترل را در LinearLayout های افقی ( عمودی ) تعیین کنید. در این شرایط باید مقدار width و ( height ) برابر با 0dip باشد و با تعیین درصد های هر کنترل که در weight آن می نویسیم، تعیین می کنیم که کنترل ها چه نسبتی از تصویر را در برگیرند. توجه داشته باشید که این خاصیت فقط در کنترل های child کنترل LinearLayout قابل استفاده است.

♦ Margin ها فاصله ای بیرونی کنترل ها با هم است و Padding ها فاصله درونی محتویات کنترل تا حاشیه خود است.

♦ Gravity نحوه چینش محتویات یک کنترل است. بطور مثال اگر Gravity یک TextView از نوع Right باشید، راست چین نمایش داده خواهد شد.

♦ در شرایطی که از RelativeLayout استفاده کنید، قابلیتهایی دارید که در LinearLayout نداشتید و البته بالعکس. بطور مثال weight بسیار در LinearLayout ها به شما کمک می کند در حالیکه از آن در RelativeLayout ها نمی شود استفاده کرد. اما در RelativeLayout ها با استفاده از خصوصیات داخل گروه Misc کارهای بسیاری می توان انجام داد. برای درک این قابلیتها سورس XML بالا را در پروژه خود و در یک فایل XML به طریقی که توضیح داده شد، ایجاد کنید و آن را در Graphical Layout بررسی کنید.

♦ استفاده از Graphical Layout و XML Layout هر دو بسیار مفید است. هیچگاه خود را برای فقط استفاده کردن از یکی محدود نکنید.

♦ گاهی اوقات نیاز به مرتب شدن چیدمان فایل XML Layout است، در این حالت از کلید Ctrl + R در XML استفاده کنید.

♦ می توانید از Drag & Drop در محیط Outline استفاده کنید که بسیار مفید است.

♦ باز بودن Outline در یک سمت و Property در سمت دیگر به شما بسیار کمک خواهد کرد.

♦ قبل از ارجاع دادن ID یک کنترل به کنترل دیگر آنرا نام گذاری کنید.

♦ برای اسامی کنترل ها از عبارات txt_   btn_   edt_   panel_   list_   chk   و ... استفاده کنید بهتر است.

♦ گاهی اوقات ممکن است Eclipse و ADT فایل شما را درست پردازش نکنند، در این حالت Eclipse را Restart کنید.

---

 

تمرین :

سایر فرمهایی که در تصویر متحرک اول برنامه ساخته شده اند را خودتان بسازید و با نامهایی که مشخصاً به UI مرتبطند به شکل زیر نامگذاری کنید:

form_about.xml
form_time.xml
form_main.xml

---

 

توصیه ها:

- حتماً خودتان سایر UI ها را که به عنوان تمرین قرار داده شد بسازید.

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

- سعی کنید یک UI بسیار پیچیده روی یک کاغذ طراحی کنید و آنرا در Android بسازید.

 

از قدیم گفتن دوباره کاری اشتباهه ! منبع: uncocoder