Created
May 30, 2017 22:57
-
-
Save jerryOkafor/fe9272d583d6dea7628f0d7a448d07d7 to your computer and use it in GitHub Desktop.
Some Somaple Codes for Chat UI Using facebook Litho
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package com.pacentltd.smartalumni.layoutspec; | |
| import com.facebook.drawee.backends.pipeline.Fresco; | |
| import com.facebook.drawee.drawable.ScalingUtils; | |
| import com.facebook.drawee.generic.RoundingParams; | |
| import com.facebook.drawee.interfaces.DraweeController; | |
| import com.facebook.imagepipeline.common.ResizeOptions; | |
| import com.facebook.imagepipeline.request.ImageRequest; | |
| import com.facebook.imagepipeline.request.ImageRequestBuilder; | |
| import com.facebook.litho.Column; | |
| import com.facebook.litho.ComponentContext; | |
| import com.facebook.litho.ComponentLayout; | |
| import com.facebook.litho.Row; | |
| import com.facebook.litho.annotations.LayoutSpec; | |
| import com.facebook.litho.annotations.OnCreateLayout; | |
| import com.facebook.litho.annotations.Prop; | |
| import com.facebook.litho.fresco.FrescoImage; | |
| import com.facebook.litho.widget.Image; | |
| import com.facebook.litho.widget.Text; | |
| import com.facebook.yoga.YogaAlign; | |
| import com.facebook.yoga.YogaEdge; | |
| import com.pacentltd.smartalumni.R; | |
| import static android.graphics.Typeface.BOLD; | |
| /** | |
| * Created by Jerry < @Po10cio > on 26/05/2017 for SmartAlumni. | |
| * Copyright (C) Pacent Technologies Ltd. | |
| */ | |
| @LayoutSpec | |
| public class ContactMessageViewSpec { | |
| @OnCreateLayout | |
| static ComponentLayout onCreateLayout(ComponentContext c, | |
| @Prop boolean isIn, | |
| @Prop(optional = true) String senderName, | |
| @Prop(optional = true) boolean seen, | |
| @Prop String contactName, | |
| @Prop(optional = true) String contactPhone, | |
| @Prop String timestamp) { | |
| // Uri uri = new Uri.Builder() | |
| // .scheme("res://") //res | |
| // .path(String.valueOf(R.drawable.avatar)) | |
| // .build(); | |
| int width = 10; | |
| int height = 10; | |
| final ImageRequest imageRequest = ImageRequestBuilder.newBuilderWithResourceId(R.drawable.avatar) | |
| .setResizeOptions(new ResizeOptions(width, height)) | |
| .build(); | |
| final DraweeController controller = Fresco.newDraweeControllerBuilder() | |
| // .setUri(uri) | |
| .setImageRequest(imageRequest) | |
| .build(); | |
| final ComponentLayout.ContainerBuilder iconContianer = Column.create(c) | |
| .widthDip(60) | |
| .minHeightDip(60) | |
| .child(FrescoImage.create(c) | |
| .controller(controller) | |
| .actualImageScaleType(ScalingUtils.ScaleType.CENTER_CROP) | |
| .roundingParams(RoundingParams.asCircle()) | |
| .build()); | |
| ComponentLayout.ContainerBuilder contentRow = Row.create(c) | |
| .child(iconContianer.build()) | |
| .child( | |
| Column.create(c) | |
| .child( | |
| Text.create(c) | |
| .text(contactName) | |
| .textSizeSp(14) | |
| .build()) | |
| .child( | |
| Text.create(c) | |
| .text(contactPhone) | |
| .textSizeSp(18) | |
| .build()) | |
| .marginDip(YogaEdge.START, 16) | |
| .build() | |
| ); | |
| ComponentLayout.ContainerBuilder timestampRowBuilder = Row.create(c) | |
| .alignSelf(YogaAlign.FLEX_END) | |
| .marginDip(YogaEdge.TOP, 5) | |
| .child(Text.create(c) | |
| .text(timestamp) | |
| .textColorRes(R.color.color_primary) | |
| .textSizeSp(12) | |
| .build()); | |
| if (!isIn) { | |
| timestampRowBuilder | |
| .child(Image.create(c) | |
| .drawableRes(seen ? R.drawable.ic_done_all : R.drawable.ic_done) | |
| .build()); | |
| } | |
| ComponentLayout.ContainerBuilder holder = Row.create(c) | |
| .backgroundRes(isIn ? R.drawable.balloon_incoming_normal : R.drawable.balloon_outgoing_normal) | |
| .alignSelf(isIn ? YogaAlign.FLEX_START : YogaAlign.FLEX_END) | |
| .alignContent(isIn ? YogaAlign.FLEX_START : YogaAlign.FLEX_END) | |
| .alignItems(isIn ? YogaAlign.FLEX_START : YogaAlign.FLEX_END) | |
| .marginDip(YogaEdge.TOP, 8) | |
| .marginDip(YogaEdge.BOTTOM, 8); | |
| ComponentLayout.ContainerBuilder innerBuilder = Column.create(c) | |
| .marginDip(YogaEdge.ALL, 8); | |
| if (isIn) { | |
| innerBuilder | |
| .child(Text.create(c) | |
| .isSingleLine(true) | |
| .text(senderName) | |
| .textSizeSp(14f) | |
| .textStyle(BOLD) | |
| .withLayout() | |
| .build() | |
| ); | |
| } | |
| innerBuilder | |
| .child(contentRow.build()); | |
| //add the Timestamp Row | |
| innerBuilder.child(timestampRowBuilder.build()); | |
| holder.child(innerBuilder.build()); | |
| ComponentLayout.ContainerBuilder builder = | |
| Column.create(c) | |
| .marginDip(YogaEdge.TOP, 8) | |
| .marginDip(YogaEdge.BOTTOM, 8) | |
| .child(holder.build()) | |
| .alignSelf(isIn ? YogaAlign.FLEX_START : YogaAlign.FLEX_END) | |
| .alignContent(isIn ? YogaAlign.FLEX_START : YogaAlign.FLEX_END) | |
| .paddingDip(YogaEdge.END, isIn ? 72 : 16) | |
| .paddingDip(YogaEdge.START, isIn ? 16 : 72); | |
| return builder.build(); | |
| } | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package com.pacentltd.smartalumni.layoutspec; | |
| import com.facebook.litho.Column; | |
| import com.facebook.litho.ComponentContext; | |
| import com.facebook.litho.ComponentLayout; | |
| import com.facebook.litho.Row; | |
| import com.facebook.litho.annotations.LayoutSpec; | |
| import com.facebook.litho.annotations.OnCreateLayout; | |
| import com.facebook.litho.annotations.Prop; | |
| import com.facebook.litho.widget.Text; | |
| import com.facebook.yoga.YogaAlign; | |
| import com.facebook.yoga.YogaEdge; | |
| import static android.graphics.Typeface.BOLD; | |
| /** | |
| * Created by Jerry < @Po10cio > on 24/05/2017 for SmartAlumni. | |
| * Copyright (C) Pacent Technologies Ltd. | |
| */ | |
| @LayoutSpec | |
| public class TextMessageViewInSpec { | |
| @OnCreateLayout | |
| static ComponentLayout onCreateLayout(ComponentContext c, | |
| @Prop String senderName, | |
| @Prop String message) { | |
| return Row.create(c) | |
| .alignSelf(YogaAlign.FLEX_END) | |
| .paddingDip(YogaEdge.END, 72) | |
| .paddingDip(YogaEdge.START, 8) | |
| .child( | |
| Column.create(c) | |
| .marginDip(YogaEdge.ALL, 16) | |
| .child(Row.create(c) | |
| .child(Text.create(c) | |
| .text(message) | |
| .textSizeSp(12f) | |
| .withLayout() | |
| .build())) | |
| .build() | |
| ).build(); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package com.pacentltd.smartalumni.layoutspec; | |
| import com.facebook.litho.Column; | |
| import com.facebook.litho.ComponentContext; | |
| import com.facebook.litho.ComponentLayout; | |
| import com.facebook.litho.Row; | |
| import com.facebook.litho.annotations.LayoutSpec; | |
| import com.facebook.litho.annotations.OnCreateLayout; | |
| import com.facebook.litho.annotations.Prop; | |
| import com.facebook.litho.widget.Image; | |
| import com.facebook.litho.widget.Text; | |
| import com.facebook.yoga.YogaAlign; | |
| import com.facebook.yoga.YogaEdge; | |
| import com.pacentltd.smartalumni.R; | |
| import static android.graphics.Typeface.BOLD; | |
| import static android.graphics.Typeface.NORMAL; | |
| /** | |
| * Created by Jerry < @Po10cio > on 24/05/2017 for SmartAlumni. | |
| * Copyright (C) Pacent Technologies Ltd. | |
| */ | |
| @LayoutSpec | |
| public class TextMessageViewSpec { | |
| @OnCreateLayout | |
| static ComponentLayout onCreateLayout(ComponentContext c, | |
| @Prop boolean isIn, | |
| @Prop(optional = true) String senderName, | |
| @Prop(optional = true) boolean seen, | |
| @Prop String timestamp, | |
| @Prop String message) { | |
| ComponentLayout.ContainerBuilder timestampRowBuilder = Row.create(c) | |
| .alignSelf(YogaAlign.FLEX_END) | |
| .marginDip(YogaEdge.TOP, 5) | |
| .child(Text.create(c) | |
| .text(timestamp) | |
| .textColorRes(R.color.color_primary) | |
| .textSizeSp(12) | |
| .build()); | |
| if (!isIn) { | |
| timestampRowBuilder | |
| .child(Image.create(c) | |
| .drawableRes(seen ? R.drawable.ic_done_all : R.drawable.ic_done) | |
| .build()); | |
| } | |
| ComponentLayout.ContainerBuilder holder = Row.create(c) | |
| .backgroundRes(isIn ? R.drawable.balloon_incoming_normal: R.drawable.balloon_outgoing_normal) | |
| .alignSelf(isIn ? YogaAlign.FLEX_START : YogaAlign.FLEX_END) | |
| .alignContent(isIn ? YogaAlign.FLEX_START : YogaAlign.FLEX_END) | |
| .alignItems(isIn ? YogaAlign.FLEX_START : YogaAlign.FLEX_END) | |
| .marginDip(YogaEdge.TOP, 8) | |
| .marginDip(YogaEdge.BOTTOM, 8); | |
| ComponentLayout.ContainerBuilder innerBuilder = Column.create(c) | |
| .marginDip(YogaEdge.ALL, 8); | |
| if (isIn) { | |
| innerBuilder | |
| .child(Text.create(c) | |
| .isSingleLine(true) | |
| .text(senderName) | |
| .textSizeSp(14f) | |
| .textStyle(BOLD) | |
| .withLayout() | |
| .build() | |
| ); | |
| } | |
| innerBuilder | |
| .child(Text.create(c) | |
| .text(message) | |
| .textSizeSp(14f) | |
| .textStyle(NORMAL) | |
| .withLayout() | |
| .build()); | |
| //add the Timestamp Row | |
| innerBuilder.child(timestampRowBuilder.build()); | |
| holder.child(innerBuilder.build()); | |
| ComponentLayout.ContainerBuilder builder = | |
| Column.create(c) | |
| .marginDip(YogaEdge.TOP, 8) | |
| .marginDip(YogaEdge.BOTTOM, 8) | |
| .child(holder.build()) | |
| .alignSelf(isIn ? YogaAlign.FLEX_START : YogaAlign.FLEX_END) | |
| .alignContent(isIn ? YogaAlign.FLEX_START : YogaAlign.FLEX_END) | |
| .paddingDip(YogaEdge.END, isIn ? 72 : 8) | |
| .paddingDip(YogaEdge.START, isIn ? 8 : 72); | |
| return builder.build(); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment