当前位置：文江博客话题详情

相对布局中的基线是什么？

发布于 2024-11-16 21:06:34 字数 52 浏览 0 评论 0原文

在相对布局的上下文中使用“基线”时指什么？可能是简单的问题，但文档和谷歌没有提供任何提示。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

说谎友 2024-11-23 21:06:34

术语基线来自排版。它是文本中看不见的行字母。

例如，假设您将两个 TextView 元素并排放置。您给第二个 TextView 一个很大的填充（比如 20dp）。如果将 layout_alignBaseline 添加到第二个元素，文本将“向上移动”以与第一个元素的基线对齐。两个元素中的文本看起来就像写在同一条不可见的线上。

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
  <TextView
      android:id="@+id/text1"
      android:text="aatlg"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      />
  <TextView
      android:text="joof"
      android:background="#00ff00"
      android:padding="20dp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_toRightOf="@id/text1"
      android:layout_alignBaseline="@id/text1"
      />
</RelativeLayout>

The term baseline comes from typography. It's the invisible line letters in text sit on.

For example, imagine you put two TextView elements next to each other. You give the second TextView a big padding (say 20dp). If you add layout_alignBaseline to the second element, the text will "scoot up" to align with the baseline of the first element. The text from both elements will appear as if they were written on the same invisible line.

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
  <TextView
      android:id="@+id/text1"
      android:text="aatlg"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      />
  <TextView
      android:text="joof"
      android:background="#00ff00"
      android:padding="20dp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_toRightOf="@id/text1"
      android:layout_alignBaseline="@id/text1"
      />
</RelativeLayout>

回复收藏 0 原文

无悔心 2024-11-23 21:06:34

下面是一个可视化的解释，可能会澄清 Cristian 的答案：

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <TextView
        android:id="@+id/text1"
        android:text="Lorem"
        android:background="@android:color/holo_blue_light"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Ipsum"
        android:background="@android:color/holo_orange_light"
        android:padding="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/text1"
        android:layout_alignBaseline="@id/text1" />
</RelativeLayout>

此代码如下所示：

现在，如果我删除 android:layout_alignBaseline 属性，则看起来相同的布局像这样：

观察到橙色视图的高度受到影响（在第一种情况下，填充未应用于视图的顶部）。

Here is a visual explanation that might clarify Cristian's answer:

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <TextView
        android:id="@+id/text1"
        android:text="Lorem"
        android:background="@android:color/holo_blue_light"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Ipsum"
        android:background="@android:color/holo_orange_light"
        android:padding="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/text1"
        android:layout_alignBaseline="@id/text1" />
</RelativeLayout>

This code will look like this:

Now, if I remove the android:layout_alignBaseline attribute, the same layout looks like this:

It's interesting to observe that there is an impact on the orange view's height (in the first case the padding is not applied to the top of the view).

回复收藏 0 原文

~没有更多了~