> 文章列表 > 实现开机动画和自定义Toolbar的高级写法

实现开机动画和自定义Toolbar的高级写法

实现开机动画和自定义Toolbar的高级写法

需求是自定义一个Toolbar和全屏展示一个第一次激活App的开机动画

1自定义Toolbar的使用

实现开机动画和自定义Toolbar的高级写法

1仍然是先将工程的theme.xml中设置成NoActionBar

<resources xmlns:tools="http://schemas.android.com/tools"><!-- Base application theme. --><style name="Theme.Animination" parent="Theme.MaterialComponents.DayNight.NoActionBar"><!-- Primary brand color. --><item name="colorPrimary">@color/purple_500</item><item name="colorPrimaryVariant">@color/purple_700</item><item name="colorOnPrimary">@color/white</item><!-- Secondary brand color. --><item name="colorSecondary">@color/teal_200</item><item name="colorSecondaryVariant">@color/teal_700</item><item name="colorOnSecondary">@color/black</item><!-- Status bar color. --><item name="android:statusBarColor">?attr/colorPrimaryVariant</item><!-- Customize your theme here. --></style></resources>

2在layout目录下自定义Toolbar布局,便于其他布局直接引用

toolbar_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/toolbar"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="#E66161"></androidx.appcompat.widget.Toolbar>

3在主布局中加入自定义的toolbar

<?xml version="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"><include layout="@layout/toolbar_layout"/><Buttonandroid:id="@+id/btn1"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="弹出dialog"/><Buttonandroid:id="@+id/btn2"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="弹出自定义动画"/></LinearLayout>

4在menu目录下设置toolbar上面的小控件

main,xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"><itemandroid:id="@+id/backup"android:icon="@drawable/baseline_filter_drama_24"android:title="Backup"app:showAsAction="always"/><itemandroid:id="@+id/delete"android:icon="@drawable/baseline_delete_24"android:title="Delete"app:showAsAction="ifRoom"/><itemandroid:id="@+id/setting"android:icon="@drawable/baseline_settings_24"android:title="Settings"app:showAsAction="never"/></menu>

5通过实现接口的方式自定义ToolBarManager接口,并引入当前控件的menu

package com.njupt.animination.utilimport android.view.MenuItem
import android.widget.Toast
import androidx.appcompat.widget.Toolbar
import com.njupt.animination.Rinterface MyToolbarManager {val toolbar:Toolbarfun initMainToolBar(){toolbar.title="影音App"toolbar.inflateMenu(R.menu.main)//对里面的按钮进行点击事件的绑定toolbar.setOnMenuItemClickListener(object :Toolbar.OnMenuItemClickListener{override fun onMenuItemClick(item: MenuItem?): Boolean {when(item?.itemId){R.id.backup->{Toast.makeText(toolbar.context,"点击备份按钮",Toast.LENGTH_SHORT).show()}R.id.delete->{Toast.makeText(toolbar.context,"点击删除按钮",Toast.LENGTH_SHORT).show()}R.id.setting->{Toast.makeText(toolbar.context,"点击设置按钮",Toast.LENGTH_SHORT).show()}}return true}})}
}

6在需要使用到ToolBar的布局主类中实现接口

package com.njupt.animinationimport android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import androidx.appcompat.widget.Toolbar
import com.njupt.animination.util.MyToolbarManagerclass MainActivity : AppCompatActivity() ,MyToolbarManager{override val toolbar: Toolbar by lazy {findViewById(R.id.toolbar)}private val mdialog:MyDiaglog by lazy {MyDiaglog(this,R.style.dialog)}override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)//调用MyToolbarManager接口里的方法来初始化toolbarinitMainToolBar()val btn=findViewById<Button>(R.id.btn1)btn.setOnClickListener(){mdialog.show()}val btn2=findViewById<Button>(R.id.btn2)btn2.setOnClickListener(){startActivity(Intent(this,SplashActivity::class.java))}}
}

2App初始动画

一般是一张图片进行动态的展示后显示出主布局,所以真正使用时将进入界面设置成当前界面,全屏显示的效果,没有ActionBar,也没有系统标题。
实现开机动画和自定义Toolbar的高级写法

1界面布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:id="@+id/image_splash"android:layout_width="match_parent"android:layout_height="match_parent"android:src="@drawable/splash"android:scaleType="centerCrop"android:scaleX="1.5"android:scaleY="1.5"/></LinearLayout>

2主程序实现

package com.njupt.animinationimport android.content.Intent
import android.os.Bundle
import android.view.View
import android.view.Window
import android.view.WindowManager
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.ViewPropertyAnimatorListenerclass SplashActivity:AppCompatActivity(), ViewPropertyAnimatorListener {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)//实现全屏显示requestWindowFeature(Window.FEATURE_NO_TITLE);window.setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);setContentView(R.layout.splash_activity)var splashImage=findViewById<ImageView>(R.id.image_splash)//结束动画之后添加一个结束动画监听事件,结束后自动调转到App首页ViewCompat.animate(splashImage).scaleX(1.0f).scaleY(1.0f).setListener(this).setDuration(1000)}override fun onAnimationStart(view: View?) {}override fun onAnimationEnd(view: View?) {startActivity(Intent(this,SplashOverActivty::class.java))}override fun onAnimationCancel(view: View?) {}
}

情感知识