首先来演示一下视频效果
从视频效果中我们可以看到,这个欢迎界面的效果还是不错的,感兴趣的可以尝试一下,比较简单,下面会给出具体代码实现。
main_activity.xml
- "1.0" encoding="utf-8"?>
- <LinearLayout 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"
- tools:context=".MainActivity"
- android:orientation="vertical"
- android:background="#1f1f1d">
-
- <RelativeLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content">
-
- <View
- android:id="@+id/first_line"
- android:layout_width="20dp"
- android:layout_height="50dp"
- android:layout_centerHorizontal="true"
- android:background="@color/white"/>
-
- <View
- android:id="@+id/second_line"
- android:layout_width="20dp"
- android:layout_height="100dp"
- android:layout_toRightOf="@+id/first_line"
- android:layout_marginLeft="8dp"
- android:background="#ff0000"/>
-
- <View
- android:id="@+id/third_line"
- android:layout_width="20dp"
- android:layout_height="250dp"
- android:layout_toRightOf="@+id/second_line"
- android:layout_marginLeft="8dp"
- android:background="@color/white"/>
-
- <View
- android:id="@+id/fourth_line"
- android:layout_width="20dp"
- android:layout_height="200dp"
- android:layout_toRightOf="@+id/third_line"
- android:layout_marginLeft="8dp"
- android:background="#ff0000"/>
-
- <View
- android:id="@+id/fifth_line"
- android:layout_width="20dp"
- android:layout_height="220dp"
- android:layout_toRightOf="@+id/fourth_line"
- android:layout_marginLeft="8dp"
- android:background="@color/teal_200"/>
-
- <View
- android:id="@+id/six_line"
- android:layout_width="20dp"
- android:layout_height="150dp"
- android:layout_toRightOf="@+id/fifth_line"
- android:layout_marginLeft="8dp"
- android:background="@color/white"/>
-
- RelativeLayout>
-
-
- <RelativeLayout
- android:layout_marginTop="50dp"
- android:layout_width="match_parent"
- android:layout_height="wrap_content">
-
- <TextView
- android:id="@+id/a"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_centerHorizontal="true"
- android:text="智能基座"
- android:textColor="@color/white"
- android:textSize="60sp"
- android:textStyle="italic"/>
- RelativeLayout>
-
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent">
-
- <RelativeLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_gravity="bottom">
-
- <TextView
- android:id="@+id/tagLine"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_centerHorizontal="true"
- android:layout_marginBottom="50dp"
- android:text="Andorid Developer"
- android:textColor="#fff"
- android:textSize="24sp" />
- RelativeLayout>
- LinearLayout>
- LinearLayout>
以上是xml文件的实现代码,总的来说还是比较简洁的,使用了LinearLayout,RelativeLayout布局方式,实现出来的静态效果如下所示

想要实现动态效果,我们需要在MainActivity.java文件中去添加相关动画的配置,代码如下
MainActivity.java
- package com.example.welcometest;
-
- import androidx.appcompat.app.AppCompatActivity;
-
- import android.content.Intent;
- import android.os.Bundle;
- import android.os.Handler;
- import android.view.View;
- import android.view.WindowManager;
- import android.view.animation.Animation;
- import android.view.animation.AnimationUtils;
- import android.widget.TextView;
-
- public class MainActivity extends AppCompatActivity {
-
- View first,second,third,forth,fifth,sixth;
- TextView a,tagline;
-
- Animation topAnimation,bottomAnimation,middleAnimation;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
- setContentView(R.layout.activity_main);
-
- topAnimation = AnimationUtils.loadAnimation(this,R.anim.top_ani);
- bottomAnimation = AnimationUtils.loadAnimation(this,R.anim.bottm_ani);
- middleAnimation = AnimationUtils.loadAnimation(this,R.anim.middle_ani);
-
-
- first = findViewById(R.id.first_line);
- second = findViewById(R.id.second_line);
- third = findViewById(R.id.third_line);
- forth = findViewById(R.id.fourth_line);
- fifth = findViewById(R.id.fifth_line);
- sixth = findViewById(R.id.six_line);
-
- a = findViewById(R.id.a);
- tagline = findViewById(R.id.tagLine);
-
- first.setAnimation(topAnimation);
- second.setAnimation(topAnimation);
- third.setAnimation(topAnimation);
- forth.setAnimation(topAnimation);
- fifth.setAnimation(topAnimation);
- sixth.setAnimation(topAnimation);
-
- a.setAnimation(middleAnimation);
- tagline.setAnimation(bottomAnimation);
-
- //跳转时间
- new Handler().postDelayed(new Runnable() {
- @Override
- public void run() {
- Intent intent = new Intent(MainActivity.this,MainActivity2.class);
- startActivity(intent);
- finish();
- }
- },3000);
- }
- }
我们发现,MainActivity,java中有相关的配置文件,配置文件在这里给出
1、首先第一步,我们需要在res目录下新建资源文件夹anim

2、然后我们在这个目录下新建三个anim资源文件,用来配置动画效果
top_ani.xml
- "1.0" encoding="utf-8"?>
- <set xmlns:android="http://schemas.android.com/apk/res/android">
-
- <translate
- android:duration = "1500"
- android:fromYDelta="-500%"
- android:fromXDelta="0%"/>
-
- <alpha
- android:fromAlpha="0.1"
- android:toAlpha="1.0"
- android:duration = "1500"
- />
- set>
bottom_ani.xml
- "1.0" encoding="utf-8"?>
- <set xmlns:android="http://schemas.android.com/apk/res/android">
- <translate
- android:duration = "1500"
- android:fromYDelta="100%"
- android:fromXDelta="0%"/>
-
- <alpha
- android:fromAlpha="0.1"
- android:toAlpha="1.0"
- android:duration = "1500"
- />
- set>
middle_ani.xml
- "1.0" encoding="utf-8"?>
- <set xmlns:android="http://schemas.android.com/apk/res/android">
- <translate
- android:duration = "1500"
- android:fromYDelta="0%"
- android:fromXDelta="-200%"/>
-
- <alpha
- android:fromAlpha="0.1"
- android:toAlpha="1.0"
- android:duration = "1500"
- />
- set>
以上三个xml资源文件就是MainActivity.java中需要的族源文件。