Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Facebook Litho

Facebook Litho

Droid Up 7.0 , 2017 talk about Facebook Litho

Merab Tato Kutalia

May 04, 2017
Tweet

More Decks by Merab Tato Kutalia

Other Decks in Programming

Transcript

  1. Litho - View flattening - Declarative - AsyncLayout - Recycling

    - Good Debugging Tools a declarative framework for building efficient UIs
  2. Litho uses Yoga, also by Facebook cross-platform layout engine Everything

    is a component immutable inputs knowns as Props React Terminology
  3. Litho Core Elements State Props LayoutSpec - groups existing components

    together in an immutable layout tree. MountSpec - defines a component that can render views or drawables.
  4. Litho Touch and Click @LayoutSpec class ListItemSpec { @OnCreateLayout static

    ComponentLayout onCreateLayout( ComponentContext c, @Prop(optional = true, resType = ResType.DIMEN_OFFSET) int shadowRadius, @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) .textStyle(ITALIC) .textSizeSp(20)) .clickHandler(ListItem.onClick(c)) .build(); } @OnEvent(ClickEvent.class) static void onClick(ComponentContext c, @FromEvent View view, @Prop OnListItemClickListener listener) { listener.onListItemClick(view); }
  5. Litho Install // Litho compile 'com.facebook.litho:litho-core:0.2.0' compile 'com.facebook.litho:litho-widget:0.2.0' provided 'com.facebook.litho:litho-annotations:0.2.0'

    annotationProcessor 'com.facebook.litho:litho-processor:0.2.0' // SoLoader compile 'com.facebook.soloader:soloader:0.2.0' // Optional // For debugging debugCompile 'com.facebook.litho:litho-stetho:0.2.0' //stetho itself compile 'com.facebook.stetho:stetho:1.5.0'