Android中实现视差滚动示例介绍
什么是视差滚动?
视差滚动原本是一个天文学术语,当我们观察星空的时候,离我们比较远的星星移动速度比较慢,离我们比较近的星星移动速度比较快,当我们坐在车上向车窗外看的时候也会有这种体验,远处的群山似乎没有移动,但近处的行道树却在飞速掠过。
在工程设计中,视差滚动是指通过为背景图像设定比前景图像更慢的移动速度模拟现实世界中人类的视觉体验,从而在 2d 场景中产生深度的错觉,增加沉浸感。
以下是几个设计实例:
如何在 android 中实现视差滚动?
首先创建一个新项目
新建 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'
此处以创建一个具有视差滚动效果的展示书籍磁贴的页面为例。
首先从 xml 布局开始。
在 main activity xml 中添加 collapsing toolbar layout,collapsing toolbar layout 类似 framelayout,所有最后加入的元素都将被放置在顶部。这种放置方式对实现视差滚动非常重要。
<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 } } }
创建用来加载 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 } }
然后需要创建一个用来加载所有元素的 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 中可以设置滚动速度和其它属性。
到此这篇关于android中实现视差滚动示例介绍的文章就介绍到这了,更多相关android实现视差滚动内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
推荐阅读
-
Android 通过onDraw实现在View中绘图操作的示例
-
Android 8.0 中如何实现视频通话的画中画模式的示例
-
Android中实现词组高亮TextView方法示例
-
Android中RecyclerView实现分页滚动的方法详解
-
android中SwipeRefresh实现各种上拉,下拉刷新示例
-
Android中验证码倒计时的简单实现方法示例
-
android开发教程之使用线程实现视图平滑滚动示例
-
Android中TextView实现垂直滚动和上下滚动效果
-
Android中实现多行、水平滚动的分页的Gridview实例源码
-
Android中实现水平滑动(横向滑动)ListView示例