• Home
  • Courses
  • Portfolio
  • Contact
    Tiger 4 CodeTiger 4 Code
    • Home
    • Courses
    • Portfolio
    • Contact

      Android اندرويد

      • Home
      • Blog
      • Android اندرويد
      • 8 – بناء مشروع اندرويد – التحويل بين درجات الحرارة Android Temperature converter

      8 – بناء مشروع اندرويد – التحويل بين درجات الحرارة Android Temperature converter

      • Posted by Schwarztiger
      • Categories Android اندرويد
      • Date January 21, 2013
      • Comments 2 comments
       

      ملاحظة : الموضوع عبارة عن حلقة من حلقات سلسلة برمجة وتطوير اندرويد Android Development

      بناء مشروع اندرويد – التحويل بين درجات الحرارة Android Temperature converter

      السلام عليكم ورحمة الله وبركاته 

      سنقوم في هذا الدرس ببرمجة تطبيق صغير , يقوم بالتحويل بين درجات الحرارة, حيث يتم اعطاء درجة حرارة معينة اما بالسيليسوس او بالفهرنهايت , ويقوم التطبيق بحساب التحويل بينهما.converter_sketch_1

      وخلال هذا التطبيق الصغير , سوف نمر على كافة مراحل انشاء وبناء التطبيق, وصولا إلى تشغيله على جهاز افتراضي.

      تطبيق بسيط وسهل , ولكنه يعلم الكثير من الأمور العامة والمفيدة في استخدام واجهة المستخدم وتعديلها بما يلائم تطبيقاتنا.

      تثبيت التطبيق التجريبي   : install the demo application

      التطبيق الذي سنقوم ببرمجته الآن متوافر ايضا على Android Marketplace  تحت عنوان Android Temperature converter .

       إنشاء المشروع Create Porject

      لإنشاء مشروع جديد سنقوم باختيار :

      File → New → Other → Android → Android Application Project  

      نملأ الآن حقول النافذة التي ستظهر بما يلي :

      Application name:Temperature Converter

      Project name: de.vogella.android.temperature

      Package name: de.vogella.android.temperature

       - New android project

      بعد الانتهاء من ملأ المعلومات ننقر على التالي “Next”

       - New android project2

      في النافذة التي تليها ننقر على التالي “Next” , في تلك النافذة يتم تحديد بعض الاعدادات الخاصة بايقونة التطبيق,

       icon

       بإمكاننا ترك الاعدادات كما هي وننتقل للنافذة التالية بنقر التالي “Next”

       create activity

      ضمن هذه النافذة نختار نوع الفعالية activity التي نريد.

      من هذه النافذة سوف نختار قالب BlankActivity وننقر على زر التالي “Next”.

      new blacnk activity

      ومن ثم ننقر على “Finish”.

      بعد الانتهاء من هذه الخطوات , يكون قد تم انشاء المشروع , وبإمكانك رؤية ملفات المشروع في القائمة الجانبية كما في الشكل التالي ادناه

      dir project

      إنشاء الخصائص

      يمكننا اندرويد من انشاء الخصائص الثابتة static attributes (على سبيل المثال السلاسل المحرفية Strings أو الألوان Colors).

      يمكن استخدام هذه الخصائص على سبيل المثال ضمن ملفات تنسيق XML أو ان يتم الاشارة إليها بواسطة كود جافا.

      الآن , افتح الملف res/values/string.xml

      وانقر على زر Add.

      adnroid resources 1

      واختر ضمن النافذة التي ستظهر لك مدخل Color وانقر على زر “Ok”.

      ضمن النافذة التي ستظهر , ادخل ضمن حقل الاسم “name” السلسلة المحرفية التالية : “myColor” , وضمن حقل القيمة “value” ادخل القيمة اللونية التالية : #F5F5F5.

      سنقوم الآن بإضافة المزيد من الخصائص attributes ولكن هذه المرة من نوع String.

      تمكن استخدام خصائص من نوع String المطورين والمبرمجين من ترجمة تطبيقاتهم لاحقا إلى عدة لغات.

      سوف نقوم الآن بإدخال الخصائص من نوع String التالية:

      Table 2. String Attributes

      Name Value
      celsius to Celsius
      fahrenheit to Fahrenheit
      calc Calculate

      سنحول اسلوب العرض إلى XML عبر النقر على بتويب string.xml في اسفل الصفحة كما في الشكل ادناه

      TO xml

      يصبح بإمكاننا ان نرى الترميز التالي:

      <resources>
      
          <string name="app_name">Temparature Convertor</string>
          <string name="hello_world">Hello world!</string>
          <string name="menu_settings">Settings</string>
          <string name="title_activity_main">Temparature Convertor</string>
          <color name="myColor">#F5F5F5</color>
          <string name="celsius" >to Celsius</string>
          <string name="fahrenheit">to Fahrenheit</string>
          <string name="calc">Calculate</string>
      
      </resources>

      اضافة ال View:

      سنقوم بفتح ملف res/layout/activity_main.xml  ضمن محرر اندرويد عبر النقر على الملف بنقرتين مزدوجتين. يمكننا هذا المحرر من انشاء التنسيق الذي نريد عبر سحب واسقاط المكونات مباشرة ,او عبر استخدام ترميز XML.

      للتحويل بين شكلي التمثيل المتاحين, نقوم بالنقر على التبويبين اسفل المحرر ونختار الوضع الذي نريد , كما هو مبين في الشكل ادناه

      Switch xml

      فيما يلي, النافذة التالية الموجودة بجانب المحرر. والتي يمكننا من خلالها سحب واضافة مكونات واجهة المستخدم ووضعها ضمن التنسيق.

      ملاحظة : تختلف هذه اللوحة Palette بشكل كبير بحسب الإصدار, لذلك لا تهتموا كثيرا في حال كانت الصور الواردة مع الدرس تختلف عن النوافذ التي تظهر لديكم.

      palette

      الآن سوف نقوم بإنشاء التنسيق الخاص بتطبيقنا.

      سوف ننقر بالزر اليميني على النص “Hello World” الموجود ضمن التنسيق.ومن ثم من النافذة التي تظهر لنا سوف نختار Delete وذلك بهدف ازالة الغرض النصي من التنسيق.

      ومن ثم من اللوحة الجانبية Palette  سوف ننقر على تبويب Text Fields ونبحث عن مدخل يدعى “Plain Text” (عبر الاستفادة من التلميحات التي تظهر فوق المداخل عند الوقوف عليها).

      13- text fields

      كل المدخلات الموجودة تحت تبويب “Text Fields” عبارة عن حقلول نصية. وتختلف عن بعضها البعض بحسب الخصائص التي تمتلكها, على سبيل المثال بعض الحقول النصية تسمح فقط بإضافة ارقام.

      نقوم بسحب الحقل النصي الذي اخترناه إلى داخل التنسيق وبذلك يتشكل لدينا حقل نص ادخال  text input.

      الآن سوف ننقر على تبويب “Form Widgets” الموجود ضمن اللوحة الجانبية Palette , وسنسحب مدخل “RadioGroup” إلى التنسيق.

      يختلف عدد ازرار الراديو التي تظهر ضمن “RadioGroup”  اعتمادا على نسخة Eclipse  المتوافرة لديك. وضمن تطبيقنا نريد فقط زري راديو two radio buttons لذلك إما يجب ان تقوموا بحذف او اضافة ازرار بحسب نسخة eclipse  المتوافرة لديكم.

      نسحب أيضا Button من تبويب “Form Widgets” إلى التنسيق

      يجب ان تبدو النتيجة بعد اضافة الحقل النصي و  RadioGroup والزر button كما في الشكل التالي :

      13- temperature convertor

      الآن , سوف نقوم بالتحويل إلى تبويب MXL لنستعرض الرماز وراء هذا التنسيق. سيبدو الرماز مشابها للرماز التالي:

      <RelativeLayout 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" >
      
          <EditText
              android:id="@+id/editText1"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentLeft="true"
              android:layout_alignParentTop="true"
              android:ems="10" >
      
              <requestFocus />
          </EditText>
      
          <RadioGroup
              android:id="@+id/radioGroup1"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentLeft="true"
              android:layout_below="@+id/editText1" >
      
              <RadioButton
                  android:id="@+id/radio0"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:checked="true"
                  android:text="RadioButton" />
      
              <RadioButton
                  android:id="@+id/radio1"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:text="RadioButton" />
          </RadioGroup>
      
          <Button
              android:id="@+id/button1"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentLeft="true"
              android:layout_below="@+id/radioGroup1"
              android:text="Button" />
      
      </RelativeLayout>

      تحرير وتعديل الخصائص الموجودة Edit View properties

      عندما نقوم باستخدام مكونات واجهة المستخدم ( والتي هي بدورها مستنسخات من view), يصبح بإمكاننا تعديل خصائصها عبر لوحة properties ضمن  eclipse(كما في الشكل ادناه).

      eclipse propertiy view

      يمكن تغيير اغلب الخصائص عبر القائمة التي تظهر عند النقر بالزر الايمن على العنصر المطلوب التعديل عليه.

      بإمكانكم ايضا تعديل خصائص الحقول بشكل مباشر من XML. يعتبر تعديل الخصائص من ملف XML سريع جدا, وذلك طبعا في حال كنت تعرف ماللذي تريد تعديله. ولكن طريقة “الزر الايمن” في التعديل , طريقة لا بأس بها خصوصا إذا كنت تبحث عن خاصية معينة.

      سوف نفتح الآن ملف التنسيقاتLayout file .

      سننقر بالزر اليميني على زر الراديو الأول first radio button وذلك بهدف اسناد السلسلة المحرفية “clsius” إلى خاصية النص الخاصة بزر الراديو.

      وبنفس الطريقة سوف نسند السلسلة المحرفية “Fahrenheit” إلى خاصية النص ضمن رز الراديو الثاني.

      13 edit text

      13 resource chooser

      من الآن وصاعدا, سوف نفترض بأنكم قادرين على استخدام قائمة الخصائص لتغيير الخصائص الخاصة بمكونات واجهة المستخدم, لذا لن نعود إلى ذكر التفاصيل في كل مرة نريد فيها تعديل الخصائص.

       ودوما بإمكانكم إما تعديل ملف XML بشكل مباشر أو تعديل الخصائص عبر طريقة النقر على العنصر المطلوب تعديل خصائصه بالزر الايمن.

      سنسند القيمة “true” إلى خاصية “checked” لأول زر راديو RadioButton.

      سوف نسند الآن السلسلة المحرفية “calc” إلى العنصر button, وسنقوم ايضا بإسناد القيمة “onClick” إلى الخاصية “onClick”.

      سوف نعدل خاصية “input type” الخاصة بالحقل النصي “EditText” لتاخذ القيم التالية :

      numberSigned , numberDecimal

      كل مكونات واجهة المستخدم التي لدينا محتواة ضمن تنسيق.

      سوف نقوم الآن بتحديد لون خلفية التنسيق كما يلي :

      ننقر بالزر اليميني على مساحة فارغة ضمن نمط استعراض “Graphical Layout”, ومن ثم نختار

       Other Properties → All by Name → Background

      ومن ثم نختار Color ومن هنالك نختار “myColor”

      resource color

      بعد ذلك يجب ان يتغير لون الخلفية إلى اللون الذي قمنا بتحديده عند انشاء “myColor” في مقطع سابق ضمن هذا الدرس.( في حالتنا هذه , اللون الأبيض الرمادي الفاتح).

      temperature converter 2

      ننتقل الآن إلى تبويب activity_main.xml السفلي لنتعرف إلى التعديلات التي جرت بعد هذه الخطوات على كود XML.

      <RelativeLayout 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:background="@color/myColor" >
      
          <EditText
              android:id="@+id/editText1"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentLeft="true"
              android:layout_alignParentTop="true"
              android:ems="10"
              android:inputType="numberSigned|numberDecimal"
               >
      
              <requestFocus />
          </EditText>
      
          <RadioGroup
              android:id="@+id/radioGroup1"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentLeft="true"
              android:layout_below="@+id/editText1" >
      
              <RadioButton
                  android:id="@+id/radio0"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:checked="true"
                  android:text="@string/celsius" />
      
              <RadioButton
                  android:id="@+id/radio1"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:text="@string/fahrenheit" />
          </RadioGroup>
      
          <Button
              android:id="@+id/button1"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentLeft="true"
              android:layout_below="@+id/radioGroup1"
              android:onClick="onClick"
              android:text="@string/calc" />
      
      </RelativeLayout>

      تعديل الكود المصدر للفعالية Change the Activity source code

      خلال عملية توليد مشروع اندرويد, كنا قد حددنا بأن يتم توليد فعالية Activity تدعى MainActivity . (الشكل ادناه لتذكيركم بالمكان الذي قمنا فيه بتحديد اسم الفعالية اثناء انشاء مشروع اندرويد في البداية).

      new blacnk activity

      يقوم هذا التوليد الآلي ضمن المشروع ايضا بتوليد صف جافا Java class المكافئ لهذه الفعالية MainActivity.java.

      سنقوم الآن بتعديل الصف MainActivity ليحوي على التابع ( الوظيفة)  التي تدعى “onClick” والتي يتم استدعائها عندما يتم النقر على زر Button.كماحددنا ذلك سابقا عبر خاصية onClick الخاصة بالزر.

      سنقوم بتعديل الملف ليصبح كما يلي :

      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 text;
      
        @Override
        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
        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(convertFahrenheitToCelsius(inputValue)));
              celsiusButton.setChecked(false);
              fahrenheitButton.setChecked(true);
            } else {
              text.setText(String
                  .valueOf(convertCelsiusToFahrenheit(inputValue)));
              fahrenheitButton.setChecked(false);
              celsiusButton.setChecked(true);
            }
            break;
          }
        }
      
        // Converts to celsius
        private float convertFahrenheitToCelsius(float fahrenheit) {
          return ((fahrenheit - 32) * 5 / 9);
        }
      
        // Converts to fahrenheit
        private float convertCelsiusToFahrenheit(float celsius) {
        return ((celsius * 9) / 5) + 32;
        }
      }

      تشغيل المشروع Start Project

      android-waiting-640-250
      Be patient

      لتشغيل تطبيق اندرويد, سوف نحدد المشروع, ومن ثم ننقر بالزر اليميني عليه , ومن القائمة الجانبية التي سوف تظهر نختار : Run-As → Android Application في حال لم يكن المحاكي emulator يعمل, فإنه سوف يبدأ العمل فورا. ولكن يجب ان تتحلوا بالصبر , لأن المحاكي يستغرق وقتا لكي يبدأ بالعمل من جديد. ضعوا الآن رقما في الحقل النصي, واختاروا نوع التحويل, ومن ثم انقروا على الزر. سوف يتم عرض النتيجة ضمن الحقل النصي , وسيتم اختيار زر الراديو الموافق لنتيجة التحويل.

      android screen

      تشغيل التطبيقات المثبتة على اندرويد: Starting an installed application

      بعد ان تقوم بتشغيل تطبيقك على جهاز افتراضي, بإمكانك تشغيلة مرة اخرى على هذا الجهاز الافتراضي.

      إذا نقرنا على زر Home , ومن ثم على رمز المربعات الصغيرة اسفل الشاشة فتظهر لنا التطبيقات التي قمنا بتشغيلها من قبل بالاضافة إلى غيرها.

      بإمكاننا التنقل بين التطبيقات ,ومن ثم نختار التطبيق الذي نريد تشغيله فننقر عليه ليعمل ببساطة!.

      كما في الصور التوضيحية ادناه.

      14-1

      عند هذا القدر نكتفي في هذه الحلقة , وعلى امل ان القاكم في حلقة جديدة من سلسلة برمجة وتطوير اندرويد نتحدث فيها عن التنسيقات Layout التي تتحكم باسلوب عرض العناصر على الشاشة.

      ارجو ان تكون هذه الحلقة مفيدة كفاية لنتعلم من خلالها التعامل باشكال ووسائل مختلفة مع واجهة المستخدم , وبالاضافة إلى برمجة الاستجابة التي نريد عند النقر على مكونات معينة.

      وإلى لقاء جديد, وإلى ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته.

      الترجمة

      المصطلح

       

      اللوحة

      Palette

      تابع او وظيفة

      Method

       تركت كما هي حتى لا نحصل على ترجمة مضللةView

      View

      تحوي سلسلة اندرويد المواضيع التالية :

      1. التعريف باندرويد What is Android
      2. مكونات واجهة المستخدم الاساسية في اندرويد Basic Andorid User Interface Components
      3. خطوات تثبيت اندرويد Android Install Steps
      4. بناء مشروع اندرويد
      5. تشغيل تطبيقك على اندرويد Running Your Application  
      6. بناء واجهة مستخدم بسيطة UI 
      7. تشغيل فعالية أخرى Starting another Activity
      8. بناء مشروع اندرويد – التحويل بين درجات الحرارة Android Temperature Converter
      9. تنسيقات واجهة المستخدم ضمن اندرويد  UI Layouts
      10. …

      Tag:Android, android BroadcastReceiver, android ContentProvider, Android development, Android device emulator, android Intent, Android INtentFilter, Android linux, Android Market, android method, android operation system, Android Programming, Android Security and Permissions, Android system, android Temperature converter, AndroidManifest file, Google, Google play, برمجة اندرويد, تطوير وبرمجة اندرويد, نظام اندرويد

      • Share:
      author avatar
      Schwarztiger

      Previous post

      7 - تشغيل فعالية أخرى Starting Another Activity
      January 21, 2013

      Next post

      9 - تنسيقات واجهة المستخدم ضمن اندرويد UI Layouts
      January 23, 2013

      You may also like

      56 : اندرويد : استخدام “واجهة برمجة التطبيقات” API الخاصة بالنسخ الاحتياطي Backup
      20 August, 2013

        ملاحظة : الموضوع عبارة عن حلقة من حلقات سلسلة برمجة وتطوير اندرويد Android Development اندرويد :  استخدام واجهة برمجة التطبيقات API الخاصة بالنسبخ الاحتياطي Backup السلام عليكم ورحمة الله وبركاته  سوف نتعلم في هذا الدرس مايلي : تسجيل التطبيق …

      56 : اندرويد : التزامن مع السحابة الالكترونية Syncing to the Cloud
      20 August, 2013

        ملاحظة : الموضوع عبارة عن حلقة من حلقات سلسلة برمجة وتطوير اندرويد Android Development اندرويد :  التزامن مع السحابة الالكترونية Syncing to the Cloud السلام عليكم ورحمة الله وبركاته  سنتطرق ضمن هذه الحلقات إلى موضوع حديث نسبيا , الا …

      55 : اندرويد : ارسال طلبات عمل إلى الخدمة التي تعمل في الخلفية sending work request to the background service
      4 July, 2013

        ملاحظة : الموضوع عبارة عن حلقة من حلقات سلسلة برمجة وتطوير اندرويد Android Development اندرويد :  ارسال طلبات عمل إلى الخدمة التي تعمل في الخلفية Sending work requests to the background service السلام عليكم ورحمة الله وبركاته سوف نتعلم …

        2 Comments

      1. aboyazn
        November 22, 2014
        Reply

        بارك الله فيك استفدت من هذا الدرس كثير

      2. Ahmed Saad
        May 22, 2015
        Reply

        عوز مساعدة ياجماعة

      Leave A Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Search

      Latest Courses

      Android Development

      Android Development

      $950.00
      HTML Tutorial: HTML & CSS for Beginners

      HTML Tutorial: HTML & CSS for Beginners

      $800.00
      Learn WordPress Content Management System

      Learn WordPress Content Management System

      Coming soon
      logo-eduma-the-best-lms-wordpress-theme

      info@tiger4code.com

      Links

      • Courses
      • Portfolio

      Copyright 2019 | Educational, Web & Mobile Development Platform By Tiger 4 Code