androidx.annotation.DimenRes#com.facebook.yoga.YogaEdge源码实例Demo

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @Prop ListRow row) {
  return Column.create(c)
      .paddingDip(YogaEdge.VERTICAL, 8)
      .paddingDip(YogaEdge.HORIZONTAL, 32)
      .child(
          Card.create(c)
              .content(
                  Column.create(c)
                      .marginDip(YogaEdge.ALL, 32)
                      .child(TitleComponent.create(c).title(row.title))
                      .child(PossiblyCrashingSubTitleComponent.create(c).subtitle(row.subtitle))
                      .build())
              .build())
      .build();
}
 

private static Component affectedParent(ComponentContext c, boolean flag3) {
  return Row.create(c)
      .justifyContent(YogaJustify.CENTER)
      .child(
          Row.create(c)
              .transitionKey(TRANSITION_KEY_CONTAINER_3)
              .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
              .heightDip(60 + 2 * 8)
              .paddingDip(YogaEdge.ALL, 8)
              .backgroundColor(Color.LTGRAY)
              .child(
                  Column.create(c)
                      .transitionKey(TRANSITION_KEY_CHILD_3_1)
                      .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
                      .widthDip(60 * (flag3 ? 1 : 2))
                      .backgroundColor(Color.YELLOW))
              .clickHandler(BoundsAnimationComponent.onThirdComponentClick(c)))
      .build();
}
 

@Test
public void testPaddingFromDrawableIsOverwritten() {
  final InternalNode node = spy(new DefaultInternalNode(mComponentContext));

  mCommonProps.background(
      ContextCompat.getDrawable(mComponentContext.getAndroidContext(), background_with_padding));
  mCommonProps.paddingPx(YogaEdge.LEFT, 0);
  mCommonProps.paddingPx(YogaEdge.TOP, 0);
  mCommonProps.paddingPx(YogaEdge.RIGHT, 0);
  mCommonProps.paddingPx(YogaEdge.BOTTOM, 0);

  mCommonProps.copyInto(mComponentContext, node);

  InOrder inOrder = Mockito.inOrder(node);
  inOrder.verify(node).paddingPx(YogaEdge.LEFT, 48);
  inOrder.verify(node).paddingPx(YogaEdge.LEFT, 0);

  verify(node, times(2)).paddingPx(YogaEdge.TOP, 0);
  verify(node, times(2)).paddingPx(YogaEdge.RIGHT, 0);
  verify(node, times(2)).paddingPx(YogaEdge.BOTTOM, 0);
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @Prop String messageText,
    @Prop String timestamp,
    @Prop(optional = true) boolean seen,
    @State Boolean expanded) {
  final boolean isExpanded = expanded == null ? false : expanded;
  return Column.create(c)
      .paddingDip(YogaEdge.TOP, 8)
      .transitionKey(ExpandableElementUtil.TRANSITION_MSG_PARENT)
      .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
      .clickHandler(ExpandableElementOther.onClick(c))
      .child(ExpandableElementUtil.maybeCreateTopDetailComponent(c, isExpanded, timestamp))
      .child(
          Column.create(c)
              .transitionKey(ExpandableElementUtil.TRANSITION_TEXT_MESSAGE_WITH_BOTTOM)
              .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
              .child(
                  Row.create(c)
                      .paddingDip(YogaEdge.END, 5)
                      .child(createSenderTile(c))
                      .child(createMessageContent(c, messageText)))
              .child(ExpandableElementUtil.maybeCreateBottomDetailComponent(c, isExpanded, seen)))
      .build();
}
 

@Test
public void testFullImpressionEvent() {
  final TestComponent content = create(mContext).build();
  final EventHandler<FullImpressionVisibleEvent> fullImpressionVisibleEvent =
      new EventHandler<>(content, 2);
  final Component root =
      Column.create(mContext)
          .child(
              Wrapper.create(mContext)
                  .delegate(content)
                  .fullImpressionHandler(fullImpressionVisibleEvent)
                  .widthPx(10)
                  .heightPx(5)
                  .marginPx(YogaEdge.TOP, 5))
          .build();
  mLithoViewRule
      .setRoot(root)
      .attachToWindow()
      .setSizeSpecs(makeSizeSpec(10, EXACTLY), makeSizeSpec(10, EXACTLY))
      .measure()
      .layout();

  assertThat(content.getDispatchedEventHandlers()).contains(fullImpressionVisibleEvent);
}
 

