عرض تأكيدات على الساعه

الإعلانات

عرض تأكيدات على الساعه

 

 

 

عرض تأكيدات على الساعه

التأكيدات التي يتم عرضها في تطبيقات الساعه، تستخدم الشاشة بأكملها أو جزءاً كبيراً منها بخلاف تأكيدات تطبيقات الهاتف.

يضمن هذا أن يتمكن المستخدمون، من رؤية هذه التأكيدات، من خلال إلقاء نظرة سريعة على الشاشة، و لديهم أهداف “دوائر” كبيرة بما يكفي لإلغاء الإجراء بواسطة اللمس.

بالإضافة إلى قراءة الأقسام أدناه، يجب عليك قراءة مبادئ تصميم تطبيقات نظام تشغيل الساعات.

تساعدك مكتبة واجهة مستخدم الساعه على إظهار تأكيدات متحركة ومؤقت في تطبيقاتك:

 

مؤقت التأكيد

مؤقت التأكيد التلقائي، يعرض مؤقت متحرك للمستخدمين، والذي يسمح لهم بإلغاء إجراء قاموا بتنفيذه للتو.

 

حركة التأكيد

حركة التأكيد تعطي المستخدمين ملاحظات مرئية، عند إكمالهم لإجراء ما.

 

الأقسام التالية توضح لك كيفية تنفيذ هذه الأنماط.

 

 

 

 

 

إستخدام مؤقتات التأكيد التلقائي



مؤقتات التأكيد التلقائي تتيح للمستخدمين إلغاء الإجراء الذي قاموا به للتو.

 

 

 

 

 

     الشكل 1: مؤقت التأكيد.

عندما يقوم المستخدم بتنفيذ الإجراء، يعرض تطبيقك زراً لإلغاء الإجراء بإستخدام مؤقت متحرك ويبدأ بالعد.

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

 

لإظهار مؤقت تأكيد عندما يقوم المستخدمين بإكمال إجراء في تطبيقك:

1- قم بإضافة عنصر <CircularProgressLayout> إلى مخططك.

2- قم بتنفيذ واجهة OnTimerFinishedListener في نشاطك.

3- قم بتعيين مدة المؤقت ثم ابدأها عندما يكمل المستخدم إجراء ما.

 

لإستخدام “مخطط التقدم الدائري” CircularProgressLayout في تطبيقك، تحتاج إلى تضمين الإعتمادات التالية (أو الإصدارات الأحدث)..

في ملف البناء build.gradle لنموذج الساعه:

dependencies{
     ...
    compile 'com.android.support:wear:26.0.0'
    compile 'com.android.support:support-compat:26.0.0'
    compile 'com.android.support:support-core-utils:26.0.0'
    compile 'com.android.support:support-core-ui:26.0.0'
    ...
}

يمكنك إضافة عنصر <CircularProgressLayout> إلى مخططك كما يلي:

<android.support.wear.widget.CircularProgressLayout
    android:id="@+id/circular_progress"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="4dp"
    app:backgroundColor="@color/darkblue"
    app:colorSchemeColors="@color/lightblue"
    app:strokeWidth="4dp">
    <ImageView
      android:id="@+id/image_view"
      android:src="@drawable/cancel"
      android:layout_width="40dp"
      android:layout_height="40dp" />
</android.support.wear.widget.CircularProgressLayout>

 

يمكنك أيضاً إضافة أي معاينة كتابع لمخطط التقدم الدائري CircularProgressLayout لعرض مؤقت التقدم حوله.

يستخدم المثال أعلاه ImageView، ولكن يمكن أن يكون TextView أيضاً لعرض النص بداخله.

 

ملاحظة: الفئه CircularProgressLayout تحل محل فئة مشابهة، تم إيقافها في مكتبة دعم الساعات.

 

ليتم إعلامك عند إنتهاء مهلة المؤقت أو عند قيام المستخدمين بالنقر فوقها، قم بتنفيذ دوال المستمع المطابقه في نشاطك:

KOTLIN

class WearActivity :
        AppCompatActivity(),
        CircularProgressLayout.OnTimerFinishedListener,
        View.OnClickListener {

    private var circularProgress: CircularProgressLayout? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_wear_activity)
        circularProgress = findViewById<CircularProgressLayout>(R.id.circular_progress).apply {
            onTimerFinishedListener = this@WearActivity
            setOnClickListener(this@WearActivity)
        }
    }

    override fun onTimerFinished(layout: CircularProgressLayout) {
        // User didn't cancel, perform the action
    }

    override fun onClick(view: View) {
        // User canceled, abort the action
        circularProgress?.stopTimer()
    }
}

JAVA

public class WearActivity extends Activity implements
    CircularProgressLayout.OnTimerFinishedListener, View.OnClickListener {
  private CircularProgressLayout circularProgress;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_wear_activity);
    circularProgress =
        (CircularProgressLayout) findViewById(R.id.circular_progress);
    circularProgress.setOnTimerFinishedListener(this);
    circularProgress.setOnClickListener(this);
  }

  @Override
  public void onTimerFinished(CircularProgressLayout layout) {
    // User didn't cancel, perform the action
  }

  @Override
  public void onClick(View view) {
    if (view.equals(circularProgress)) {
      // User canceled, abort the action
      circularProgress.stopTimer();
    }
  }
}

 

لبدء المؤقت، أضف الكود التالي في نشاطك، إلى المرحلة حيث يختار المستخدمون إجراءً:

KOTLIN

circularProgress?.apply {
    // Two seconds to cancel the action
    totalTime = 2000
    // Start the timer
    startTimer()
}

JAVA

// Two seconds to cancel the action
circularProgress.setTotalTime(2000);
// Start the timer
circularProgress.startTimer();

 

 

 

 

عرض حركات التأكيد


لعرض تأكيد متحرك عند قيام المستخدمين بإكمال إجراء في تطبيقك، قم بإنشاء غرض يبدأ “بتأكيد النشاط” ConfirmationActivity من أحد أنشطتك.

يمكنك تحديد إحدى هذه الحركات بالغرض الإضافي EXTRA_ANIMATION_TYPE:

 

“نجاح الحركة” SUCCESS_ANIMATION
“فشل الحركة” FAILURE_ANIMATION
“فتح الحركة على الهاتف” OPEN_ON_PHONE_ANIMATION

 

يمكنك أيضاً إضافة رسالة تظهر تحت أيقونة التأكيد.

لإستخدام تأكيد النشاط ConfirmationActivity في تطبيقك، قم أولاً بالإعلان عن هذا النشاط في ملف إيضاحك:

                             الشكل 2: حركة التأكيد.

 

<manifest>
  <application>
    ...
    <activity
        android:name="android.support.wearable.activity.ConfirmationActivity">
    </activity>
  </application>
</manifest>

 

ثم حدد نتيجة سلوك المستخدم وابدأ النشاط بإستخدام غرض:

KOTLIN

val intent = Intent(this, ConfirmationActivity::class.java).apply {
    putExtra(ConfirmationActivity.EXTRA_ANIMATION_TYPE, ConfirmationActivity.SUCCESS_ANIMATION)
    putExtra(ConfirmationActivity.EXTRA_MESSAGE, getString(R.string.msg_sent))
}
startActivity(intent)

JAVA

Intent intent = new Intent(this, ConfirmationActivity.class);
intent.putExtra(ConfirmationActivity.EXTRA_ANIMATION_TYPE,
                ConfirmationActivity.SUCCESS_ANIMATION);
intent.putExtra(ConfirmationActivity.EXTRA_MESSAGE,
                getString(R.string.msg_sent));
startActivity(intent);

 

بعد عرض حركة التأكيد ActivationActivity تنتهي، ويتم إستئناف نشاطك.

 


للإطلاع على المقال باللغة الإنجليزية أضغط هنا.

الإعلانات