欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android中實現視差滾動示例介紹

 更新時間：2021年12月14日 10:55:55   作者：POIKurenai  
大家好，本篇文章主要講的是Android中實現視差滾動示例介紹，感興趣的同學趕快來看一看吧，對你有幫助的話記得收藏一下，方便下次瀏覽

什么是視差滾動？

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

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

以下是幾個設計實例：

img

img

img

img

如何在 Android 中實現視差滾動？

首先創(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，所有最后加入的元素都將被放置在頂部。這種放置方式對實現視差滾動非常重要。

 <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 中可以設置滾動速度和其它屬性。

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

相關文章

最新評論