Я хотел бы знать, является ли мой подход к созданию этого интерфейса неправильным

Question

Я хотел бы создать пользовательский интерфейс, как показано на этом рисунке. Мой подход предполагает использование нескольких видов карт. Я не уверен, что это правильный путь для этого. Этот метод кажется немного трудоемким и повторяющимся, во-вторых, я не уверен, что это вызовет какие-либо проблемы в будущем, такие как проблемы с памятью и т. Д. Для опытных разработчиков, пожалуйста, просветите меня.

<?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="fill_parent"
    android:layout_height="wrap_content">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Controller.RegisterActivity">


        <androidx.appcompat.widget.Toolbar
            android:id="@+id/messageToolBar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="?attr/actionBarTheme"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">


            <ImageView
                android:id="@+id/backArrow"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_gravity="left"
                android:background="@drawable/ic_arrow_back_black_24dp"
                tools:layout_editor_absoluteX="16dp"
                tools:layout_editor_absoluteY="15dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="30dp"
                android:textSize="16sp"
                android:text="Profile"
                android:textColor="#424242" />


        </androidx.appcompat.widget.Toolbar>


        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/userInfoConstraint"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            app:layout_constraintDimensionRatio="6:4"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/messageToolBar">

            <androidx.cardview.widget.CardView
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <de.hdodenhof.circleimageview.CircleImageView
                        android:id="@+id/profileImageView"
                        android:layout_width="90dp"
                        android:layout_height="90dp"
                        android:layout_marginTop="36dp"
                        app:civ_border_color="#FFFFFF"
                        app:civ_border_width="2dp"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="0.498"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <TextView
                        android:id="@+id/nameTv"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="4dp"
                        android:text="Name"
                        android:textColor="#424242"
                        android:textSize="@dimen/album_title"
                        app:layout_constraintEnd_toEndOf="@+id/profileImageView"
                        app:layout_constraintStart_toStartOf="@+id/profileImageView"
                        app:layout_constraintTop_toBottomOf="@+id/profileImageView" />

                    <TextView
                        android:id="@+id/textView4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="4dp"
                        android:text="Yale"
                        android:textSize="@dimen/songs_count"
                        app:layout_constraintEnd_toEndOf="@+id/nameTv"
                        app:layout_constraintStart_toStartOf="@+id/nameTv"
                        app:layout_constraintTop_toBottomOf="@+id/nameTv" />
                </androidx.constraintlayout.widget.ConstraintLayout>
            </androidx.cardview.widget.CardView>
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraintLayout"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="10dp"
            app:layout_constraintDimensionRatio="4:1"
            app:layout_constraintEnd_toEndOf="@+id/userInfoConstraint"
            app:layout_constraintStart_toStartOf="@+id/userInfoConstraint"
            app:layout_constraintTop_toBottomOf="@+id/userInfoConstraint">

            <androidx.cardview.widget.CardView
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <TextView
                        android:id="@+id/textView6"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="16dp"
                        android:text="Empl ID"
                        android:textColor="#424242"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="0.051"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <TextView
                        android:id="@+id/textView7"
                        android:layout_width="64dp"
                        android:layout_height="16dp"
                        android:layout_marginTop="10dp"
                        android:text="2335795"
                        app:layout_constraintEnd_toEndOf="@+id/textView6"
                        app:layout_constraintHorizontal_bias="0.0"
                        app:layout_constraintStart_toStartOf="@+id/textView6"
                        app:layout_constraintTop_toBottomOf="@+id/textView6" />
                </androidx.constraintlayout.widget.ConstraintLayout>
            </androidx.cardview.widget.CardView>
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="10dp"
            app:layout_constraintDimensionRatio="6:4"
            app:layout_constraintEnd_toEndOf="@+id/constraintLayout"
            app:layout_constraintStart_toStartOf="@+id/constraintLayout"
            app:layout_constraintTop_toBottomOf="@+id/constraintLayout">

            <androidx.cardview.widget.CardView
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <TextView
                        android:id="@+id/textView8"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="16dp"
                        android:text="Contact"
                        android:textColor="#424242"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="0.05"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <TextView
                        android:id="@+id/emailTv"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        app:layout_constraintEnd_toStartOf="@+id/imageView2"
                        app:layout_constraintHorizontal_bias="0.0"
                        app:layout_constraintStart_toStartOf="@+id/textView8"
                        app:layout_constraintTop_toBottomOf="@+id/textView8" />

                    <ImageView
                        android:id="@+id/imageView2"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_marginEnd="24dp"
                        app:layout_constraintBottom_toBottomOf="@+id/emailTv"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintTop_toTopOf="@+id/emailTv"
                        app:layout_constraintVertical_bias="0.0"
                        app:srcCompat="@drawable/pencil" />

                    <TextView
                        android:id="@+id/textView3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="12dp"
                        android:text="333-333-1121"
                        app:layout_constraintEnd_toStartOf="@+id/imageView3"
                        app:layout_constraintHorizontal_bias="0.0"
                        app:layout_constraintStart_toStartOf="@+id/emailTv"
                        app:layout_constraintTop_toBottomOf="@+id/emailTv" />

                    <ImageView
                        android:id="@+id/imageView3"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_marginEnd="24dp"
                        app:layout_constraintBottom_toBottomOf="@+id/textView3"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintTop_toTopOf="@+id/textView3"
                        app:layout_constraintVertical_bias="0.0"
                        app:srcCompat="@drawable/pencil" />


                </androidx.constraintlayout.widget.ConstraintLayout>
            </androidx.cardview.widget.CardView>
        </androidx.constraintlayout.widget.ConstraintLayout>


    </androidx.constraintlayout.widget.ConstraintLayout>


</ScrollView>

Answer 1

Вы можете просто установить фон для вашего ConstraintLayout, чтобы вам не нужно было создавать CardView в ConstraintLayout

Если вы хотите, чтобы тень использовалась в ConstraintLayout, чтобы показать тень в ConstraintLayout, вы должны просто добавить в нее фон. установите #FFFFFF и используйте это

    android:elevation="4dp"

Или вы можете создать собственный фон, чтобы иметь круглые углы и пользовательские цвета фона

Надеюсь, это поможет