@Test
public void testSettingMultipleEdgesIncreasesTheArray() {
  mEdges.set(YogaEdge.TOP, 1);
  mEdges.set(YogaEdge.LEFT, 2);
  mEdges.set(YogaEdge.ALL, 5);

  long bits = ~0;
  bits &= ~((long) (0xF) << (YogaEdge.TOP.intValue() * 4));
  bits &= ~((long) (0xF) << (YogaEdge.LEFT.intValue() * 4));
  bits &= ~((long) (0xF) << (YogaEdge.ALL.intValue() * 4));
  bits |= ((long) 0 << (YogaEdge.TOP.intValue() * 4));
  bits |= ((long) 1 << (YogaEdge.LEFT.intValue() * 4));
  bits |= ((long) 2 << (YogaEdge.ALL.intValue() * 4));
  assertThat(getEdgesToValuesIndex()).isEqualTo(bits);

  assertThat(getValuesArray().length).isEqualTo(4);
  assertThat(getValuesArray()[0]).isEqualTo(1);
  assertThat(getValuesArray()[1]).isEqualTo(2);
  assertThat(getValuesArray()[2]).isEqualTo(5);
  assertThat(getValuesArray()[3]).isNaN();
}
 

@Test
public void testFullImpressionEvent() {
  final TestComponent content = create(mContext).build();
  final EventHandler<FullImpressionVisibleEvent> fullImpressionVisibleEvent =
      new EventHandler<>(content, 2);

  mountComponent(
      mContext,
      mLithoView,
      Column.create(mContext)
          .child(
              Wrapper.create(mContext)
                  .delegate(content)
                  .fullImpressionHandler(fullImpressionVisibleEvent)
                  .widthPx(10)
                  .heightPx(5)
                  .marginPx(YogaEdge.TOP, 5))
          .build(),
      true,
      true,
      10,
      10);

  assertThat(content.getDispatchedEventHandlers()).contains(fullImpressionVisibleEvent);
}
 

@Test
public void onTouchEventWithinBounds_shouldBeHandled() {
  final ClickListenerCallback callback = new ClickListenerCallback();
  final Component component =
      Column.create(mContext)
          .child(
              OnClickCallbackComponent.create(mContext)
                  .widthPx(10)
                  .heightPx(10)
                  .callback(callback)
                  .touchExpansionPx(YogaEdge.ALL, 5))
          .paddingPx(YogaEdge.ALL, 10)
          .build();

  mLithoViewRule.setRoot(component).attachToWindow().measure().layout();

  emulateClickEvent(mLithoViewRule.getLithoView(), 7, 7);

  assertThat(callback.handled)
      .describedAs("TouchEvent within bounds bounds should be handled")
      .isTrue();

  assertThat(callback.count)
      .describedAs("TouchEvent within bounds bounds should be handled only once")
      .isEqualTo(1);
}
 

@Test
public void testInsertingOneEdgeMultipleTimes() {
  mEdges.set(YogaEdge.TOP, 1);
  mEdges.set(YogaEdge.TOP, 2);
  mEdges.set(YogaEdge.TOP, 3);
  mEdges.set(YogaEdge.TOP, 4);
  mEdges.set(YogaEdge.TOP, 5);

  long bits = ~0;
  bits &= ~((long) (0xF) << (YogaEdge.TOP.intValue() * 4));
  bits |= ((long) 0 << (YogaEdge.TOP.intValue() * 4));
  assertThat(getEdgesToValuesIndex()).isEqualTo(bits);

  assertThat(getValuesArray().length).isEqualTo(2);
  assertThat(getValuesArray()[0]).isEqualTo(5);
  assertThat(YogaConstants.isUndefined(getValuesArray()[1])).isTrue();
}
 

