复杂背景图,如何布局
在项目经常会遇到,产品经理给定了一张背景图片,需要在背景图指定的位置放入适合的控件,进行展示。今天说下如何使用ConstraintLayout实现布局,ConstraintLayout的基础大家自己搜索下。下面我们先展示一张图片。
给定了这样的一幅图片,你会如何进行布局呢?下面我们开始布局吧。
从图片上我们可以看出,整个图片可以分6部分,那么每部分的大小如何确定呢?我们可以用ps软件或者其它绘图工具,确认每部分的高度,所有部分的高度加起来就是整张图片的高度了。在ConstraintLayout中constraintVertical_weight属性实现了和LinearLayout中设置layout_weight相同的效果(占比权重)。通过constraintVertical_weight,我们实现了将整个布局分隔从6部分。以下是具体的分隔布局
<?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" android:background="@color/colorActivityBackground" xmlns:tools="http://schemas.android.com/tools" tools:ignore="MissingConstraints"> <LinearLayout android:id="@+id/ll3" android:layout_width="0dp" android:layout_height="0dp" android:gravity="center_vertical" android:orientation="horizontal" app:layout_constraintBottom_toTopOf="@id/ll4" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/ll2" app:layout_constraintVertical_weight="740"> </LinearLayout> <LinearLayout android:id="@+id/llback" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@mipmap/beehive" android:orientation="horizontal"></LinearLayout> <LinearLayout android:id="@+id/ll1" android:layout_width="0dp" android:layout_height="0dp" android:orientation="horizontal" app:layout_constraintBottom_toTopOf="@id/ll2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_weight="436"></LinearLayout> <LinearLayout android:id="@+id/ll2" android:layout_width="0dp" android:layout_height="0dp" android:orientation="horizontal" app:layout_constraintBottom_toTopOf="@id/ll3" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/ll1" app:layout_constraintVertical_weight="140"> </LinearLayout> <LinearLayout android:id="@+id/ll4" android:layout_width="0dp" android:layout_height="0dp" android:orientation="horizontal" app:layout_constraintBottom_toTopOf="@id/ll5" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/ll3" app:layout_constraintVertical_weight="180"> </LinearLayout> <LinearLayout android:id="@+id/ll5" android:layout_width="0dp" android:layout_height="0dp" android:orientation="vertical" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/ll4" app:layout_constraintVertical_weight="424"> </LinearLayout> </android.support.constraint.ConstraintLayout>
在布局中,我们把第三部分放置在最前面,因为第三部的部分需要背景图片遮挡住部分,所以需要放置在背景图之前进行布局。整个布局框架基本完成了。以下是最终的布局。图片之类的需要大家自己脑补了
<?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" android:background="@color/colorActivityBackground" xmlns:tools="http://schemas.android.com/tools" tools:ignore="MissingConstraints"> <LinearLayout android:id="@+id/ll3" android:layout_width="0dp" android:layout_height="0dp" android:gravity="center_vertical" android:orientation="horizontal" app:layout_constraintBottom_toTopOf="@id/ll4" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/ll2" app:layout_constraintVertical_weight="740"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="154"> </LinearLayout> <!--adnroid 4.4 RecyclerView need fix size if item size lager. otherwise,it's will culculate the size with all data!--> <com.zzy.jackpot.jackpotRecyclerView android:id="@+id/recyler1" android:layout_width="match_parent" android:layout_height="match_parent"></com.zzy.jackpot.jackpotRecyclerView> <com.zzy.jackpot.jackpotRecyclerView android:id="@+id/recyler2" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="16dp" android:layout_marginRight="16dp"></com.zzy.jackpot.jackpotRecyclerView> <com.zzy.jackpot.jackpotRecyclerView android:id="@+id/recyler3" android:layout_width="match_parent" android:layout_height="match_parent"></com.zzy.jackpot.jackpotRecyclerView> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="160"></LinearLayout> </LinearLayout> <LinearLayout android:id="@+id/llback" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@mipmap/beehive" android:orientation="horizontal"></LinearLayout> <LinearLayout android:id="@+id/ll1" android:layout_width="0dp" android:layout_height="0dp" android:orientation="horizontal" app:layout_constraintBottom_toTopOf="@id/ll2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_weight="436"></LinearLayout> <LinearLayout android:id="@+id/ll2" android:layout_width="0dp" android:layout_height="0dp" android:orientation="horizontal" app:layout_constraintBottom_toTopOf="@id/ll3" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/ll1" app:layout_constraintVertical_weight="140"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="154"></LinearLayout> <com.sunfusheng.marqueeview.MarqueeView android:id="@+id/tvScroll" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="772" app:mvAnimDuration="2000" app:mvDirection="bottom_to_top" app:mvInterval="5000" app:mvSingleLine="false" app:mvGravity="center" app:mvTextColor="@color/black" app:mvTextSize="16dp" /> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="154"></LinearLayout> </LinearLayout> <LinearLayout android:id="@+id/ll4" android:layout_width="0dp" android:layout_height="0dp" android:orientation="horizontal" app:layout_constraintBottom_toTopOf="@id/ll5" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/ll3" app:layout_constraintVertical_weight="180"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="381"></LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="384" android:orientation="vertical"> <TextView android:id="@+id/textView5" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:text="You have" android:textColor="@color/white" android:textSize="16dp" android:textStyle="bold" /> <TextView android:id="@+id/tvSpinNum" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:textSize="20dp" android:text="100 Spins" android:textColor="@color/white" android:textStyle="bold" /> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="381"></LinearLayout> </LinearLayout> <LinearLayout android:id="@+id/ll5" android:layout_width="0dp" android:layout_height="0dp" android:orientation="vertical" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/ll4" app:layout_constraintVertical_weight="424"> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="180" android:gravity="center" android:orientation="horizontal"> <ImageView android:id="@+id/btnPlay" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitCenter" android:src="@mipmap/buttom_play" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_marginBottom="10dp" android:layout_weight="152" android:gravity="center" android:orientation="horizontal"> <ImageView android:id="@+id/btnPrizes" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="28dp" android:src="@mipmap/buttom_prizes" /> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1"></LinearLayout> <ImageView android:id="@+id/btnGetSpin" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="28dp" android:src="@mipmap/buttom_get_spin" /> </LinearLayout> </LinearLayout> </android.support.constraint.ConstraintLayout>