Android中實現(xiàn)視差滾動示例介紹
更新時間：2021年12月14日 10:55:55 作者：POIKurenai
大家好，本篇文章主要講的是Android中實現(xiàn)視差滾動示例介紹，感興趣的同學(xué)趕快來看一看吧，對你有幫助的話記得收藏一下，方便下次瀏覽
什么是視差滾動？
視差滾動原本是一個天文學(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)視差滾動示例介紹的文章就介紹到這了,更多相關(guān)Android實現(xiàn)視差滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Android實現(xiàn)新增及編輯聯(lián)系人的方法
這篇文章主要介紹了Android實現(xiàn)新增及編輯聯(lián)系人的方法,是Android應(yīng)用開發(fā)常見的功能,需要的朋友可以參考下2014-07-07
Android自定義DataTimePicker實例代碼（日期選擇器）
本篇文章主要介紹了Android自定義DataTimePicker實例代碼（日期選擇器），非常具有實用價值，需要的朋友可以參考下。2017-01-01
這篇文章主要介紹了詳解android6.0版本下懸浮窗實現(xiàn)，懸浮窗在安卓中實現(xiàn)起來還是比較容易的，非常具有實用價值，需要的朋友可以參考下。2017-03-03
這篇文章主要介紹了Android Button按鈕點擊背景和文字變化操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
flutter Container容器實現(xiàn)圓角邊框
這篇文章主要為大家詳細介紹了flutter Container容器實現(xiàn)圓角邊框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
Android Studio 在項目中引用第三方j(luò)ar包的方法
本文分步驟給大家介紹了Android Studio 在項目中引用第三方j(luò)ar包的方法，感興趣的朋友跟隨小編一起看看吧2018-09-09
Android多線程+單線程+斷點續(xù)傳+進度條顯示下載功能
這篇文章主要介紹了Android多線程+單線程+斷點續(xù)傳+進度條顯示下載功能,需要的朋友可以參考下2017-06-06
Kotlin?Flow數(shù)據(jù)流的3種使用場景詳解
這篇文章主要為大家詳細介紹了Kotlin中Flow數(shù)據(jù)流的幾種使用場景，文中的示例代碼講解詳細，具有一定的借鑒價值，需要的可以參考一下2023-04-04
android表格效果之ListView隔行變色實現(xiàn)代碼
首先繼承SimpleAdapter再使用重載的Adapter來達到效果，其實主要是需要重載SimpleAdapter，感興趣的朋友可以研究下，希望本文可以幫助到你2013-02-02
這篇文章主要為大家詳細介紹了Android手勢ImageView三部曲的第二部，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03