static YogaEdge edgeFromIndex(int i) {
  if (i < 0 || i >= EDGE_COUNT) {
    throw new IllegalArgumentException("Given index out of range of acceptable edges: " + i);
  }
  switch (i) {
    case EDGE_LEFT:
      return YogaEdge.LEFT;
    case EDGE_TOP:
      return YogaEdge.TOP;
    case EDGE_RIGHT:
      return YogaEdge.RIGHT;
    case EDGE_BOTTOM:
      return YogaEdge.BOTTOM;
  }
  throw new IllegalArgumentException("Given unknown edge index: " + i);
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @State DynamicValue<Float> translationX,
    @State DynamicValue<Float> translationY) {
  return Column.create(c)
      .alignItems(YogaAlign.CENTER)
      .justifyContent(YogaJustify.CENTER)
      .paddingDip(YogaEdge.ALL, 50)
      .child(
          // Create the component we will animate. Apply the DynamicValues to it.
          Text.create(c)
              .text("\u26BE")
              .textSizeSp(50)
              .translationX(translationX)
              .translationY(translationY))
      .visibleHandler(ContinuousExampleComponent.onVisible(c))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @State RecyclerCollectionEventsController recyclerEventsController,
    @State DynamicValue<Float> handleTranslation,
    @State ScrollController scrollController) {
  return Column.create(c)
      .backgroundColor(Color.WHITE)
      .child(
          RecyclerCollectionComponent.create(c)
              .positionType(YogaPositionType.ABSOLUTE)
              .positionPx(YogaEdge.ALL, 0)
              .section(CountriesListSection.create(new SectionContext(c)).build())
              .onScrollListener(scrollController)
              .eventsController(recyclerEventsController)
              .disablePTR(true))
      .child(
          buildDragHandle(c)
              .positionType(YogaPositionType.ABSOLUTE)
              .positionDip(YogaEdge.RIGHT, HANDLE_RIGHT_MARGIN)
              .positionDip(YogaEdge.TOP, HANDLE_VERTICAL_MARGIN)
              .translationY(handleTranslation)
              .touchHandler(FastScrollHandleComponent.onTouchEvent(c)))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @Prop(resType = STRING) String text) {
  return Column.create(c)
      .paddingDip(YogaEdge.ALL, 8)
      .child(Text.create(c).text(text).textSizeDip(14).textColor(GRAY).textStyle(ITALIC))
      .build();
}
 

@Test
public void testInvisibleEvent() {
  final TestComponent content = create(mContext).build();
  final EventHandler<InvisibleEvent> invisibleEventHandler = new EventHandler<>(content, 2);

  final LithoView lithoView =
      mountComponent(
          mContext,
          mLithoView,
          Column.create(mContext)
              .child(
                  Wrapper.create(mContext)
                      .delegate(content)
                      .invisibleHandler(invisibleEventHandler)
                      .widthPx(10)
                      .heightPx(5)
                      .marginPx(YogaEdge.TOP, 5))
              .build(),
          true,
          true,
          10,
          10);

  assertThat(content.getDispatchedEventHandlers()).doesNotContain(invisibleEventHandler);

  lithoView.notifyVisibleBoundsChanged(new Rect(LEFT, 0, RIGHT, 5), true);
  assertThat(content.getDispatchedEventHandlers()).contains(invisibleEventHandler);
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @State boolean shouldAlignStart) {
  return Column.create(c)
      .paddingDip(YogaEdge.ALL, 20)
      .alignItems(shouldAlignStart ? YogaAlign.FLEX_START : YogaAlign.FLEX_END)
      .child(Row.create(c).heightDip(SIZE_DP).widthDip(SIZE_DP).backgroundColor(Color.RED))
      .clickHandler(SingleComponentMovesTransition.onClick(c))
      .build();
}
 

