Android中實(shí)現(xiàn)視差滾動(dòng)示例介紹
什么是視差滾動(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í)世界中人類的視覺(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
然后添加需要的依賴:
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 類似 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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android實(shí)現(xiàn)新增及編輯聯(lián)系人的方法
這篇文章主要介紹了Android實(shí)現(xiàn)新增及編輯聯(lián)系人的方法,是Android應(yīng)用開(kāi)發(fā)常見(jiàn)的功能,需要的朋友可以參考下2014-07-07Android自定義DataTimePicker實(shí)例代碼(日期選擇器)
本篇文章主要介紹了Android自定義DataTimePicker實(shí)例代碼(日期選擇器),非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-01-01詳解android6.0版本下懸浮窗實(shí)現(xiàn)
這篇文章主要介紹了詳解android6.0版本下懸浮窗實(shí)現(xiàn),懸浮窗在安卓中實(shí)現(xiàn)起來(lái)還是比較容易的,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-03-03Android Button按鈕點(diǎn)擊背景和文字變化操作
這篇文章主要介紹了Android Button按鈕點(diǎn)擊背景和文字變化操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08flutter Container容器實(shí)現(xiàn)圓角邊框
這篇文章主要為大家詳細(xì)介紹了flutter Container容器實(shí)現(xiàn)圓角邊框,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07Android Studio 在項(xiàng)目中引用第三方j(luò)ar包的方法
本文分步驟給大家介紹了Android Studio 在項(xiàng)目中引用第三方j(luò)ar包的方法,感興趣的朋友跟隨小編一起看看吧2018-09-09Android多線程+單線程+斷點(diǎn)續(xù)傳+進(jìn)度條顯示下載功能
這篇文章主要介紹了Android多線程+單線程+斷點(diǎn)續(xù)傳+進(jìn)度條顯示下載功能,需要的朋友可以參考下2017-06-06Kotlin?Flow數(shù)據(jù)流的3種使用場(chǎng)景詳解
這篇文章主要為大家詳細(xì)介紹了Kotlin中Flow數(shù)據(jù)流的幾種使用場(chǎng)景,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考一下2023-04-04android表格效果之ListView隔行變色實(shí)現(xiàn)代碼
首先繼承SimpleAdapter再使用重載的Adapter來(lái)達(dá)到效果,其實(shí)主要是需要重載SimpleAdapter,感興趣的朋友可以研究下,希望本文可以幫助到你2013-02-02Android手勢(shì)ImageView三部曲 第二部
這篇文章主要為大家詳細(xì)介紹了Android手勢(shì)ImageView三部曲的第二部,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03