手機直播原始碼,使用ViewPager2實現頁面滑動切換
手機直播原始碼,使用ViewPager2實現頁面滑動切換
1.引言
在很多應用中,我們經常會看到多個頁面之間滑動切換的場景,ViewPager2是ViewPager的升級版,本文將簡要介紹如何使用ViewPager2、FragmentStateAdapter和Fragment來實現頁面之間的滑動切換。
2.實現頁面滑動切換
2.1 引入ViewPager2庫
要使用ViewPager2,需要引入ViewPager2庫,引入方法如下:
implementation "androidx.viewpager2:viewpager2:1.0.0"
2.2 使用ViewPager2
在佈局中使用ViewPager2,示例如下:
<androidx.viewpager2.widget.ViewPager2 android:id="@+id/viewPager2" android:layout_width="match_parent" android:layout_height="match_parent"/>
2.3 構建Fragment
本Fragment只為簡單演示使用,其佈局如下:
<LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <TextView android:id="@+id/tv_content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="18sp" android:textColor="@color/black"/> </LinearLayout>
ContentFragment類的實現如下:
public class ContentFragment extends Fragment { private String content; public ContentFragment(String content) { this.content = content; } private TextView tv_content; @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_content, container, false); tv_content = view.findViewById(R.id.tv_content); tv_content.setText(content); return view; } public void setContent(String content) { this.content = content; tv_content.setText(content); } }
2.4 繼承FragmentStateAdapter
建立自定義的類ContentPagerAdapter,讓它繼承FragmentStateAdapter,並實現createFragment(int position)和getItemCount()方法,示例如下:
public class ContentPagerAdapter extends FragmentStateAdapter { private List<ContentFragment> datas; public ContentPagerAdapter(@NonNull FragmentActivity fragmentActivity,List<ContentFragment> datas) { super(fragmentActivity); this.datas = datas; } @NonNull @Override public Fragment createFragment(int position) { return datas.get(position); } @Override public int getItemCount() { return datas.size(); } }
2.5 將ViewPager2與介面卡繫結
將ViewPager2與介面卡繫結後,便可實現頁面滑動切換,示例如下:
datas = new ArrayList<>(); datas.add(new ContentFragment("頁面1")); datas.add(new ContentFragment("頁面2")); datas.add(new ContentFragment("頁面3")); datas.add(new ContentFragment("頁面4")); datas.add(new ContentFragment("頁面5")); contentPagerAdapter = new ContentPagerAdapter(this, datas); viewPager2.setAdapter(contentPagerAdapter);
2.6 垂直方向滑動切換
ViewPager2不僅支援水平方向的滑動,還支援垂直方向的滑動,實現垂直滑動也是相當簡單,在佈局檔案中新增android:orientation="vertical"屬性即可,如下所示:
<androidx.viewpager2.widget.ViewPager2 android:id="@+id/viewPager2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"/>
或者在程式碼中呼叫ViewPager2的setOrientation(ViewPager2.ORIENTATION_VERTICAL)方法也可以讓ViewPager2實現垂直方向的滑動。
以上就是 手機直播原始碼,使用ViewPager2實現頁面滑動切換,更多內容歡迎關注之後的文章
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2933890/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- WPF手動實現切換頁面
- CSS實現頁面切換時的滑動效果CSS
- 成品直播原始碼,點選滑動切換效果原始碼
- 手機直播原始碼,實現圖片瀑布流式滑動效果原始碼
- 手機直播原始碼,JS實現頁面下拉載入資料操作原始碼JS
- js實現手機網頁滑動JS網頁
- 短視訊程式原始碼,PageSlider實現滑動頁面原始碼IDE
- H5單頁面手勢滑屏切換原理H5
- vue路由切換滑動效果 vue頁面跳轉互動 vue實現動畫跳轉Vue路由動畫
- 直播小程式原始碼,小程式頁面左右滑動如何解決原始碼
- app直播原始碼,彈出層 加遮罩層 頁面禁止滑動APP原始碼遮罩
- 直播商城原始碼,實現左右聯動商品分類頁面原始碼
- 手機直播原始碼,文字上下滾動切換 用於公告訊息提示原始碼
- 使用ViewPager和TabLayout來實現滑動切換效果ViewpagerTabLayout
- app直播原始碼,平臺登入頁面實現和修改密碼頁面實現APP原始碼密碼
- 直播app原始碼,標題欄隨頁面滑動之title移動定位效果APP原始碼
- 直播系統中網頁類似app頁面切換動畫的實現方式網頁APP動畫
- 頁面無重新整理切換實現
- iOS實現超酷頁面切換動畫特效iOS動畫特效
- 直播原始碼,實現內容列表的豎向滑動原始碼
- 線上直播系統原始碼,flutter 巢狀滑動實現原始碼Flutter巢狀
- app直播原始碼,自定義兩種Activity切換動畫實現APP原始碼動畫
- 安卓開發:viewpager + fragment 實現滑動切換安卓ViewpagerFragment
- MVVM框架下實現左右滑動切換tabMVVM框架
- 影片直播原始碼,AndroidStudio登入頁面的切換原始碼Android
- 直播平臺原始碼,vue+vue-fullpage實現整屏滾動頁面原始碼Vue
- 直播平臺原始碼,純JS實現左右滑動輪播圖原始碼JS
- 直播商城原始碼,實現系統的日間/夜間模式切換原始碼模式
- 高仿網易新聞客戶端首頁滑動切換頁面框架--LXScrollContentView客戶端框架View
- 手機直播原始碼,當前頁卡指示器的簡單實現方法原始碼
- 直播軟體原始碼,實現頁面滾動到可視區顯示動畫效果原始碼動畫
- uniapp 滑動切換APP
- css實現滑鼠滑過切換背景圖片程式碼CSS
- 成品直播原始碼,html頁面點選按鈕實現頁面跳轉的兩種方法原始碼HTML
- [MAUI]模仿iOS多工切換卡片滑動的互動實現UIiOS
- 直播app原始碼,使用者首次登入時彈出左右滑動導航頁APP原始碼
- H5頁面實現滑動控制音訊播放H5音訊
- 直播原始碼網站,實現對話方塊的左滑動刪除原始碼網站