@Test
public void testVisibilityProcessingNoScrollChange() {
  final TestComponent content = create(mContext).build();
  final EventHandler<VisibleEvent> visibleEventHandler = new EventHandler<>(content, 2);
  final Component root =
      Column.create(mContext)
          .child(
              Wrapper.create(mContext)
                  .delegate(content)
                  .visibleHandler(visibleEventHandler)
                  .widthPx(10)
                  .heightPx(5)
                  .marginPx(YogaEdge.TOP, 5))
          .build();

  mLithoViewRule
      .useComponentTree(ComponentTree.create(mContext).incrementalMount(false).build())
      .setRoot(root)
      .attachToWindow()
      .setSizeSpecs(makeSizeSpec(10, EXACTLY), makeSizeSpec(5, EXACTLY))
      .measure()
      .layout();

  assertThat(content.getDispatchedEventHandlers()).doesNotContain(visibleEventHandler);

  mLithoView.setBottom(10);
  mLithoView.performLayout(true, 0, 0, RIGHT, 10);

  assertThat(content.getDispatchedEventHandlers()).contains(visibleEventHandler);
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @State int state) {
  final boolean expanded1 = state == 1 || state == 2;
  final boolean expanded2 = state == 2 || state == 3;
  return Column.create(c)
      .paddingDip(YogaEdge.ALL, 8)
      .child(Row.create(c).marginDip(YogaEdge.TOP, 8).child(buildComment1(c, expanded1)))
      .child(Row.create(c).marginDip(YogaEdge.TOP, 16).child(buildComment2(c, expanded2)))
      .clickHandler(AnimatedBadge.onClick(c))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c, @Prop Component child, @State Optional<String> error) {

  if (error.isPresent()) {
    return Text.create(c)
        .marginDip(YogaEdge.ALL, 8)
        .textSizeSp(24)
        .text(String.format("A WILD ERROR APPEARS:\n%s", error.get()))
        .build();
  }

  return child;
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c) {
  return Row.create(c)
      .backgroundColor(0xDDFFFFFF)
      .positionType(YogaPositionType.ABSOLUTE)
      .positionDip(YogaEdge.RIGHT, 4)
      .positionDip(YogaEdge.TOP, 4)
      .paddingDip(YogaEdge.ALL, 2)
      .child(FavouriteButton.create(c))
      .build();
}
 

@Test
public void testVerticalColorSetting() {
  final ComponentContext c = new ComponentContext(getApplicationContext());
  Border border =
      Border.create(c)
          .color(YogaEdge.ALL, 0xFFFF0000)
          .color(YogaEdge.VERTICAL, 0xFF00FF00)
          .build();
  assertThat(border.mEdgeColors[Border.EDGE_LEFT]).isEqualTo(0xFFFF0000);
  assertThat(border.mEdgeColors[Border.EDGE_TOP]).isEqualTo(0xFF00FF00);
  assertThat(border.mEdgeColors[Border.EDGE_RIGHT]).isEqualTo(0xFFFF0000);
  assertThat(border.mEdgeColors[Border.EDGE_BOTTOM]).isEqualTo(0xFF00FF00);
}
 

@Test
public void setNewComponentTree_noMount_noVisibilityEventsDispatched() {
  final TestComponent content = create(mContext).build();
  final EventHandler<VisibleEvent> visibleEventHandler = new EventHandler<>(content, 2);
  final EventHandler<InvisibleEvent> invisibleEventHandler = new EventHandler<>(content, 1);

  final Component root =
      Column.create(mContext)
          .child(
              Wrapper.create(mContext)
                  .delegate(content)
                  .visibleHandler(visibleEventHandler)
                  .invisibleHandler(invisibleEventHandler)
                  .widthPx(10)
                  .heightPx(5)
                  .marginPx(YogaEdge.TOP, 5))
          .build();

  final ComponentTree componentTree = ComponentTree.create(mContext, root).build();
  mLithoView.setComponentTree(componentTree);

  assertThat(content.getDispatchedEventHandlers()).doesNotContain(visibleEventHandler);

  content.getDispatchedEventHandlers().clear();

  final ComponentTree newComponentTree = ComponentTree.create(mContext, root).build();
  mLithoView.setComponentTree(newComponentTree);

  assertThat(content.getDispatchedEventHandlers()).doesNotContain(invisibleEventHandler);
  assertThat(content.getDispatchedEventHandlers()).doesNotContain(visibleEventHandler);
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
  final Handle anchorHandle = new Handle();
  return Column.create(c)
      .alignItems(YogaAlign.CENTER)
      .child(
          Text.create(c, android.R.attr.buttonStyle, 0)
              .marginDip(YogaEdge.BOTTOM, 50)
              .text("Click to Trigger show tooltip")
              .clickHandler(TooltipTriggerExampleComponent.onClick(c, anchorHandle)))
      .child(Text.create(c).text("Tooltip anchor").handle(anchorHandle))
      .visibleHandler(TooltipTriggerExampleComponent.onVisible(c, anchorHandle))
      .build();
}
 

