1. 修改 App 样式,去掉导航栏
<application android:theme="@style/Theme.AppCompat.NoActionBar" >
2. 添加矢量图
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="100dp"
android:height="100dp"
android:tint="#FFFFFFFF"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/white"
android:pathData="M16.84,14.52c-0.26,-0.19 -0.62,-0.63 -0.79,-0.84C17.24,12.01 19,8.87 19,5c0,-1.95 -0.74,-3 -2,-3c-1.54,0 -3.96,2.06 -5,5.97C10.96,4.06 8.54,2 7,2C5.74,2 5,3.05 5,5c0,3.87 1.76,7.01 2.95,8.68c-0.17,0.21 -0.53,0.65 -0.79,0.84c-0.5,0.41 -1.66,1.37 -1.66,2.98c0,2.21 1.79,4 4,4c1.55,0 2.5,-0.56 2.5,-0.56s0.95,0.56 2.5,0.56c2.21,0 4,-1.79 4,-4C18.5,15.89 17.34,14.93 16.84,14.52zM9.35,12.2C8.34,10.7 7,8.12 7,5c0,-0.49 0.06,-0.8 0.12,-0.97c0.94,0.31 3.24,2.71 3.38,7.64C10.03,11.79 9.66,11.97 9.35,12.2zM10.5,16.75c-0.28,0 -0.5,-0.34 -0.5,-0.75c0,-0.41 0.22,-0.75 0.5,-0.75S11,15.59 11,16C11,16.41 10.78,16.75 10.5,16.75zM12,19.5c-0.55,0 -1,-0.72 -1,-1c0,-0.28 0.45,-0.5 1,-0.5s1,0.22 1,0.5C13,18.78 12.55,19.5 12,19.5zM13.5,16.75c-0.28,0 -0.5,-0.34 -0.5,-0.75c0,-0.41 0.22,-0.75 0.5,-0.75S14,15.59 14,16C14,16.41 13.78,16.75 13.5,16.75zM13.5,11.67c0.14,-4.93 2.44,-7.33 3.38,-7.64C16.94,4.2 17,4.51 17,5c0,3.12 -1.34,5.7 -2.35,7.2C14.34,11.97 13.97,11.79 13.5,11.67z" />
</vector>
3. 创建三个 Fragment
3.1 缩放布局,fragment_scale.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".ScaleFragment">
<ImageView
android:id="@+id/imageViewScale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_baseline_cruelty_free" />
</FrameLayout>
3.2 缩放 Fragment,ScaleFragment.kt
class ScaleFragment : Fragment() {
private lateinit var binding: FragmentScaleBinding
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
): View? {
binding = FragmentScaleBinding.inflate(inflater, container, false)
return binding.root
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
binding.imageViewScale.setOnClickListener {
val factor = if (Random.nextBoolean()) 0.1f else -0.1f
ObjectAnimator.ofFloat(it, "scaleX", it.scaleX + factor).start()
ObjectAnimator.ofFloat(it, "scaleY", it.scaleY + factor).start()
}
}
}
3.3 旋转布局,fragment_rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".RotateFragment">
<ImageView
android:id="@+id/imageViewRotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_baseline_cruelty_free" />
</FrameLayout>
3.4 旋转 Fragment,RotateFragment.kt
class RotateFragment : Fragment() {
private lateinit var binding: FragmentRotateBinding
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
): View? {
binding = FragmentRotateBinding.inflate(inflater, container, false)
return binding.root
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
binding.imageViewRotate.setOnClickListener {
ObjectAnimator.ofFloat(it,"rotation",it.rotation + 30f).start()
}
}
}
3.5 平移布局,fragment_translate.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".TranslateFragment">
<ImageView
android:id="@+id/imageViewTranslate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_baseline_cruelty_free" />
</FrameLayout>
3.6 平移 Fragment,TranslateFragment.kt
class TranslateFragment : Fragment() {
private lateinit var binding: FragmentTranslateBinding
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
): View? {
binding = FragmentTranslateBinding.inflate(inflater, container, false)
return binding.root
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
binding.imageViewTranslate.setOnClickListener {
val factor = if (Random.nextBoolean()) 2f else -2f
ObjectAnimator.ofFloat(it, "translationX", it.translationX + Random.nextInt(-100, 100)).start()
}
}
}
4. 调用主页
4.1 布局文件 activity_main.xml
<?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"
android:orientation="vertical"
tools:context=".MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="80dp"
app:tabIndicatorColor="#FFFFFF">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Monday" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tuesday" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Wednesday" />
</com.google.android.material.tabs.TabLayout>
<View
android:id="@+id/divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/listDivider" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager2"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.viewpager2.widget.ViewPager2>
</LinearLayout>
4.2 主页 MainActivity.kt
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
binding.viewPager2.adapter = object : FragmentStateAdapter(this) {
override fun getItemCount() = 3
override fun createFragment(position: Int) =
when (position) {
0 -> ScaleFragment()
1 -> RotateFragment()
else -> TranslateFragment()
}
}
TabLayoutMediator(binding.tabLayout, binding.viewPager2) { tab, position ->
when (position) {
0 -> tab.text = "缩放"
1 -> tab.text = "旋转"
else -> tab.text = "移动"
}
}.attach()
}
}
5. 效果图
。