Android中實(shí)現(xiàn)視差滾動(dòng)示例介紹

更新時(shí)間：2021年12月14日 10:55:55 作者：POIKurenai

大家好，本篇文章主要講的是Android中實(shí)現(xiàn)視差滾動(dòng)示例介紹，感興趣的同學(xué)趕快來(lái)看一看吧，對(duì)你有幫助的話(huà)記得收藏一下，方便下次瀏覽

什么是視差滾動(dòng)？

視差滾動(dòng)原本是一個(gè)天文學(xué)術(shù)語(yǔ)，當(dāng)我們觀察星空的時(shí)候，離我們比較遠(yuǎn)的星星移動(dòng)速度比較慢，離我們比較近的星星移動(dòng)速度比較快，當(dāng)我們坐在車(chē)上向車(chē)窗外看的時(shí)候也會(huì)有這種體驗(yàn)，遠(yuǎn)處的群山似乎沒(méi)有移動(dòng)，但近處的行道樹(shù)卻在飛速掠過(guò)。

在工程設(shè)計(jì)中，視差滾動(dòng)是指通過(guò)為背景圖像設(shè)定比前景圖像更慢的移動(dòng)速度模擬現(xiàn)實(shí)世界中人類(lèi)的視覺(jué)體驗(yàn)，從而在 2D 場(chǎng)景中產(chǎn)生深度的錯(cuò)覺(jué)，增加沉浸感。

以下是幾個(gè)設(shè)計(jì)實(shí)例：

如何在 Android 中實(shí)現(xiàn)視差滾動(dòng)？

首先創(chuàng)建一個(gè)新項(xiàng)目

新建 Android project

選擇 Empty Activity

Name：ParallaxAndroid

Package name：com.example.parallaxandroid

Language：Kotlin

然后添加需要的依賴(lài)：

implementation "androidx.coordinatorlayout:coordinatorlayout:1.1.0"
implementation 'androidx.recyclerview:recyclerview:1.1.0'
implementation 'com.google.android.material:material:1.2.0-alpha06'

此處以創(chuàng)建一個(gè)具有視差滾動(dòng)效果的展示書(shū)籍磁貼的頁(yè)面為例。

首先從 XML 布局開(kāi)始。

在 main activity XML 中添加 collapsing toolbar layout，collapsing toolbar layout 類(lèi)似 FrameLayout，所有最后加入的元素都將被放置在頂部。這種放置方式對(duì)實(shí)現(xiàn)視差滾動(dòng)非常重要。

 <androidx.coordinatorlayout.widget.CoordinatorLayout>
 <com.google.android.material.appbar.AppBarLayout>
     <com.google.android.material.appbar.CollapsingToolbarLayout>
         <ImageView/>
         <android.appcompat.widget.Toolbar />
         <com.google.android.material.tabs.TabLayout/>
     </com.google.android.material.appbar.CollapsingToolbarLayout>
 </com.google.android.material.appbar.AppBarLayout>
 <androidx.viewpager.widget.ViewPager/>
 </androidx.coordinatorlayout.widget.CoordinatorLayout>

activity_main.xml 文件如下：

 <?xml version="1.0" encoding="utf-8"?> 
 <androidx.coordinatorlayout.widget.CoordinatorLayout      xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      
 android:layout_width="match_parent"      
 android:layout_height="match_parent"      
 xmlns:app="http://schemas.android.com/apk/res-auto"      
 tools:context=".MainActivity">  ?      
 <com.google.android.material.appbar.AppBarLayout          android:layout_width="wrap_content"          
 android:layout_height="wrap_content"          android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"          android:fitsSystemWindows="true">  ?          
 <include layout="@layout/toolbar"/>  ?          <com.google.android.material.tabs.TabLayout              
 android:id="@+id/tabs"              
 android:layout_width="match_parent"              
 android:layout_height="wrap_content"              
 app:tabGravity="fill"              app:tabTextAppearance="@style/TextAppearance.AppCompat.Medium"              app:tabSelectedTextColor="@android:color/black"              app:tabBackground="@android:color/holo_orange_dark"              app:tabTextColor="@android:color/white"              app:tabIndicatorColor="@android:color/white"              
 app:tabMode="fixed" />
 ?
 </com.google.android.material.appbar.AppBarLayout>
 ?
 <androidx.viewpager.widget.ViewPager
 android:id="@+id/viewPager"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="15dp"
         app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>
 ?
 </androidx.coordinatorlayout.widget.CoordinatorLayout>

