Android - 将视图中心对齐到其他视图的底部
Android - Align view center to bottom of other view
图片胜于长篇大论:
我想将红色部分的中心与黑色部分的中间垂直对齐。我没有容器约束(RelativeLayout、FrameLayout、LinearLayout oO)。
我尝试了一个高度为 0dp 的视图,与黑色视图的底部对齐,并与红色视图的基线对齐,但它不起作用...
感谢您的帮助!
在相对布局中尝试 2 个视图。将 1 放在其他下方(使用下方 属性)。
也使它们都 layout_centerHorizontal=true.
你可以对底部进行负填充以将其提升到上方。
祝你好运:)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="25dp"
android:background="#EEFFFFFF"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true" />
这里我用了两种不同的View
作为黑色和红色。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@android:color/black"
android:id="@+id/blackContainer" />
<View
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@android:color/holo_red_light"
android:layout_below="@+id/blackContainer"
android:layout_marginTop="-50dp"/>
</RelativeLayout>
诀窍是我将红色容器放在黑色容器下方,并将其 marginTop 设置为其高度的负一半。所以红色容器的中心在黑色容器的底部。
尝试反其道而行之。首先锚定较小的视图,然后相应地放置另一个视图。像这样:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<View
android:layout_width="100dp"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:layout_alignBottom="@+id/anchor"
android:background="@color/black" />
<View
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:background="@color/light_grey"/>
<View
android:id="@+id/anchor"
android:layout_centerInParent="true"
android:layout_width="0dp"
android:layout_height="0dp"/>
</RelativeLayout>
最后,我用更程序化的方式解决了这个问题,因为Views的大小是不固定的。
这里是解决方案:
布局:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<View
android:id="@+id/black"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"/>
<View
android:id="@+id/red"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
</RelativeLayout>
代码:
red.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
red.getViewTreeObserver().removeOnGlobalLayoutListener(this);
LayoutParams params = new LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT
);
params.setMargins(0, 0, 0, red.getHeight()/2);
black.setLayoutParams(params);
}
});
感谢您的帮助!它帮助我找到了这个!
Android 现在支持带有 CoordinatorLayout
:
的布局锚点
<android.support.design.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">
<View android:id="@+id/black_view"
android:layout_width="match_parent" android:layout_height="@dimen/black_height"/>
<View android:id="@+id/red_view"
android:layout_width="@dimen/red_width" android:layout_height="@dimen/red_height"
app:layout_anchor="@id/black_view" app:layout_anchorGravity="bottom|center"/>
</android.support.design.widget.CoordinatorLayout>
如果您在 Java 代码中更改视图的大小,锚点也会保留。
这也可以使用 ConstraintLayout
。类似于如何将视图的 start/end 与父视图对齐使其在父视图中居中,我们可以使用该概念沿视图的边缘居中。
这个布局的关键是我们底部视图的两个约束:
app:layout_constraintTop_toBottomOf="@id/top_view"
app:layout_constraintBottom_toBottomOf="@id/top_view"
通过将下视图的 top/bottom 约束到上视图的底部,布局将调整为沿底部居中。这是蓝图的完整代码和屏幕截图:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">
<View
android:id="@+id/top_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/green"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/bottom_view"
android:layout_width="58dp"
android:layout_height="58dp"
android:background="@color/red"
app:layout_constraintBottom_toBottomOf="@id/top_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/top_view" />
</android.support.constraint.ConstraintLayout>
图片胜于长篇大论:
我想将红色部分的中心与黑色部分的中间垂直对齐。我没有容器约束(RelativeLayout、FrameLayout、LinearLayout oO)。
我尝试了一个高度为 0dp 的视图,与黑色视图的底部对齐,并与红色视图的基线对齐,但它不起作用...
感谢您的帮助!
在相对布局中尝试 2 个视图。将 1 放在其他下方(使用下方 属性)。 也使它们都 layout_centerHorizontal=true.
你可以对底部进行负填充以将其提升到上方。
祝你好运:)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="25dp"
android:background="#EEFFFFFF"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true" />
这里我用了两种不同的View
作为黑色和红色。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@android:color/black"
android:id="@+id/blackContainer" />
<View
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@android:color/holo_red_light"
android:layout_below="@+id/blackContainer"
android:layout_marginTop="-50dp"/>
</RelativeLayout>
诀窍是我将红色容器放在黑色容器下方,并将其 marginTop 设置为其高度的负一半。所以红色容器的中心在黑色容器的底部。
尝试反其道而行之。首先锚定较小的视图,然后相应地放置另一个视图。像这样:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<View
android:layout_width="100dp"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:layout_alignBottom="@+id/anchor"
android:background="@color/black" />
<View
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:background="@color/light_grey"/>
<View
android:id="@+id/anchor"
android:layout_centerInParent="true"
android:layout_width="0dp"
android:layout_height="0dp"/>
</RelativeLayout>
最后,我用更程序化的方式解决了这个问题,因为Views的大小是不固定的。
这里是解决方案:
布局:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<View
android:id="@+id/black"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"/>
<View
android:id="@+id/red"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
</RelativeLayout>
代码:
red.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
red.getViewTreeObserver().removeOnGlobalLayoutListener(this);
LayoutParams params = new LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT
);
params.setMargins(0, 0, 0, red.getHeight()/2);
black.setLayoutParams(params);
}
});
感谢您的帮助!它帮助我找到了这个!
Android 现在支持带有 CoordinatorLayout
:
<android.support.design.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">
<View android:id="@+id/black_view"
android:layout_width="match_parent" android:layout_height="@dimen/black_height"/>
<View android:id="@+id/red_view"
android:layout_width="@dimen/red_width" android:layout_height="@dimen/red_height"
app:layout_anchor="@id/black_view" app:layout_anchorGravity="bottom|center"/>
</android.support.design.widget.CoordinatorLayout>
如果您在 Java 代码中更改视图的大小,锚点也会保留。
这也可以使用 ConstraintLayout
。类似于如何将视图的 start/end 与父视图对齐使其在父视图中居中,我们可以使用该概念沿视图的边缘居中。
这个布局的关键是我们底部视图的两个约束:
app:layout_constraintTop_toBottomOf="@id/top_view"
app:layout_constraintBottom_toBottomOf="@id/top_view"
通过将下视图的 top/bottom 约束到上视图的底部,布局将调整为沿底部居中。这是蓝图的完整代码和屏幕截图:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">
<View
android:id="@+id/top_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/green"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/bottom_view"
android:layout_width="58dp"
android:layout_height="58dp"
android:background="@color/red"
app:layout_constraintBottom_toBottomOf="@id/top_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/top_view" />
</android.support.constraint.ConstraintLayout>