DAY13:Fragment片段之实作

今天,要来产生Fragment。
首先按File再点选 Kotlin Class/File
https://ithelp.ithome.com.tw/upload/images/20210928/20140488SwsmasOCLI.png
接着取名Fragment的名称,我是命名为Fragment1并点选Class。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488MUKYdilyaE.png
按下Enter後,则建立完毕。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488Fmw3PmSRZS.png
接着介绍滑页,它是一种布局管理元件,透过手势左右滑动切换页面,搭配对应的PagerAdapter,来完成滑页的功能。并且也滑页这个滑页,观察生命周期。
开始吧!
首先,先建立三个fragment的xml档。
这是第一个activity的xml档,基本上就是不用用到元件。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488FQqUgFRTqY.png
接着要用fragment1、fragment2、fragment3的画面,这三个大同小异,用的元件也相对简单。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488PdmT1Y10Jl.png
那下图是第二页,因为处在中间,因此会有向坐或向右两种选项。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488FNYyUG2WAy.png
https://ithelp.ithome.com.tw/upload/images/20210928/20140488Tl9vh9mKFf.png
第三页大致与第一页相同差别在於向左向右的元件摆放。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488bYLbh8YCrR.png
接着我们写MainActivity、FirstFragment、SecondFragment、ThirdFragment四个主程序码,并加入log,以利观察生命周期
首先,MainActivity建立 FragmentPagerAdapter 物件,并且连接 Adapter,使画面与 ViewPager 建立关联。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488S4WVR1JWAX.png
https://ithelp.ithome.com.tw/upload/images/20210928/201404885gV6rxNxVK.png
再来是有关FirstFragment、SecondFragment、ThirdFragment这三个,他们的主程序码几乎相同,而差别在於需要定义像是FirstFragment的对应画面为fragment_first关於对应画面位置的差别而已,包括观察生命周期也都雷同。
就先放上FirstFragment的主程序码。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488QSJRYgqdvl.png
https://ithelp.ithome.com.tw/upload/images/20210928/20140488ROa9AeWtMr.png
这麽一来实作便完成了。
下图为我的第一页。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488EQAqnD7qJv.png
下图为从第一页翻页到第二页的过程。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488PoazZsYPzY.png
最後这就是第二页及第三页的画面
https://ithelp.ithome.com.tw/upload/images/20210928/20140488bVUvJjmjpK.png
https://ithelp.ithome.com.tw/upload/images/20210928/20140488QD8UsYPrwz.png
观察生命周期的部分,我们可以透过开启下方的工具Locat来观察。当我们操作程序让他翻页时,底下就会出现应用程序详细的步骤,这样就能观察到生命周期罗!
https://ithelp.ithome.com.tw/upload/images/20210928/201404880EJKJXeP5f.png


<<:  Stream Processing (1-1) - Transmitting Event Streams

>>:  Day13 - 解决状态大爆炸 - 1: Parallel States (平行式状态)

2.3 Design System - Design Token

在学习一个新东西的最初阶段 撞的墙一定是最多的,撑过去就好了! Design token 其实原本...

[JS] You Don't Know JavaScript [Async & Performance] - Promises

前言 在上一张中我们介绍了使用callback function的目的与缺点,虽然可以帮助我们处理非...

Day02. 走出户外,来到巨人的脚下-免费注册个BP来玩玩吧!

《荀子》一书的第二十三篇《性恶篇》提到:「坐而言,不如起而力行。」 疫情期间,因公司分流上班,每天都...

D20. 学习基础C、C++语言

D20. 字串题练习 这题是之前老师出的题目但是我一直解不出来,後来看很久,还跑去问同学才解出来的,...

Day8 Collectionview小实作2

继续昨天的小教室。 我们在collectionviewcell的xib里,因为我们在主程序需要用到c...