@Test
public void testVisibleRectChangedEventItemNotVisible() {
  final TestComponent content = create(mContext).build();
  final EventHandler<VisibilityChangedEvent> visibilityChangedHandler =
      new EventHandler<>(content, 3);

  final LithoView lithoView =
      mountComponent(
          mContext,
          mLithoView,
          Column.create(mContext)
              .child(
                  Wrapper.create(mContext)
                      .delegate(content)
                      .visibilityChangedHandler(visibilityChangedHandler)
                      .widthPx(10)
                      .heightPx(5)
                      .marginPx(YogaEdge.TOP, 5))
              .build(),
          true,
          true,
          10,
          10);

  content.getDispatchedEventHandlers().clear();

  lithoView.notifyVisibleBoundsChanged(new Rect(LEFT, 0, RIGHT, 5), true);
  assertThat(content.getDispatchedEventHandlers()).contains(visibilityChangedHandler);

  VisibilityChangedEvent visibilityChangedEvent =
      (VisibilityChangedEvent) content.getEventState(visibilityChangedHandler);

  assertThat(visibilityChangedEvent.visibleHeight).isEqualTo(0);
  assertThat(visibilityChangedEvent.visibleWidth).isEqualTo(0);
  assertThat(visibilityChangedEvent.percentVisibleHeight).isEqualTo(0.0f);
  assertThat(visibilityChangedEvent.percentVisibleWidth).isEqualTo(0.0f);
}
 

public void setPadding(YogaEdge edge, YogaValue value) {
  switch (value.unit) {
    case UNDEFINED:
    case AUTO:
      mNode.paddingPx(edge, 0);
      break;
    case PERCENT:
      mNode.paddingPercent(edge, value.value);
      break;
    case POINT:
      mNode.paddingPx(edge, (int) value.value);
      break;
  }
}
 

