جديد فيسبوك : اطار عمل لتصميم الواجهات للاندرويد

خلال فعاليات مؤتمر FB للمطورين F8 تم الاعلان عن الكثير من الأدوات وإطارات العمل الخاصة بالمطورين ولكن شدني من خلال متابعتي لمجريات المؤتمر حديثهم عن Litho وكيفية بناء واجهات الاندرويد دون الحاجة لكتابة اي كود XML بطريقة سريعة ومنطقية واحترافية.

تعتبر Litho مكتبة خاصة بالاندرويد فقط وتعتمد في مبدأها على Yoga حيث تقوم بإنشاء ملفات Layout عند عملية تشغيل التطبيق دون التدخل من المبرمج وايضاً يمكنك تخصيصها من ناحية الالوان والإزاحة وجميع خيارات Components الأخرى الخاصة بالاندرويد. يفضل استخدامها مع القوائم إذا كانت متغيرة المحتوى كالصور والفيديو والنصوص وخلافه.

إضافة Litho:
من خلال مشروعك القائم قم بإضافة هذه الأسطر في ملف gradle الخاص بالتطبيق .
dependencies {
  // ...
  // Litho
  compile 'com.facebook.litho:litho-core:0.3.1'
  compile 'com.facebook.litho:litho-widget:0.3.1'
  provided 'com.facebook.litho:litho-annotations:0.3.1'

  annotationProcessor 'com.facebook.litho:litho-processor:0.3.1'

  // SoLoader
  compile 'com.facebook.soloader:soloader:0.2.0'

  // Optional
  // For debugging
  debugCompile 'com.facebook.litho:litho-stetho:0.3.1'

  // For integration with Fresco
  compile 'com.facebook.litho:litho-fresco:0.3.1'

  // For testing
  testCompile 'com.facebook.litho:litho-testing:0.3.1'
}
اختبار عملية الإضافة:
الان بعد ان قمنا بإضافة المكتبة إلى الأندرويد سنقوم بعملية تجربة أو اختبار هل تم اضافة جميع المكتبات بالشكل المطلوب ؟!.
بدايةً سنقوم بإنشاء كلاس جافا جديد وريث من Application وسنقوم بإضافة بعض الأسطر لعملية تهيئة واستدعاء المكتبة.
public class MyApplication extends Application {

  @Override
  public void onCreate() {
    super.onCreate();
    
    SoLoader.init(this, false);
  }
}
الآن سنقوم بإضافة TextView باستخدام Litho في الشاشة الرئيسية للتطبيق و ستقوم بطباعة Hello World
import com.facebook.litho.ComponentContext;
import com.facebook.litho.LithoView;

public class MyActivity extends Activity {

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    
    final ComponentContext c = new ComponentContext(this);

    final LithoView lithoView = LithoView.create(
        this /* context */, 
        Text.create(c)
            .text("Hello, World!")
            .textSizeDip(50)
            .build());
        
    setContentView(lithoView);
  }
}

الان وعند تشغيل التطبيق سيظهر لك TextView يحمل النص Hello World دون كتابة أي سطر XM.

شرح الشفرة السابقة:
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    final ComponentContext context = new ComponentContext(this);

    final Component component = Text.create(context)
        .text("Hello World")
        .textSizeDip(50)
        .build();

    setContentView(LithoView.create(context, component));
}
LithoView : هو بالأساس Viewgroup اندرويد يقوم بإخراج components على الشاشة ويعتبر هو حلقة الوصل الأساسية بين مكونات Litho و مكونات الاندرويد.
وضعنا Content Activity LithoView ليقوم بعرض TextView على الشاشة.
كيف تعمل الـ Component ؟
Text.create(context) .text("Hello World") .textSizeDip(50) .build();

Text: هو عنصر أو Component مضاف من com.facebook.litho.widget ويحتوي على مجموعة كبيرة من الخصائص كـ”حجم النص ، واللون .. ” .
الآن جمعت معلومات عن Litho وكيفية اضافة عنصر أو Component وحيد الى الشاشة . لكن ماذا لو اردنا اضافة اكثر من عنصر في شاشة واحدة ؟!
هذا ما سنتعرف عليه تباعاً في هذا الدرس المطول بإذن الله.
 انشاء قائمة من العناصر :
من اهم المكونات في التطبيقات هي القوائم والان ساشرح طريقة استخدام Litho في انشاء قائمة من العناصر وسنتعلم ايضاً اضافة خصائص للعناصر بشكل سلس وبسيط  وذلك باضافة @prop قبل اسم التخصيص كما ستلاحظ في الشفرة القادمة .
@OnCreateLayout
        
static Component onCreateLayout(
        ComponentContext c,
@Prop int color,
@Prop String title,
@Prop String subtitle) {

    return Column.create(c)
            .paddingDip(ALL, 16)
            .backgroundColor(color)
            .child(
                    Text.create(c)
                            .text(title)
                            .textSizeSp(40))
            .child(
                    Text.create(c)
                            .text(subtitle)
                            .textSizeSp(20))
            .build();
}
نلاحظ من الشفرة السابقة ان text و color لم تعد كتابتها بشكل غير احترافي فاصبحت متغيره بحسب القيمة المعطاه، الان سنلاحظ عند انشاء القائمة ستلاحظ كيفية استخدام Component في قائمة بدون اعادة كتابة الاوامر مرة اخرى مما يجعل الكود لديك نظيف جداً
@OnCreateChildren
static Children onCreateChildren(final SectionContext c) {
    Children.Builder builder = Children.create();

    for (int i = 0; i < 32; i++) {
        builder.child(
                SingleComponentSection.create(c)
                        .key(String.valueOf(i))
                        .component(ListItem.create(c)
                                .color(i % 2 == 0 ? Color.WHITE : Color.LTGRAY)
                                .title(i + ". Hello, world!")
                                .subtitle("Litho tutorial")
                                .build()));
    }
    return builder.build();
}


الان ستلاحظ في النتيجة تغير خلفية Component بناءاً على قيمة معطاه وهي اذا كان عدد زوجي مثلاً يمكنك استخدامه كلون مشابه لصورة …الخ

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *