🥀 🍻 🏫 تلميع واجهة المستخدم في Android: StateListAnimator 🔓 🦅 🤾🏾

مرحبا هبر! تحسبا لبدء الدورة التدريبية “Android Developer. محترفون " أعددنا لكم ترجمة لمواد أخرى مثيرة للاهتمام.

نحن نقضي معظم وقت التطوير لتطبيق Android الخاص بنا لا يعمل على واجهة المستخدم - نحن فقط نلقي نظرة ونبدأ في كتابة التعليمات البرمجية. لقد لاحظت أن معظمنا لا يهتم حقًا بواجهة المستخدم. وأعتقد أن هذا خطأ جوهري. يجب على مطوري تطبيقات الأجهزة المحمولة الاهتمام بواجهة المستخدم / UX أيضًا. أنا لا أقول "كن خبيرًا في واجهة مستخدم الجوال" ، ولكن يجب أن تفهم لغة ومفاهيم التصميم.

لقد كتبت سابقًا مقالًا عن الظلال في تصميم المواد وتلقيت الكثير من المراجعات الجيدة. اريد ان اشكركم جميعا يتحدث "Mastering Shadows in Android" عن الارتفاع والظل في Android. هناك أيضًا أوضحت كيف استكملت مكتبة واجهة المستخدم مفتوحة المصدر الخاصة بي معهم. ( تخطيط التحجيم ).

في هذه المقالة ، أريد تحسين مكتبتي باستخدام StateListAnimator وإظهار كيف سأفعل ذلك خطوة بخطوة.

المحتوى

تتناول هذه المقالة الموضوعات التالية:

الدول القابلة للرسم
StateListDrawable
خصائص متحركة
StateListAnimator
ScalingLayout مع StateListAnimator

الدول القابلة للرسم

يحتوي Android على 17 حالة مختلفة لـ Drawable.

ربما لم نلتق حتى ببعض منهم. لن أخوض في كل دولة. في معظم الحالات ، نستخدم pressed، enabledو windows focused، checkedوما إلى ذلك. D. إذا لم نعلن عن حالة قابلة للرسم ، فمن المفترض أن هذه الحالة افتراضيًا في Android.

نحن بحاجة إلى فهم هذه الحالات من أجل كتابة StateListDrawable الخاصة بنا .

StateListDrawable

إنها في الأساس قائمة بالعناصر القابلة للرسم ، حيث يكون لكل عنصر حالته الخاصة. لإنشاء ملف StateListDrawable ، نحتاج إلى إنشاء ملف XML في مجلد res/drawable.

<item android:drawable="@drawable/i" android:state_pressed="true"/>

هذا عنصر. لها خاصيتان. Drawable و الدولة .

<selector>
   <item
       android:drawable="@drawable/p"
       android:state_pressed="true"/>
   <item
       android:drawable="@drawable/default"/>
</selector>

هذه هي StateListDrawable. إذا لم نعلن حالة لعنصر ، كما ذكرت سابقًا ، فهذا يعني أن هذه هي الحالة الافتراضية .

هل يمكنني استخدام ShapeDrawable؟

نعم. بدلاً من استخدام android: drawable ، يمكنك إضافة شكل عشوائي إلى العنصر الخاص بك. هنا عنصر به ShapeDrawable .

StateListDrawable

يمكنك استخدام StateListDrawable من مستوى API 1. وبالتالي ، لا توجد قيود على مستوى API لـ StateListDrawable.

<View
   android:layout_width="50dp"
   android:layout_height="50dp"
   android:foreground="@drawable/state_list_drawable"
   android:clickable="true"/>

هذا كل شئ. الآن وجهة نظرنا لديها دولة. عندما ينقر المستخدم عليها ، سيتغير لونها. عندما يقوم المستخدم بتحريره ، سيكون له حالة ولون افتراضيان.

لكن انتظر ثانية. قابل للنقر ؟ لماذا أضفنا هذه السمة؟ هل نحتاج أيضًا إلى إضافته؟ نعم. ولكن فقط للعرض المخصص. يستغرق وقتا لمعرفة ذلك. تعمل الأزرار بشكل جيد بدون إضافة قابلة للنقر لأنها قابلة للنقر بشكل افتراضي . ولكن إذا كنت ترغب في استخدام StateListDrawable للعرض ، و ImageView ، و Custom View ، وما إلى ذلك ، فأنت بحاجة إلى إضافة سمة قابلة للنقر .

StateListDrawable

أضفت StateListDrawable في هذا الالتزام . إنه مشابه للمثال الذي ذكرته أعلاه. عندما ينقر المستخدم على التصميم ، يتم تلوينه. ولكن دعونا نحسن هذا مع StateListAnimator.

StateListAnimator

تذكر أنه عند النقر فوق الزر FloatingActionButton ، تزيد قيمته Z بسبب الرسوم المتحركة. هذا هو StateListAnimator خارج الشاشة إذا جاز التعبير. تحتوي بعض أدوات تصميم المواد على StateListAnimator خاصة بها في الداخل.

دعنا نوضح هذا بسؤال على StackOverflow.

(كيفية إزالة الحدود / الظل من أزرار المصاصة).

إذا كانت أدوات التصميم متعدد الأبعاد تحتوي على StateListAnimator الخاصة بها في الداخل ، فيمكننا تعيينها على قيمة خالية لإزالة هذه الوظائف (غير مستحسن ، لم يتم تصميمها من أجل لا شيء.) والآن تبدو الإجابة منطقية أكثر.

(يحتوي Lollipop على وظيفة صغيرة سيئة تسمى stateListAnimatorتتعامل مع ارتفاع الأزرار ، مما ينتج عنه الظلال.

قم بإزالته stateListAnimatorللتخلص من الظلال.

لديك عدة خيارات لكيفية القيام بذلك:

In code:

button.setStateListAnimator (null) ؛)

فكيف نخلقه؟

لفهم StateListAnimator ، نحتاج إلى فهم حركة الخاصية . أنا لا يذهب إلى الغوص في الرسوم المتحركة الملكية في هذه المقالة. لكن على الأقل أريد أن أريكم الأساسيات.

خصائص متحركة

هذا هو أبسط مثال على خاصية في كائن. X خاصية.

class MyObject{
 
   private int x;
 
   public int getX() {
       return x;
   }
 
   public void setX(int x) {
       this.x = x;
   }
}

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

X خاصية . تي حان الوقت . أثناء الحركة ، يتم تحديث خاصية X في الوقت المحدد. بشكل عام ، هذه هي الطريقة التي تعمل بها خاصية الرسوم المتحركة. بدلاً من المربع ، يمكن أن يكون هناك عرض أو أي كائن.

ValueAnimatorهي الفئة الأساسية لتحريك الخصائص. يمكنك إعداد مستمع لتحديث ValueAnimator ومشاهدة تغييرات الخصائص.

ObjectAnimator هي فئة ترث منValueAnimator . يمكنك استخدام ObjectAnimator إذا كان ما يلي أكثر ملاءمة لك:

لديك كائن (أي فئة مع بعض الممتلكات).
أنت لا تريد مشاهدة مستمع ValueAnimator.
تريد تحديث خاصية الكائن تلقائيًا.

لذلك ، إذا كان لدينا عرض (وهو كائن) وأردنا تحديث خاصية العرض (إحداثيات س ، أو إحداثيات ص ، أو تدوير ، أو ترجمة ، أو أي خاصية أخرى يكون للعرض مُحضر / مُعيِّن لها) ، فيمكننا استخدام ObjectAnimator . دعنا نواصل إنشاء StateListAnimator.

<selector>
 
   <item android:state_pressed="true">
      <objectAnimator
           android:duration="200"
           android:propertyName="translationZ"
           android:valueTo="6dp"
           android:valueType="floatType" />
   </item>
 
   <item>
      <objectAnimator
           android:duration="200"
           android:propertyName="translationZ"
           android:valueTo="0dp"
           android:valueType="floatType"/>
   </item>
 
</selector>

يقوم زر FAB بتحريك خاصية "translationZ" الخاصة به عند الضغط عليه وتحريره.

كما قلت سابقًا ، يمكننا استخدام خاصية الكائن مباشرة دون ملاحظة التغييرات في الرسوم المتحركة. كل عرض له خاصية ترجمة Z. بهذه الطريقة يمكننا تحريك الترجمة مباشرة باستخدام ObjectAnimator.

يمكننا أيضًا تجميع عدة <objectAnimator>s في <set>. دعونا نغير طريقة عرض خاصية أخرى. نطاق X و نطاق Y .

ها هي النتيجة! وهو ينمو الآن أيضًا عند نقر المستخدم عليه. وهنا الالتزام .

يمكنك أيضًا تحديد خصائص أخرى في ملف animator.xml. يمكنك العثور على مزيد من المعلومات حول استخدام ObjectAnimator هنا.

هذا كل شئ. أخطط لكتابة المزيد عن ValueAnimator و ObjectAnimator. هذه واجهة برمجة تطبيقات رائعة لتحريك كائن.

ترميز ناجح!

تلميع واجهة المستخدم في Android: StateListAnimator