20. تمرين : ساخت برنامه ی تبديل دما

Size: px

Start display at page:

Download "20. تمرين : ساخت برنامه ی تبديل دما"

Erin Clarke
6 years ago
Views:

بسم اهلل الرحمن الرحيم آموزشگاه تحليل داده تخصصی ترين مرکز برنامه نويسی و ديتابيس در ايران برنامه نويسی تحت اندرويد با Android Studio يا Eclipse ADT مدرس : مهندس افشين رفوآ کليه حقوق مادی و معنوی اين

1 بسم اهلل الرحمن الرحيم آموزشگاه تحليل داده تخصصی ترين مرکز برنامه نويسی و ديتابيس در ايران برنامه نويسی تحت اندرويد با Android Studio يا Eclipse ADT مدرس : مهندس افشين رفوآ کليه حقوق مادی و معنوی اين مقاله متعلق به آموزشگاه تحليل داده می باشد و هر گونه استفاده غير قانونی از آن پيگرد قانونی دارد. 20. تمرين : ساخت برنامه ی تبديل دما نمونه ی نمايشی برنامه ی کاربردی در این تمرین شما با نحوه ی ایجاد و استفاده از منابع اندروید و همچنین ساخت مجدد یک برنامه ی کاربردی تعاملی آشنا می شوید. گفتنی است برنامه ی کاربردی مذکور در فروشگاه مجازی گوگل پلی موجود می باشد. متناوبا, می توانید با اسکن بارکد زیر توسط گوشی اندروید خود برنامه ی کاربردی فوق را از گوگل پلی دانلود کنید.

2 ايجاد پروژه با استفاده از اطالعات زیر یک پروژه ی جدید اندروید ایجاد کنید : جدول. 8 پروژه ی جدید اندروید (خصوصیات) Property (مقدار) Value (اسم برنامه) Application Name Temperature Converter (اسم بسته) Package name de.vogella.android.temperature API (Minimum, Target, Compile with) (آخرین ورژن) Latest نسخه ی رابط برنامه ی کاربری مانند ویرایش )= 4.0) یا 4.1 و... (قالب) Template Empty Activity Activity MainActivity (طرح بندی) Layout activity_main تعيين خصيصه های برنامه )attribute( اندروید به شما امکان می دهد برای تعریف خصیصه ها )مثل رشته ها و رنگ ها) منابع ایستا ( Static Java source یا همراه XML تعریف کنید. می توان این خصیصه ها را در دیگر فایل های )Resources code نیز مورد استفاده قرار داد. برای بازکردن ویرایشگر این فایل, ابتدا باید فایل res/values/strings.xml را باز کنید. فرض کنید می خواهید یک تعریف color به فایل مورد نظر اضافه کنید. برای این منظور روی دکمه ی Add کلیک کنید.

3 مدخل Color را همان گونه که در تصویر زیر به نمایش گذاشته شده انتخاب کرده, سپس دکمه ی ok را فشار دهید.

4 mycolor را به عنوان اسم و #F5F5F5 را به عنوان مقدار وارد کنید :

5 این بار خصیصه های بیشتری از نوع رشته type( )String اضافه کنید. خصیصه های رشته به برنامه نویس این امکان را می دهد که برنامه را در زمانی دیگر ترجمه کند. جدول 9. خصیصه های رشته Name Value celsius to Celsius fahrenheit to Fahrenheit calc Calculate حال به قسمت )نمایش) XML رفته و از درستی مقادیر وارد شده اطمینان حاصل کنید. <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">temperature Converter</string> <string name="action_settings">settings</string> <string name="hello_world">hello world!</string> <color name="mycolor">#f5f5f5</color> <string name="celsius">to Celsius</string> <string name="fahrenheit">to Fahrenheit</string> <string name="calc">calculate</string> </resources>

