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

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

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

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'
}

public class MyApplication extends Application {

  @Override
  public void onCreate() {
    super.onCreate();
    
    SoLoader.init(this, false);
  }
}

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));
}

Text.create(context) .text("Hello World") .textSizeDip(50) .build();

@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();
}

@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 بناءاً على قيمة معطاه وهي اذا كان عدد زوجي مثلاً يمكنك استخدامه كلون مشابه لصورة …الخ