如图,引导开始,球从上落下,同时淡入文字,然后文字开始轮播,最后一页时停止,点击进入首页。
在来看看效果图。
重力球先不讲,主要欢迎轮播简单实现
首先新建一个类 TextTranslationXGuideView,用于动画展示
文本是类似的,最后会有个图片箭头动画,布局很简单,就是一个 TextView 跟 ImageView,直接写 xml 布局里方便了
所以 TextTranslationXGuideView 直接继承 FrameLayout,然后动态添加布局,控制动画
val root = LayoutInflater.from(context) .inflate(R.layout.login_layout_text_translation_x_guide, this, false) root.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT) addView(root) mBinding = LoginLayoutTextTranslationXGuideBinding.bind(root)
login_layout_text_translation_x_guide
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" tools:background="@color/white" tools:layout_marginStart="@dimen/dp_24"> <TextView android:id="@+id/tv_content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:fontFamily="@font/misans_bold" android:lineSpacingExtra="@dimen/dp_20" android:textColor="@color/bl_black" android:textSize="@dimen/sp_36" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" tools:text="欢迎xxx\n111" /> <ImageView android:id="@+id/iv_guide1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/dp_30" android:src="@drawable/login_guide_text_right_black" android:visibility="gone" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/tv_content" tools:visibility="visible" /> <ImageView android:id="@+id/iv_guide2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/login_guide_text_right_end" android:visibility="gone" app:layout_constraintBottom_toBottomOf="@+id/iv_guide1" app:layout_constraintStart_toEndOf="@+id/iv_guide1" app:layout_constraintTop_toTopOf="@+id/iv_guide1" app:tint="@color/c_f4f4f4" tools:visibility="visible" /> </androidx.constraintlayout.widget.ConstraintLayout>
文字颜色换行等通过 span 设置,所以需要一个类去配置
data class TextTranslationXGuideBean( val content: String, //内容 val bright: String?, //高亮文本 val brightColor: Int = R.color.bl_black //高亮字体颜色 )
轮播配置成动态的,所以这里使用一个集合去存储
private val guideList = mutableListOf<TextTranslationXGuideBean>()
/** * 添加单个引导文本 * @param content 内容 * @param bright 高亮文本 * @param brightColor 高亮字体颜色 * */ fun addTextGuide( content: String, bright: String? = null, brightColor: Int? = null