toolbar layout：

 <?xml version="1.0" encoding="UTF-8"?>
 <com.google.android.material.appbar.CollapsingToolbarLayout
     android:id="@+id/collapsing_toolbar"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:fitsSystemWindows="true"
     app:contentScrim="@android:color/holo_orange_dark"
     app:expandedTitleMarginEnd="64dp"
     app:expandedTitleMarginStart="48dp"
     app:layout_scrollFlags="scroll|exitUntilCollapsed"
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto">
 ?
     <ImageView
         android:src="@drawable/books"
         app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
         android:layout_width="wrap_content"
         android:layout_height="160dp"
         android:scaleType="centerCrop"
         app:layout_collapseMode="parallax"
         android:minHeight="50dp" />
 ?
     <androidx.appcompat.widget.Toolbar
         android:id="@+id/toolbar"
         android:contentDescription="@string/books"
         android:layout_width="match_parent"
         app:title="@string/app_name"
         app:titleTextAppearance="@style/TextAppearance.AppCompat.Medium"
         app:titleTextColor="@android:color/white"
         android:layout_height="?attr/actionBarSize"
         app:layout_scrollFlags="scroll|enterAlways" />
 </com.google.android.material.appbar.CollapsingToolbarLayout>

在上面的布局中，我們添加了這些屬性：CollapsingToolbarLayout

app:layout_scrollFlags="scroll|exitUntilCollapsed"

ImageView

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

app:layout_collapseMode="parallax"

Toolbar

app:layout_scrollFlags="scroll|enterAlways"

接下來(lái)配置 ManActivity 文件。

class MainActivity : FragmentActivity() {
 ?
     private lateinit var mPager: ViewPager
     private lateinit var tabLayout : TabLayout
 ?
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_main)
 ?
         mPager = findViewById(R.id.viewPager)
         tabLayout = findViewById(R.id.tabs)
         tabLayout.setupWithViewPager(mPager)
 ?
         val pagerAdapter = ScreenSlidePagerAdapter(supportFragmentManager)
         mPager.adapter = pagerAdapter
     }
 ?
     override fun onBackPressed() {
         if (mPager.currentItem == 0) {
             // If the user is currently looking at the first step, allow the system to handle the
             // Back button. This calls finish() on this activity and pops the back stack.
             super.onBackPressed()
         } else {
             // Otherwise, select the previous step.
             mPager.currentItem = mPager.currentItem - 1
         }
     }
 ?
     private inner class ScreenSlidePagerAdapter(fm: FragmentManager) :
         FragmentStatePagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
         override fun getCount(): Int = 3
         override fun getItem(position: Int): Fragment = BooksFragment().newInstance()
         override fun getPageTitle(position: Int): CharSequence? {
             var title  = ""
             when(position) {
                 0 -> title ="Tech"
                 1 -> title = "Novels"
                 2 -> title = "Motivational"
             }
             return title
         }
     }
 }

創(chuàng)建用來(lái)加載 Recycleview 的 fragment：

 class BooksFragment : Fragment() {
 ?
     fun newInstance(): BooksFragment {
         return BooksFragment()
     }
 ?
     override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
         val view : View? = inflater.inflate(R.layout.books_fragment, container, false)
         val rvBooks : RecyclerView = view!!.findViewById(R.id.rvBooksList)
         rvBooks.layoutManager = LinearLayoutManager(activity);
         val recyclerAdapter = BooksRecyclerAdapter(Util().getBooks())
         rvBooks.adapter = recyclerAdapter
         return view
     }
 }

然后需要?jiǎng)?chuàng)建一個(gè)用來(lái)加載所有元素的 adapter。

class BooksRecyclerAdapter(private val mBooks: List<Books>) : RecyclerView.Adapter<ViewHolder>() {
 ?
     inner class ViewHolder(listItemView: View) : RecyclerView.ViewHolder(listItemView) {
         val titleTextView: TextView = itemView.findViewById(R.id.text_title)
         val authorTextView: TextView = itemView.findViewById(R.id.text_author)
         val subTitleTextView: TextView = itemView.findViewById(R.id.text_subtitle)
     }
 ?
     override fun onCreateViewHolder(
         parent: ViewGroup,
         viewType: Int): ViewHolder {
         val context: Context = parent.context
         val inflater = LayoutInflater.from(context)
         val booksView: View = inflater.inflate(R.layout.item_books, parent, false)
         return ViewHolder(booksView)
     }
 ?
     override fun onBindViewHolder(
         viewHolder: ViewHolder,
         position: Int) {
         val titleTextView: TextView = viewHolder.titleTextView
         titleTextView.text = mBooks[position].title
         val authorTextView: TextView = viewHolder.authorTextView
         authorTextView.text = mBooks[position].author
         val subTitleTextView: TextView = viewHolder.subTitleTextView
         subTitleTextView.text = mBooks[position].subtitle
     }
 ?
     override fun getItemCount(): Int {
         return mBooks.size
     }
 }

以上是主要的 Kotlin 文件和 layout 文件。

在 toolbar layout 的 ImageView 中可以設(shè)置滾動(dòng)速度和其它屬性。

到此這篇關(guān)于Android中實(shí)現(xiàn)視差滾動(dòng)示例介紹的文章就介紹到這了,更多相關(guān)Android實(shí)現(xiàn)視差滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: