Permalink
Browse files

Fix text, textinput padding

Summary:
The issue here is that on some devices (ie. Nexus 5X), under certain
circumstances, the text gets trimmed. A simple example is P56651885, where the
text is at the end of the line and some padding is set. Digging further with
P56659346, I found that only the paddings that have integer pixel values work
correctly: these are the values P56656483, and this is the screenshot of that
test: {F63510378}.

It turns out that when we set the padding directly on the TextView, we have to
convert from float to int, and use `ceil` in the process. We lose some precision
here, since the csslayout will use the float values to compute the layout of the
views. The ideal solution would be to just set the float values on the TextView,
but since we can't do that, we should avoid using `ceil` instead of `floor`
since it can have bad side-effects in some scenarios.
Going way back to D1881202 and D1710471, we started using `ceil` because that
is how android handles non-integer
density ratios: "This figure is the factor by which you should multiply the dp
units on order to get the actual pixel count for the current screen. (Then add
0.5f to round the figure up to the nearest whole number, when converting to an
integer.)", see https://developer.android.com/guide/practices/screens_support.html.

Reviewed By: emilsjolander

Differential Revision: D3876310

fbshipit-source-id: 701c05a8b1a045d4e06fc89ffe79162c1eecb62c
  • Loading branch information...
1 parent 4941cbc commit bdff10b4ea5abc8f02ae4e5cabfca07d3f7da790 @andreicoman11 andreicoman11 committed with Facebook Github Bot Sep 19, 2016
@@ -9,6 +9,8 @@
package com.facebook.react.views.text;
+import javax.annotation.Nullable;
+
import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
@@ -24,8 +26,6 @@
import com.facebook.react.uimanager.ViewDefaults;
import com.facebook.react.views.view.ReactViewBackgroundDrawable;
-import javax.annotation.Nullable;
-
public class ReactTextView extends TextView implements ReactCompoundView {
private static final ViewGroup.LayoutParams EMPTY_LAYOUT_PARAMS =
@@ -59,10 +59,10 @@ public void setText(ReactTextUpdate update) {
}
setText(update.getText());
setPadding(
- (int) Math.ceil(update.getPaddingLeft()),
- (int) Math.ceil(update.getPaddingTop()),
- (int) Math.ceil(update.getPaddingRight()),
- (int) Math.ceil(update.getPaddingBottom()));
+ (int) Math.floor(update.getPaddingLeft()),
+ (int) Math.floor(update.getPaddingTop()),
+ (int) Math.floor(update.getPaddingRight()),
+ (int) Math.floor(update.getPaddingBottom()));
int nextTextAlign = update.getTextAlign();
if (mTextAlign != nextTextAlign) {
@@ -82,10 +82,10 @@ public void measure(
(int) Math.ceil(PixelUtil.toPixelFromSP(ViewDefaults.FONT_SIZE_SP)) : mFontSize);
mComputedPadding = spacingToFloatArray(getPadding());
editText.setPadding(
- (int) Math.ceil(getPadding().get(Spacing.START)),
- (int) Math.ceil(getPadding().get(Spacing.TOP)),
- (int) Math.ceil(getPadding().get(Spacing.END)),
- (int) Math.ceil(getPadding().get(Spacing.BOTTOM)));
+ (int) Math.floor(getPadding().get(Spacing.START)),
+ (int) Math.floor(getPadding().get(Spacing.TOP)),
+ (int) Math.floor(getPadding().get(Spacing.END)),
+ (int) Math.floor(getPadding().get(Spacing.BOTTOM)));
if (mNumberOfLines != UNSET) {
editText.setLines(mNumberOfLines);

0 comments on commit bdff10b

Please sign in to comment.