6 استفاده از ويرايش گر طرح کلی editor( )layout ابتدا فایل res/layout/activity_main.xml را انتخاب کنید. اکنون با دوبار کلیک روی فایل مورد نظر ویرایش گر اندروید editor( )Android را باز کنید. ویرایش گر مزبور به شما اجازه می دهد از طریق drag & drop )کشیدن طرح و قرار دادن آن در بخش مورد نظر( یا به وسیله ی XML source code طرح کلی دلخواه را ایجاد کنید. شما می توانید با کلیک روی تب مربوطه )واقع در پایین صفحه ی ویرایش گر( بین دو حالت نمایش راه گزینی کنید. به منظور تغییر موقعیت و همچنین گروه بندی عناصر می توانید از Eclipse Outline view استفاده کنید. تصویر زیر سمت Palette ویرایش گر را نشان می دهد. این المان به شما اجازه می دهد عناصر view را کشیده و در طرح کلی خود قرار دهید. به منظور شناسایی آسان تر عناصر,view می توانید نمایش را تغییر داده تا آیکون و متن مورد نظر )مشابه تصویر زیر( به نمایش گذاشته شود.

7 توجه : نمایش Palette مکررا تغییر می یابد, بنابراین Palette view شما ممکن است کمی متفاوت باشد. افزودن views به فايل layout در این بخش از تمرین, رابط کاربری پایه ی برنامه ی کاربردی را به اتفاق هم ایجاد می کنیم. روی متن World! Hello موجود در فایل layout راست کلیک کرده, سپس گزینه ی Delete را از popup menu انتخاب کنید تا text object نام برده حذف گردد. حال برای مشاهده ی کلیه ی text field ها روی سربرگ/هدر Text Field کلیک کنید. ابزارک Plain Text را با مکان نمای موس کشیده و روی طرح کلی )layout( خود قرار دهید تا فیلد ورودی متن ( input text )field ایجاد شود.

توجه : کلیه ی مدخل های بخش,Text Field فیلدهای متنی را تعریف کرده, مدخل های دیگر نیز خصیصه های جانبی برای فیلدهای متنی مذکور تعریف می کنند )برای مثال در فیلد متنی مورد نظر فقط اعداد گنجانده شوند(.

8 توجه : کلیه ی مدخل های بخش,Text Field فیلدهای متنی را تعریف کرده, مدخل های دیگر نیز خصیصه های جانبی برای فیلدهای متنی مذکور تعریف می کنند )برای مثال در فیلد متنی مورد نظر فقط اعداد گنجانده شوند(. سپس بخش Form Widgets را از Palette انتخاب کرده, مدخل RadioGroup را بکشید و در طرح کلی )layout( قرار دهید. تعداد radio button هایی که به radio button group شما افزوده می شود به نسخه ی Eclipse بستگی دارد. سعی کنید با اضافه کردن و کم کردن دکمه ها, فقط دو radio button در گروه دکمه ها داشته باشید.

9 یک دکمه )Button( از بخش Form Widgets انتخاب کرده, آن را بکشید و در طرح )layout( خود جای گذاری کنید.

10 اکنون به تب XML فایل layout خود مراجعه کرده و آن را با لیست زیر مقایسه کنید )و از همخوانی این دو با هم اطمینان حاصل کنید(. ADT قالب ها )template( را در فواصل معین عوض می کند, بهمین دلیل XML شما ممکن است کمی متفاوت بنظر برسد. <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent"

11 tools:context=".mainactivity" > <EditText android:layout_alignparentleft="true" android:layout_alignparenttop="true" android:ems="10" /> <RadioGroup > <RadioButton android:checked="true" android:text="radiobutton" /> <RadioButton

12 android:text="radiobutton" /> </RadioGroup> <Button android:layout_margintop="22dp" android:text="button" /> </RelativeLayout> توجه : به خاطر استفاده از رشته های hard-code تعدادی پیغام خطا مشاهده می کنید. در بخش بعدی تمرین این اشکال را رفع خواهیم کرد. تمامی کامپوننت های رابط کاربری شما در فایل layout جای گرفته است. رنگ پس زمینه ( background )color را به این layout اختصاص دهید. پس از انتخاب mycolor,color را مشابه XML Snippet زیر انتخاب کنید. <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent"

13 android:layout_height="match_parent" tools:context=".mainactivity" پس از انجام این کار,رنگ پس زمینه ی شما به whitesmoke تغییر می یابد. البته تشخیص آن ممکن است کمی مشکل باشد. حال به تب activity_main.xml مراجعه کرده و از صحیح بودن فایل XML اطمینان حاصل کنید. <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".mainactivity" <EditText android:layout_alignparentleft="true"

14 android:layout_alignparenttop="true" android:ems="10" android:inputtype="numbersigned numberdecimal" /> <RadioGroup > <RadioButton android:checked="true" /> <RadioButton /> </RadioGroup> <Button

15 android:layout_margintop="22dp" android:onclick="onclick" /> </RelativeLayout> ايجاد utility class با ایجاد utility class زیر, سلیسیوس را به فارنهایت )و بالعکس) تبدیل کنید. package de.vogella.android.temperature; public class ConverterUtil { // converts to celsius public static float convertfahrenheittocelsius(float fahrenheit) { return ((fahrenheit - 32) * 5 / 9); } } // converts to fahrenheit public static float convertcelsiustofahrenheit(float celsius) { } return ((celsius * 9) / 5) + 32;

16 اصالح کد activity ویزارد پروژه ی اندروید کالس MainActivity را برای کد activity شما ایجاد کرد, اکنون این کالس را به ترتیب زیر اصالح کنید : package de.vogella.android.temperature; import android.app.activity; import android.os.bundle; import android.view.view; import android.widget.edittext; import android.widget.radiobutton; import android.widget.toast; public class MainActivity extends Activity { private EditText public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); text = (EditText) findviewbyid(r.id.edittext1); } // this method is called at button click because we assigned the name to the // "OnClick property" of the button