@OnCreateLayout
public static Component onCrateLayout(
    ComponentContext c,
    @State int selectedPage,
    @State int firstVisibleIndex,
    @State int movingDirection) {
  final String title = (selectedPage + 1) + "/" + PAGES_COUNT;
  return Column.create(c)
      .alignItems(YogaAlign.CENTER)
      .justifyContent(YogaJustify.CENTER)
      .child(Text.create(c).textSizeDip(20).text(title))
      .child(
          Row.create(c)
              .alignSelf(YogaAlign.STRETCH)
              .justifyContent(YogaJustify.SPACE_BETWEEN)
              .child(
                  Text.create(c)
                      .paddingDip(YogaEdge.ALL, 12)
                      .textSizeDip(20)
                      .text("Prev")
                      .clickHandler(PageIndicatorsRootComponent.onPrevClick(c)))
              .child(
                  PageIndicators.create(c)
                      .size(PAGES_COUNT)
                      .selectedIndex(selectedPage)
                      .firstVisibleIndex(firstVisibleIndex)
                      .movingDirection(movingDirection))
              .child(
                  Text.create(c)
                      .paddingDip(YogaEdge.ALL, 12)
                      .textSizeDip(20)
                      .text("Next")
                      .clickHandler(PageIndicatorsRootComponent.onNextClick(c))))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c, @State List<Message> messages, @State int counter) {
  return Column.create(c)
      .child(
          Row.create(c)
              .backgroundColor(Color.LTGRAY)
              .child(
                  Text.create(c)
                      .paddingDip(YogaEdge.ALL, 10)
                      .text("INSERT")
                      .textSizeSp(20)
                      .flexGrow(1)
                      .alignSelf(YogaAlign.CENTER)
                      .testKey("INSERT")
                      .alignment(TextAlignment.CENTER)
                      .clickHandler(ExpandableElementRootComponent.onClick(c, true)))
              .child(
                  Text.create(c)
                      .paddingDip(YogaEdge.ALL, 10)
                      .text("DELETE")
                      .textSizeSp(20)
                      .flexGrow(1)
                      .alignSelf(YogaAlign.CENTER)
                      .alignment(TextAlignment.CENTER)
                      .clickHandler(ExpandableElementRootComponent.onClick(c, false))))
      .child(
          RecyclerCollectionComponent.create(c)
              .flexGrow(1)
              .disablePTR(true)
              .itemAnimator(new NotAnimatedItemAnimator())
              .section(
                  DataDiffSection.<Message>create(new SectionContext(c))
                      .data(messages)
                      .renderEventHandler(ExpandableElementRootComponent.onRender(c))
                      .build())
              .paddingDip(YogaEdge.TOP, 8))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
  return Row.create(c)
      .child(
          Text.create(c)
              .textSizeSp(20)
              .text("This component has all borders specified to the same color + width"))
      .border(
          Border.create(c).color(YogaEdge.ALL, NiceColor.BLUE).widthDip(YogaEdge.ALL, 5).build())
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @Prop List<ListRow> dataModels) {

  return RecyclerCollectionComponent.create(c)
      .disablePTR(true)
      .section(
          DataDiffSection.<ListRow>create(new SectionContext(c))
              .data(dataModels)
              .renderEventHandler(ErrorRootComponent.onRender(c))
              .build())
      .paddingDip(YogaEdge.TOP, 8)
      .build();
}
 

public float get(YogaEdge edge) {
  float defaultValue =
      (edge == YogaEdge.START || edge == YogaEdge.END ? YogaConstants.UNDEFINED : DEFAULT_VALUE);

  // Nothing is set.
  if (mEdgesToValuesIndex == ~0) {
    return defaultValue;
  }

  final byte edgeIndex = getIndex(edge.intValue());
  if (edgeIndex != UNDEFINED_INDEX) {
    return mValues[edgeIndex];
  }

  if (mHasAliasesSet) {
    final int secondTypeEdgeValue =
        edge == YogaEdge.TOP || edge == YogaEdge.BOTTOM ? VERTICAL_INTVALUE : HORIZONTAL_INTVALUE;
    final byte secondTypeEdgeIndex = getIndex(secondTypeEdgeValue);

    if (secondTypeEdgeIndex != UNDEFINED_INDEX) {
      return mValues[secondTypeEdgeIndex];

    } else if (getIndex(ALL_INTVALUE) != UNDEFINED_INDEX) {
      return mValues[getIndex(ALL_INTVALUE)];
    }
  }

  return defaultValue;
}
 

@Test
public void testVisibleEvent() {
  final TestComponent content = create(mContext).build();
  final EventHandler<VisibleEvent> visibleEventHandler = new EventHandler<>(content, 2);

  final LithoView lithoView =
      mountComponent(
          mContext,
          mLithoView,
          Column.create(mContext)
              .child(
                  Wrapper.create(mContext)
                      .delegate(content)
                      .visibleHandler(visibleEventHandler)
                      .widthPx(10)
                      .heightPx(5)
                      .marginPx(YogaEdge.TOP, 5))
              .build(),
          true,
          true,
          10,
          5);

  assertThat(content.getDispatchedEventHandlers()).doesNotContain(visibleEventHandler);

  lithoView.notifyVisibleBoundsChanged(new Rect(LEFT, 0, RIGHT, 10), true);
  assertThat(content.getDispatchedEventHandlers()).contains(visibleEventHandler);
}