布局效果如下:
该布局主要复杂的地方是“活动规则”、“每邀请1名新用户您可以获得18.8元”、“好友注册后,ta可得7天会员体验”、“立即邀请”、“我的邀请战绩”、“战绩列表”(当前暂无记录)等内容是灵活可变的,需要保障在不同手机上不失真。由于其形状的不固定,所以实现起来有一定的难度。
涉及的依赖
implementation : "com.google.android.material:material:1.2.1"
implementation : "androidx.constraintlayout:constraintlayout:2.0.1"
布局代码如下:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@color/color_F9582A">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.da.library.widget.CommTitle
android:id="@+id/invite_friend_title"
android:layout_width="match_parent"
android:layout_height="45dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/invite_friend_poster"
android:adjustViewBounds="true"
app:layout_constraintTop_toBottomOf="@+id/invite_friend_title"/>
<ImageView
android:id="@+id/invite_friend_guide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/invite_friend_activity_guide"
android:layout_marginEnd="@dimen/dp_20"
app:layout_constraintTop_toBottomOf="@+id/invite_friend_title"
app:layout_constraintEnd_toEndOf="parent"/>
<ImageView
android:id="@+id/invite_friend_now"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/invite_friend_now"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
app:layout_constraintVertical_bias="0.8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="每邀请1名新用户您可以获得"
android:textColor="@color/color_EF5B40"
android:textSize="@dimen/sp16"
android:textStyle="bold"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginVertical="@dimen/dp_10">
<TextView
android:id="@+id/invite_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="1~9.9"
android:textColor="@color/color_EF5B40"
android:textSize="56sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="元"
android:textColor="@color/color_EF5B40"
android:textSize="@dimen/sp16"
android:textStyle="bold"/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="好友注册后,Ta可得7天会员体验"
android:textColor="@color/color_EF5B40"
android:textSize="@dimen/sp16"
android:textStyle="bold"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/color_4DFFFFFF"
android:layout_marginTop="@dimen/dp_20"
android:layout_marginHorizontal="@dimen/dp_8"
android:paddingBottom="@dimen/dp_20"
android:orientation="vertical"
android:gravity="center_horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_20"
android:gravity="center_vertical"
android:background="@mipmap/invate_title_bg">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginTop="@dimen/dp_5"
android:gravity="center">
<TextView
android:id="@+id/invite_friend_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/color_EF5B40"
android:textStyle="bold"
android:textSize="@dimen/sp30"
tools:text="234"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="共邀请好友"
android:textColor="@color/color_EF5B40"
android:layout_marginTop="@dimen/dp_5"
android:textSize="@dimen/sp12"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginTop="@dimen/dp_5"
android:gravity="center">
<TextView
android:id="@+id/invite_friend_bounty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/color_EF5B40"
android:textStyle="bold"
android:textSize="@dimen/sp30"
tools:text="¥99.76"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="获得奖励"
android:layout_marginTop="@dimen/dp_5"
android:textColor="@color/color_EF5B40"
android:textSize="@dimen/sp12"/>
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="@dimen/dp_1"
android:layout_marginHorizontal="@dimen/dp_10"
android:layout_marginVertical="@dimen/dp_20"
android:background="@color/color_99FFFFFF"/>
<LinearLayout
android:id="@+id/invite_friend_root"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.wd.daquan.view.BaseRecycleView
android:id="@+id/invite_result_rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/dp_10"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
1、Android 对RecycleView设置空视图:https://blog.csdn.net/Mr_Tony/article/details/107837447
2、ConstraintLayout布局介绍.md:https://www.cnblogs.com/prophet-it/p/7815470.html