[英]How to half overlap images in android constraint layout
Is there any way to place an images half is on top of another image using only constraint layout.有什么方法可以仅使用约束布局将图像的一半放置在另一个图像的顶部。 I know it can be done using relative and frame layouts but in the case of constraint layout is there anyway?
我知道可以使用相对布局和框架布局来完成,但是在约束布局的情况下,无论如何? prefer ways which do not require any hardcoding of heights/widths
更喜欢不需要任何高度/宽度硬编码的方式
the requirement will look like this要求看起来像这样
you can set layout using only constraint layout like below :您可以仅使用如下约束布局来设置布局:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@android:color/holo_orange_dark"
app:layout_constraintBottom_toTopOf="@id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<ImageView
android:id="@+id/imageView_upper"
android:layout_width="70dp"
android:layout_height="70dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/guideline"
app:layout_constraintBottom_toBottomOf="@id/guideline"
android:background="@android:color/holo_purple"/>
</android.support.constraint.ConstraintLayout>
Note: If you are using androidx then you have to use androidx.constraintlayout.widget.ConstraintLayout instead of android.support.constraint.ConstraintLayout注意:如果您使用的是 androidx,则必须使用androidx.constraintlayout.widget.ConstraintLayout而不是android.support.constraint.ConstraintLayout
Simplest way最简单的方法
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<ImageView
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#c2b6c2">
</ImageView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/floatbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_menu_camera"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="@+id/appBar"
app:layout_constraintTop_toBottomOf="@+id/appBar"
/>
</android.support.constraint.ConstraintLayout>
Check it out margin.检查它的保证金。 Put it in your ConstraintLayout.
把它放在你的 ConstraintLayout 中。
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorPrimary"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/guideline"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/colorAccent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@+id/guideline"/>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="#000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Try this试试这个
<?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">
<ImageView
android:id="@+id/my_imageView"
android:layout_width="match_parent"
android:layout_height="150dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@color/colorAccent" />
<android.support.v4.widget.Space
android:id="@+id/marginSpacer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="30dp"
app:layout_constraintBottom_toBottomOf="@+id/my_imageView"
app:layout_constraintLeft_toLeftOf="@id/my_imageView"
app:layout_constraintRight_toRightOf="@id/my_imageView" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@color/colorPrimary"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/marginSpacer" />
</android.support.constraint.ConstraintLayout>
OUTPUT输出
OR THIS或者这个
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/imageviewanchor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/subject"
android:layout_width="match_parent"
android:layout_height="250dp"
android:src="@color/colorAccent"
android:text="Thi"
android:textSize="17sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/viewB"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:clickable="true"
android:src="@color/colorPrimary"
app:layout_anchor="@+id/imageviewanchor"
app:layout_anchorGravity="bottom|center" />
</android.support.design.widget.CoordinatorLayout>
OUTPUT输出
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2"
android:orientation="vertical"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.2"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg"
android:layout_weight="1"
>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_below="@+id/laytop"
>
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/placeholder"
android:layout_centerInParent="true"
>
</ImageView>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.8"
>
</LinearLayout>
</LinearLayout>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.