Android 中的视差效果示例

近年来，每个 Android 应用程序都将用户体验放在首位。一个设计良好的应用程序将具有较高的用户评分和受欢迎程度。 UI/UX 空间中提供了许多效果，为用户提供良好的体验。视差就是这样一种效果。让我们来看看这是什么，以及一个示例应用程序，看看它是如何工作的。

究竟什么是视差？

术语“视差”听起来像一个数学术语。是的，这项技术源自数学原理。这是一种用于计算机图形和网页设计的技术，其中背景图像比前景图像移动得更快，从而在 2D 场景中产生深度错觉并增加沉浸感。视差滚动可能是一种非常有趣的技术，它可以使您的应用程序的某些部分更加生动和字符。它不仅限于 Android/Web 应用程序。大多数游戏应用程序使用此效果来创建对象向后移动且仅聚焦一个对象的错觉。材料设计滚动动画将包括 Android 中的视差。在某些设计中使用带有标题图像的视差滚动效果。

在 Android 应用中使用视差效果

1. 让我们从创建一个新项目开始。
2. 开始一个新的 Android 项目。
3. 接下来，选择 Empty Activity 和 Next Name: Parallax Android 包的名称：com.geeksforgeeks.example.parallax
4. Kotlin 是一种语言。
5. 结束

让我们添加必要的依赖项。

implementation "androidx.coordinatorlayout:coordinatorlayout:1.1.0"
implementation 'androidx.recyclerview:recyclerview:1.1.1'
implementation 'com.google.android.material:material:1.2.0-alpha05'

在本节中，我们将创建一个应用程序，该应用程序将显示具有视差滚动效果的书籍列表。让我们从 XML 布局开始。首先，我们需要一个可折叠的工具栏布局，我们可以将其添加到主活动 XML 中。折叠工具栏布局类似于 FrameLayout。最近添加的任何元素都将放置在顶部。这种定位对于视差正常工作至关重要。

让我们从活动 main.xml 的骨架开始，稍后添加所需的元素代码。

我们的活动 main.xml文件将如下所示：

请注意，以下属性已添加到上述布局中：

要与 CollapsingToolbarLayout 一起使用：

app:layout scrollFlags="scroll|exitUntilCollapsed"

关于 ImageView：

app:layout scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:layout collaps"
Mode="parallax"

关于工具栏：

app:layout scrollFlags="scroll|enterAlways"

在我们的 MainActivity 中，我们必须配置 Viewpager 和选项卡。因为我们在布局中包含了选项卡，所以我们需要一个 ViewPager 来使其工作。此外，我们将创建一个加载 RecyclerView 的 Fragment 和一个加载 RecyclerView 中项目的适配器。在活动中，我负责配置视图分页器和选项卡，以及为视图分页器加载片段。我在这里加载三个标签和一个片段。这些属性在ScreenSlidePagerAdapter 中定义。

科特林

class GfgMainActivity : FragmentActivity() {
    private lateinit var gfgGfgViewP: GfgViewP
    private lateinit var gfgTabLayout : GfgTabLayout
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        gfgGfgViewP = findViewById(R.id.gfgViewP)
        gfgTabLayout = findViewById(R.id.theTabs)
        gfgTabLayout.setupWithGfgViewP(gfgGfgViewP)
  
        val pagerAdapter = ScreenSlidePagerAdapter(supportFragmentManager)
        gfgGfgViewP.adapter = pagerAdapter
    }
  
    override fun onBackPressed() {
        if (gfgGfgViewP.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.
            gfgGfgViewP.currentItem = gfgGfgViewP.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 ="Android"
                1 -> title = "DSA"
                2 -> title = "Interviews"
            }
            return title
        }
    }
}

制作一个将加载 Recyclerview 的CoursesFragment 。

科特林

class CoursesFragment : Fragment() {
    fun newInstance(): CoursesFragment {
        return CoursesFragment()
    }
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view : View? = inflater.inflate(R.layout.courses_fragment, container, false)
        val rvCourses : RecyclerView = view!!.findViewById(R.id.courseList)
        rvCourses.layoutManager = LinearLayoutManager(activity);
        val recyclerAdapter = CoursesRecyclerAdapter(Util().getCourses())
        rvCourses.adapter = recyclerAdapter
        return view
    }
}

输出：

在工具栏布局的 ImageView 中设置滚动速度和其他属性来自定义它们。总而言之，Android 支持库包含大量此类实用程序，可帮助我们在各个方面使我们的应用程序变得更好。我们需要调查它们并使用它们来创建更多可用的应用程序。