Android 联合ViewPager 与 Fragment

Posted 2021-05-16 今晚看星星

文章目录

• 1 Fragment与Viewpager适配器
• • 1.1 FragmentPageAdapter
  • 1.2 FragmentStatePagerAdapter
• 2 创建 FragmentPageAdapter 适配器
• • 2.1 切换不同的Fragment
  • 2.2 ViewPager滑动监听
• 3 UI部分代码

1 Fragment与Viewpager适配器

1.1 FragmentPageAdapter

• 用于实现Fragment的滑动效果，使用Fragment来填充ViewPager
• 适用于页面比较少的情况，FragmentPagerAdapter消耗更多的内存
• 它会把每一个Fragment保存在内存 中，不用每次切换的时候，去保存现场，切换回来在重新创建，所以用户体验比较好
• 而对 于Fragment比较多的情况，需要切换的时候销毁以前的Fragment以释放内存，就可以使用 FragmentStatePagerAdapter

1.2 FragmentStatePagerAdapter

• 用于实现Fragment的滑动效果， 使用Fragment来填充ViewPager
• 适用于页面比较多的情况，FragmentStatePagerAdapter省内存

2 创建 FragmentPageAdapter 适配器

• 重写获取页面的方法public Fragment getItem(int position) { return fragmentList.get(position); }
• 重写获取长度的方法 public int getCount() { return fragmentList.size(); }

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    // 定义Fragment列表来存放Fragment
    private List<Fragment> fragmentList;

    // 1. 定义构造方法
    public MyFragmentPagerAdapter(@NonNull FragmentManager fm, List<Fragment> listFragment) {
        super(fm);
        this.fragmentList = listFragment;
    }

    public MyFragmentPagerAdapter(FragmentManager fm, int behavior) {
        super(fm, behavior);
    }


    @NonNull
    @Override
    // 2. 显示页面，为数组中的Fragment’
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

    @Override
    // 3. 获取页面的个数，几位列表的长度
    public int getCount() {
        return fragmentList.size();
    }
}

2.1 切换不同的Fragment

// 设置索引显示fragment,
private void showFragment(int position) {

    // viewPage中的适配器，按照索引进行显示
    viewPager.setCurrentItem(position);  // 设置当前显示的位置
}

2.2 ViewPager滑动监听

    // 设置页数改变后的响应, 允许公共访问
    public class MyPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        // 页面滑动的时候
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        // 页面选中时调用
        public void onPageSelected(int position) {

            if (position == 0) {
                // 第一个页面的时候， 改变底部状态
                tab_1.setBackgroundColor(Color.RED);
                tab_2.setBackgroundColor(Color.WHITE);
                tab_3.setBackgroundColor(Color.WHITE);
            } else if (position == 1) {
                // 第二个页面的时候，改变底部状态
                tab_1.setBackgroundColor(Color.WHITE);
                tab_2.setBackgroundColor(Color.RED);
                tab_3.setBackgroundColor(Color.WHITE);
            } else if (position == 2) {
                tab_1.setBackgroundColor(Color.WHITE);
                tab_2.setBackgroundColor(Color.WHITE);
                tab_3.setBackgroundColor(Color.RED);
            }

        }

        @Override
        // 页面滑动时，状态改变
        public void onPageScrollStateChanged(int state) {

        }
    }

3 UI部分代码

• 设置UI类为监听器

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    // 定义控件
    private TextView tab_1, tab_2, tab_3;
    private ViewPager viewPager;  // 切换区
    private List<Fragment> fragmentList; // fragment数组
    private MyFragmentPagerAdapter myFragmentPagerAdapter;  // 适配器


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

        initUI();
        initTab();

    }

    // 初始化UI 获取控件，并设置监听器
    private void initUI() {

        tab_1 = findViewById(R.id.tab_1);
        tab_2 = findViewById(R.id.tab_2);
        tab_3 = findViewById(R.id.tab_3);
        tab_1.setOnClickListener(this);
        tab_2.setOnClickListener(this);
        tab_3.setOnClickListener(this);

        // 初始化切换区
        viewPager = findViewById(R.id.my_view_Pager);
    }

    // 显示Page以及其标签
    private void initTab() {
        // 1. 创建Page界面
        FragmentOne fragmentOne = new FragmentOne();
        FragmentTwo fragmentTwo = new FragmentTwo();
        FragmentThree fragmentThree = new FragmentThree();

        fragmentList = new ArrayList<>();

        // 添加到列表中
        fragmentList.add(fragmentOne);
        fragmentList.add(fragmentTwo);
        fragmentList.add(fragmentThree);

        // 3. 新建适配器
        myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),fragmentList);

        // 4. 设置适配器到viewPager
        viewPager.setAdapter(myFragmentPagerAdapter);

        // 5. 设置滑动监听
        viewPager.addOnPageChangeListener(new MyPageChangeListener());

        // 默认展示第一个界面
        showFragment(0);

    }

    // 设置索引显示fragment,
    private void showFragment(int position) {

        // viewPage中的适配器，按照索引进行显示
        viewPager.setCurrentItem(position);  // 设置当前显示的位置

        // 根据坐标设置底部按钮的颜色
        if (position == 0) {
            tab_1.setBackgroundColor(Color.RED);
            tab_2.setBackgroundColor(Color.WHITE);
            tab_3.setBackgroundColor(Color.WHITE);
        } else if (position == 1) {
            // 只有一个被选中，各个标签是冲突的
            tab_1.setBackgroundColor(Color.WHITE);
            tab_2.setBackgroundColor(Color.RED);
            tab_3.setBackgroundColor(Color.WHITE);

        } else if (position == 2) {
            tab_1.setBackgroundColor(Color.WHITE);
            tab_2.setBackgroundColor(Color.WHITE);
            tab_3.setBackgroundColor(Color.RED);
        }


    }

    @Override
    // 根据点击的View的ID 来改变下面标签的布局
    public void onClick(View v) {

        if (v.getId() == R.id.tab_1) {
            showFragment(0);
        } else if (v.getId() == R.id.tab_2) {
            showFragment(1);
        } else if (v.getId() == R.id.tab_3) {
            showFragment(2);
        }

    }


    // 设置页数改变后的响应, 允许公共访问
    public class MyPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        // 页面滑动的时候
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        // 页面选中时调用
        public void onPageSelected(int position) {

            if (position == 0) {
                // 第一个页面的时候， 改变底部状态
                tab_1.setBackgroundColor(Color.RED);
                tab_2.setBackgroundColor(Color.WHITE);
                tab_3.setBackgroundColor(Color.WHITE);
            } else if (position == 1) {
                // 第二个页面的时候，改变底部状态
                tab_1.setBackgroundColor(Color.WHITE);
                tab_2.setBackgroundColor(Color.RED);
                tab_3.setBackgroundColor(Color.WHITE);
            } else if (position == 2) {
                tab_1.setBackgroundColor(Color.WHITE);
                tab_2.setBackgroundColor(Color.WHITE);
                tab_3.setBackgroundColor(Color.RED);
            }

        }

        @Override
        // 页面滑动时，状态改变
        public void onPageScrollStateChanged(int state) {

        }
    }
}