Android开发，App启动过渡页/欢迎页/开屏页

这种布局常用于App首次启动时的过渡页面，给用户一个品牌印象的同时，也提供了跳过等待的选项

1. 整体结构

使用RelativeLayout作为根布局，包含两个主要组件：

1. 倒计时跳过按钮

<androidx.cardview.widget.CardView>
    <!-- 右上角的倒计时/跳过按钮 -->
    <TextView
        android:text="3s | 跳过"
        ... />
</androidx.cardview.widget.CardView>

特点：

• 使用CardView实现圆角效果
• 位于右上角（layout_alignParentRight=“true”）
• 设置margin为20dp
• 背景色使用my_light_primary
• 圆角半径25dp
• 无阴影（cardElevation=“0dp”）

2. Logo展示

<androidx.cardview.widget.CardView>
    <!-- 中央Logo图片 -->
    <ImageView
        android:src="@mipmap/img_logo"
        ... />
</androidx.cardview.widget.CardView>

特点：

• 使用CardView实现圆形效果
• 位于屏幕中央（layout_centerInParent=“true”）
• 固定尺寸110dp x 110dp
• 圆形效果（cardCornerRadius=“55dp”）
• 无阴影（cardElevation=“0dp”）

2. 布局特点

1. 白色背景（android:background=“@color/white”）
2. 使用CardView实现圆角/圆形效果
3. 简洁的两个元素构成
4. 采用RelativeLayout实现元素定位

3. 使用场景

这是一个典型的App启动页面布局，包含：

• 品牌Logo展示
• 倒计时跳过功能
• 简洁大方的设计风格

4. 代码实现过程

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@color/white">


    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_margin="20dp"
        android:backgroundTint="@color/my_light_primary"
        app:cardCornerRadius="25dp"
        app:cardElevation="0dp">

        <TextView
            android:id="@+id/tv_countdown"
            android:layout_width="88dp"
            android:layout_height="44dp"
            android:gravity="center"
            android:text="3s | 跳过"
            android:textColor="@color/white"
            android:textSize="16sp" />

    </androidx.cardview.widget.CardView>


    <androidx.cardview.widget.CardView
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_centerInParent="true"
        app:cardCornerRadius="55dp"
        app:cardElevation="0dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@mipmap/img_logo" />


    </androidx.cardview.widget.CardView>


</RelativeLayout>

5. 效果图