facebook / litho

A declarative framework for building efficient UIs on Android.
https://fblitho.com
Apache License 2.0
7.7k stars 763 forks source link

TextSpec Do Not Align Correctly When Using YogaAlign.BASELINE #391

Closed ShouboWang closed 5 years ago

ShouboWang commented 6 years ago

Version

master

Issues and Steps to Reproduce

Apply .alignItems(YogaAlign.BASELINE) on a row with 2 Text as child; where one of the Texts have a line break to force two lines.

The two Text are bottom aligned based off the view bottom, rather than baseline aligned:

screen shot 2018-06-21 at 3 53 16 pm

It seems that TextSpec is not using onMeasureBaseline for baseline calculation: (https://github.com/facebook/litho/blob/master/litho-widget/src/main/java/com/facebook/litho/widget/TextSpec.java)

Also, Android LinearLayout should be using baseline alignment as default behavior: https://possiblemobile.com/2013/10/shifty-baseline-alignment/

Expected Behavior

Two texts be baseline aligned: screen shot 2018-06-25 at 11 10 12 am

Link to Code

package com.facebook.samples.litho.playground;

import android.graphics.Color;

import com.facebook.litho.Component; import com.facebook.litho.ComponentContext; import com.facebook.litho.Row; import com.facebook.litho.annotations.LayoutSpec; import com.facebook.litho.annotations.OnCreateLayout; import com.facebook.litho.widget.Text; import com.facebook.yoga.YogaAlign;

@LayoutSpec public class PlaygroundComponentSpec {

@OnCreateLayout static Component onCreateLayout(ComponentContext c) { return Row.create(c) .alignItems(YogaAlign.BASELINE) .child( Text.create(c) .textSizeDip(15) .text("15Test\n asdfg") .backgroundColor(Color.GRAY) .build()) .child(Text.create(c).textSizeDip(24).text("24Test").backgroundColor(Color.YELLOW).build()) .build(); }

passy commented 6 years ago

@dsyang Is that the same behaviour you observed?

dsyang commented 6 years ago

Yup. Feel free to close since we've discussed internally about it.

On Jul 1, 2018 12:05 PM, "Pascal Hartig" notifications@github.com wrote:

@dsyang https://github.com/dsyang Is that the same behaviour you observed?

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/facebook/litho/issues/391#issuecomment-401626296, or mute the thread https://github.com/notifications/unsubscribe-auth/AAgWMZWR0qeTVvhHyWB9cIrApuW5Lnajks5uCR2OgaJpZM4U2oWJ .

dsyang commented 6 years ago

Or maybe close with the fix internally :)

On Sun, Jul 1, 2018, 12:36 PM Daniel Yang dsyang92@gmail.com wrote:

Yup. Feel free to close since we've discussed internally about it.

On Jul 1, 2018 12:05 PM, "Pascal Hartig" notifications@github.com wrote:

@dsyang https://github.com/dsyang Is that the same behaviour you observed?

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/facebook/litho/issues/391#issuecomment-401626296, or mute the thread https://github.com/notifications/unsubscribe-auth/AAgWMZWR0qeTVvhHyWB9cIrApuW5Lnajks5uCR2OgaJpZM4U2oWJ .