ساعة التوقيف

في هذه المسودة، سوف نقوم بتوضيح كيفية إنشاء ساعة التوقيف (Stopwatch) باستخدام (Android). غالبًا ما يتم تثبيت هذا التطبيق على مجموعة متنوعة من الهواتف الذكية والأجهزة اللوحية.

كما تعودنا نقوم بإنشاء تطبيق جديد

  •  الخطوة 1: ضع الكود التالي مكان الموجود في ملف (activity_main.xml) 
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="greenfinger.stopwatch.MainActivity"
        tools:layout_editor_absoluteY="81dp"
        tools:layout_editor_absoluteX="0dp">
    
        <TextView
            android:id="@+id/time_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="92sp"
            android:textColor="@color/gray"
            tools:layout_constraintTop_creator="1"
            tools:layout_constraintRight_creator="1"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_marginTop="52dp"
            tools:layout_constraintLeft_creator="1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <Button
            android:id="@+id/btn_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="15dp"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            android:background="@color/green"
            android:onClick="onClickStart"
            android:text="@string/start"
            android:textColor="@color/white"
            app:layout_constraintBottom_toTopOf="@+id/btn_reset"
            app:layout_constraintRight_toLeftOf="@+id/btn_reset"
            tools:layout_constraintBottom_creator="1"
            tools:layout_constraintRight_creator="1" />
    
        <Button
            android:id="@+id/btn_stop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="13dp"
            android:layout_marginRight="13dp"
            android:layout_marginTop="15dp"
            android:background="@color/red"
            android:onClick="onClickStop"
            android:text="@string/stop"
            android:textColor="@color/white"
            app:layout_constraintRight_toLeftOf="@+id/btn_start"
            app:layout_constraintTop_toBottomOf="@+id/btn_start"
            tools:layout_constraintRight_creator="1"
            tools:layout_constraintTop_creator="1" />
    
        <Button
            android:id="@+id/btn_reset"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="55dp"
            android:layout_marginEnd="50dp"
            android:layout_marginRight="48dp"
            android:background="@color/orange"
            android:onClick="onClickReset"
            android:text="@string/reset"
            android:textColor="@color/white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            tools:layout_constraintBottom_creator="1"
            tools:layout_constraintRight_creator="1" />
    
    
    
    </android.support.constraint.ConstraintLayout>
  • الخطوة 2: ضع الكود التالي مكان الموجود في ملف (MainActivity.java) 
    package greenfinger.stopwatch;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.os.Handler;
    import android.view.View;
    import android.widget.TextView;
    
    public class MainActivity extends Activity {
    
        private int seconds=0;
        private boolean startRun;
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            if(savedInstanceState != null){
                seconds = savedInstanceState.getInt("seconds");
                startRun=savedInstanceState.getBoolean("startRun");
            }
    
            Timer();
    
    
        }
    
        public void onSaveInstanceState(Bundle saveInstanceState){
            saveInstanceState.putInt("seconds", seconds);
            saveInstanceState.putBoolean("startRun", startRun);
        }
    
        public void onClickStart(View view){
            startRun=true;
        }
    
        public void onClickStop(View view){
            startRun=false;
        }
    
        public void onClickReset(View view){
            startRun=false;
            seconds=0;
        }
    
        private void Timer(){
            final TextView timeView = (TextView)findViewById(R.id.time_view);
            final Handler handler = new Handler();
            handler.post(new Runnable() {
                @Override
                public void run() {
                    int hours = seconds/3600;
                    int minutes = (seconds%3600)/60;
                    int secs = seconds%60;
    
                    String time = String.format("%d:%02d:%02d", hours, minutes, secs);
    
                    timeView.setText(time);
    
                    if(startRun){
                        seconds++;
                    }
    
                    handler.postDelayed(this, 100);
                }
            });
    
        }
    }
    
  •  الخطوة 3: ضع الكود التالي مكان الموجود في ملف (strings.xml) 
    <resources>
        <string name="app_name">ساعة التوقيف</string>
        <string name="start">إبدأ</string>
        <string name="stop">قف</string>
        <string name="reset">إعادة</string>
    </resources>
  •  الخطوة 4: أضف نشاط جديد، (styles.xml).
    <resources>
    
        <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
            <item name="android:textSize">20sp</item>
        </style>
    
    </resources>
    

     

  •  الخطوة 5: ضع الكود التالي مكان الموجود في ملف (colors.xml) 
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="colorPrimary">#3F51B5</color>
        <color name="colorPrimaryDark">#303F9F</color>
        <color name="colorAccent">#FF4081</color>
        <color name="white">#FFF</color>
        <color name="red">#FF0000</color>
        <color name="orange">#FFA500</color>
        <color name="gray">#CCC</color>
        <color name="green">#008000</color>
    </resources>
    
  •  الخطوة 6: تغيير الرزمة (package)
    package greenfinger.stopwatch;

    الآن قم بتشغيل التطبيق، بالتوفيق.