iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
0
Mobile Development

Andriod Studio 菜鳥的學習分享系列 第 23

[Android Studio菜鳥的學習分享]ViewPaper 可滑動介面分享

  • 分享至 

  • xImage
  •  

昨天我分享的Fragment介紹,
可以發現Fragment可以直接在同一個頁面中顯示不同的畫面。
今天要分享的ViewPaper可以讓Fragment動起來,
實現FaceBook那種可以左右滑動的介面。


結果預覽:

ViewPaper結果預覽


Step01-創建三個Fragment分頁:

教學請見昨日分享
[Android Studio菜鳥的學習分享]Fragment介紹

Step02-創建 MainPagerAdapter:

創建一個Class,
我自己是取名為MainPagerAdapter。
它的功用是要作為ViewPaper的適配器(Adapter)。

package com.example.itthirty;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import java.util.ArrayList;
import java.util.List;

public class MainPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragmentList=new ArrayList<>();
    private List<String> fragmentTitle=new ArrayList<>();

    public MainPagerAdapter(@NonNull FragmentManager fm) {
        super(fm);
    }

    //計算要做出幾個分頁
    @Override
    public int getCount() {
        return fragmentList.size();
    }
    
    @NonNull
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

    // 取得要新增的Fragment與你為它取名的title
    public void addFragment(Fragment fragment,String title){
        fragmentList.add(fragment);
        fragmentTitle.add(title);
    }

    // 設置ViewPager的標題,之後可以判斷目前位於哪個fragment
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return fragmentTitle.get(position);
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewPagerMain"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>


</LinearLayout>

MainActivity.java

package com.example.itthirty;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MainPagerAdapter adapter = new MainPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new FragmentTest01Bmi(),"BMI");
        adapter.addFragment(new FragmentTest02Order(),"Order");
        adapter.addFragment(new FragmentTest03Setting(),"Setting");
        viewPager = findViewById(R.id.viewPagerMain);
        viewPager.setAdapter(adapter);
        viewPager.setOffscreenPageLimit(3);

    }
}

Step01-加入剛剛創建的Fragment們:

MainPagerAdapter adapter = new MainPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new FragmentTest01Bmi(),"BMI");
adapter.addFragment(new FragmentTest02Order(),"Order");
adapter.addFragment(new FragmentTest03Setting(),"Setting");

Step02-將MainPagerAdapter綁定ViewPaper:

viewPager = findViewById(R.id.viewPagerMain);
viewPager.setAdapter(adapter);

Step03-設定緩存範圍:

這個屬性是你要緩存的範圍。
EX.(3):
左右兩邊在載入時先開啟好3個頁面,
若超過3個頁面即會關閉(重新跑生命週期)。

(1)
如果我有10個頁面,
我目前在5號頁面,
2/3/4 and 6/7/8為緩存開啟狀態,
1/9/10為關閉的(下次開啟重啟生命週期)。
你滑到4號頁面時1號頁面就緩存開啟,
8/9/10為關閉的(下次開啟重啟生命週期)。

(2)
如果我有10個頁面,
我目前在6號頁面,
3/4/5 and 7/8/9為緩存開啟狀態,
1/2/10為關閉的(下次開啟重啟生命週期)。

viewPager.setOffscreenPageLimit(3);

上一篇
[Android Studio菜鳥的學習分享]Fragment介紹
下一篇
[Android Studio菜鳥的學習分享]Fragment應用(上)-TabLayout選單 + Fragment
系列文
Andriod Studio 菜鳥的學習分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言