Android中如何實現(xiàn)視差滾動

這篇文章將為大家詳細講解有關(guān)Android中如何實現(xiàn)視差滾動，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

什么是視差滾動？

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

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

以下是幾個設(shè)計實例：

如何在 Android 中實現(xiàn)視差滾動？

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

新建 Android project

選擇 Empty Activity

Name：ParallaxAndroid

Package name：com.example.parallaxandroid

Language：Kotlin

然后添加需要的依賴：

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)建一個具有視差滾動效果的展示書籍磁貼的頁面為例。

首先從 XML 布局開始。

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

 <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"

接下來配置 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)建用來加載 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
     }
 }

然后需要創(chuàng)建一個用來加載所有元素的 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è)置滾動速度和其它屬性。

關(guān)于“Android中如何實現(xiàn)視差滾動”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。