使用ConstraintLayout实现复杂布局(二)

布局效果如下:
在这里插入图片描述

该布局主要复杂的地方是“活动规则”、“每邀请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

©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页