如何使用CoordinatorLayout的keyline LayoutParams？求文档解读及示例

Great question! Let's dive into CoordinatorLayout's keyline LayoutParams—they're super useful for creating consistent vertical alignment across your UI, and once you get the hang of how they work, they'll save you a lot of manual margin calculations.

First, let's clarify what keylines are: they're horizontal reference lines defined by the parent CoordinatorLayout. When you assign a keyline index to a child view, that view aligns itself relative to one of these pre-defined lines, making it easy to maintain consistent vertical spacing across different screen sizes.

How Keylines Work: Core Mechanics #

Before a child can use keyline alignment, the parent CoordinatorLayout needs to define the keyline set:

• keylineCount: The number of horizontal keylines to create (must be ≥1). These lines are distributed across the CoordinatorLayout's height based on the keylineGravity setting.
• keylineGravity: Controls how keylines are positioned. Common values include:
  • top: Keylines start at the top of the layout and are evenly spaced down to the bottom. For example, keylineCount="4" creates lines at 0%, 33%, 66%, and 100% of the layout height.
  • bottom: Keylines start at the bottom and are evenly spaced upward.
  • center: Keylines are centered around the layout's vertical midpoint, spreading upward and downward.
  • You can also add an offset (e.g., top|offset:16dp) to shift all keylines by a fixed distance.

Once the parent has its keylines set, child views use two attributes to align:

• keyline: The index of the keyline to align with (starts at 0, max index is keylineCount - 1).
• keylineAlign: Defines which part of the child view aligns with the keyline. Options are:
  • top: Child's top edge matches the keyline.
  • center: Child's vertical center matches the keyline.
  • bottom: Child's bottom edge matches the keyline.

Practical Example: XML Layout #

Let's put this into action with a full XML example. We'll create a CoordinatorLayout with 4 keylines (top-aligned) and three child views aligned to different keylines:

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:keylineCount="4"
    app:keylineGravity="top">

    <!-- Align top edge to keyline 0 (very top of the layout) -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Top-aligned to keyline 0"
        android:padding="8dp"
        android:background="#f0f0f0"
        app:keyline="0"
        app:keylineAlign="top"/>

    <!-- Align vertical center to keyline 1 (33% down from top) -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Centered on keyline 1"
        app:keyline="1"
        app:keylineAlign="center"/>

    <!-- Align bottom edge to keyline 3 (bottom of the layout) -->
    <ImageView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/ic_launcher_foreground"
        app:keyline="3"
        app:keylineAlign="bottom"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

What This Does: #

• The CoordinatorLayout splits its height into 3 equal segments (since keylineCount="4" creates 4 lines), placing keyline 0 at the top, keyline 1 at 33% height, keyline 2 at 66% height, and keyline 3 at the bottom.
• The TextView sticks to the very top (keyline 0).
• The Button sits vertically centered at the 33% mark (keyline 1).
• The ImageView's bottom edge touches the layout's bottom (keyline 3).

Setting Keyline Params in Code #

If you need to adjust alignment dynamically, you can set these params in Kotlin/Java:

Kotlin: #

val textView = findViewById<TextView>(R.id.my_text_view)
val params = CoordinatorLayout.LayoutParams(
    ViewGroup.LayoutParams.WRAP_CONTENT,
    ViewGroup.LayoutParams.WRAP_CONTENT
).apply {
    // Align to keyline 2 (66% down from top)
    keyline = 2
    // Align child's bottom edge to the keyline
    keylineAlign = CoordinatorLayout.LayoutParams.KEYLINE_ALIGN_BOTTOM
}
textView.layoutParams = params

Java: #

TextView textView = findViewById(R.id.my_text_view);
CoordinatorLayout.LayoutParams params = new CoordinatorLayout.LayoutParams(
    ViewGroup.LayoutParams.WRAP_CONTENT,
    ViewGroup.LayoutParams.WRAP_CONTENT
);
params.setKeyline(2);
params.setKeylineAlign(CoordinatorLayout.LayoutParams.KEYLINE_ALIGN_BOTTOM);
textView.setLayoutParams(params);

Key Notes to Remember #

• Keyline alignment only affects the vertical position of child views. For horizontal positioning, use standard attributes like layout_gravity or layout_margin.
• If you specify a keyline index greater than keylineCount - 1, the system will ignore it (or clamp it to the valid range, depending on the version).
• Keylines automatically adjust when the CoordinatorLayout's height changes (e.g., on screen rotation), so your UI stays consistent across contexts.

内容的提问来源于stack exchange，提问作者Nilesh Rathore