17 public void onclick(view view) { switch (view.getid()) { case R.id.button1: RadioButton celsiusbutton = (RadioButton) findviewbyid(r.id.radio0); RadioButton fahrenheitbutton = (RadioButton) findviewbyid(r.id.radio1); if (text.gettext().length() == 0) { Toast.makeText(this, "Please enter a valid number", Toast.LENGTH_LONG).show(); return; } float inputvalue = Float.parseFloat(text.getText().toString()); if (celsiusbutton.ischecked()) { text.settext(string.valueof(converterutil.convertfahrenheittocelsius(inputvalue))); celsiusbutton.setchecked(false); fahrenheitbutton.setchecked(true); } else { text.settext(string.valueof(converterutil.convertcelsiustofahrenheit(inputvalue))); fahrenheitbutton.setchecked(false); celsiusbutton.setchecked(true); } break; } }

18 } توجه : onclick با کلیک روی دکمه فراخوانده می شود )و این به خاطر خصوصیت onclick دکمه ی نام برده می باشد (. راه اندازی برنامه ی کاربردی روی پروژه ی مورد نظر راست کلیک کرده و گزینه ی Run-As Android Application را انتخاب کنید. چنانچه برنامه ی شبیه ساز از قبل راه اندازی نشده و فعال نمی باشد, اکنون اجرا می شود. یک عدد وارد کرده و نوع تبدیل دلخواه را انتخاب کنید. نتیجه باید مشابه تصویر زیر به نمایش گذاشته شود :

بسم الله الرحمن الرحیم آموزشگاه تحلیل داده تخصصی ترین مرکز برنامه نویسی و دیتابیس در ایران. آموزش ایجاد کنترل های سفارشی / controls ASP.

و< بسم الله الرحمن الرحیم آموزشگاه تحلیل داده تخصصی ترین مرکز برنامه نویسی و دیتابیس در ایران آموزش ایجاد کنترل های سفارشی / controls ASP.NET Custom مدرس : مهندس افشین رفوآ آموزش ایجاد کنترل های سفارشی