ViewPager+Fragment的基本使用

ViewPager+Fragment viewPager简介

Android 3.0后引入的一个UI控件——ViewPager(视图滑动切换工具)，实在想不到 如何来称呼这个控件，他的大概功能：通过手势滑动可以完成View的切换，一般是用来做APP 的引导页或者实现图片轮播。ViewPager就是一个简单的页面切换组件，我们可以往里面填充多个View，然后我们可以左 右滑动，从而切换不同的View。

Fragment

Fragment是Android3.0后引入的一个新的API，他出现的初衷是为了适应大屏幕的平板电脑， 当然现在他仍然是平板APP UI设计的宠儿，而且我们普通手机开发也会加入这个Fragment， 我们可以把他看成一个小型的Activity，又称Activity片段！想想，如果一个很大的界面，我们 就一个布局，写起界面来会有多麻烦，而且如果组件多的话是管理起来也很麻烦！而使用Fragment 我们可以把屏幕划分成几块，然后进行分组，进行一个模块化的管理！从而可以更加方便的在 运行过程中动态地更新Activity的用户界面！另外Fragment并不能单独使用，他需要嵌套在Activity 中使用，尽管他拥有自己的生命周期，但是还是会受到宿主Activity的生命周期的影响，比如Activity 被destory销毁了，他也会跟着销毁！

Fragment的生命周期图

ViewPager+Fragment实现一个小实例 效果图：

效果演示

项目文件图

新建一个项目，然后新建一个BlankFragment文件

上一步过程中同时也会创建一个布局文件，为其添加一个TextView

在Activity_main.xml文件中引入ViewPager组件。其中layout_weight=1的设置很重要再加上使用include标签将底部导航栏加入就可以使得导航栏始终在底部，ViewPager可以填充除导航栏的地方。

底部导航栏布局

为Fragment创建适配器类

public class MyFragmentPagerAdapter extends FragmentStateAdapter {
    List fragmentList = new LinkedList<>();
    public MyFragmentPagerAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle, List listFragment) {
        super(fragmentManager, lifecycle);
        this.fragmentList = listFragment;

    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragmentList.get(position);
    }

    @Override
    public int getItemCount() {
        return fragmentList.size();
    }
}

修改BlankFragment类，这里我们只需要传入一个参数即可，就是对应Fragment的名称。

package cn.edu.nchu.lab3exam02;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


public class BlankFragment extends Fragment {

    private static final String ARG_PARAM1 = "param1";
    View rootView;
    private String mParam1;

    public BlankFragment() {
        // Required empty public constructor
    }

    public static BlankFragment newInstance(String param1) {
        BlankFragment fragment = new BlankFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        if(rootView == null){
            rootView = inflater.inflate(R.layout.fragment_1, container, false);
        }
        initView();
        return rootView;
    }

    //获取布局文件中的文本内容使用传入的参数进行初始化
    private void initView() {
        TextView textView = rootView.findViewById(R.id.text);
        textView.setText(mParam1);
    }
}

在主activity中对Fragment进行初始化，并装入ViewPager中

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    ViewPager2 viewPager;
    Button[]  buttons = new Button[4];
    int current = 0;

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

        buttons[0] = findViewById(R.id.index);
        buttons[0].setOnClickListener(this);
        buttons[1]= findViewById(R.id.info);
        buttons[1].setOnClickListener(this);
        buttons[2] = findViewById(R.id.note);
        buttons[2].setOnClickListener(this);
        buttons[3] = findViewById(R.id.mine);
        buttons[3].setOnClickListener(this);
        initViewPager();
    }

    public void initViewPager(){
        viewPager = findViewById(R.id.view_pager);
        List fragmentList = new LinkedList<>();
        fragmentList.add(BlankFragment.newInstance("home"));
        fragmentList.add(BlankFragment.newInstance("info"));
        fragmentList.add(BlankFragment.newInstance("note"));
        fragmentList.add(MineFragment.newInstance());//这个由于与其它三个Fragment布局结构不一样所以需要新建一个Fragment类进行初始化
        MyFragmentPagerAdapter myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),getLifecycle(),fragmentList);
        viewPager.setAdapter(myFragmentPagerAdapter);
        //监听Fragment的界面变化
        viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
                //其中position为当前Fragment的索引
                changePager(position);
            }
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                super.onPageScrollStateChanged(state);
            }
        });
    }


//为按钮添加点击事件获取当前界面索引切换按钮文字颜色
    @Override
    public void onClick(View view) {
        switch(view.getId()){
            case R.id.index:changePager(0);viewPager.setCurrentItem(0);break;
            case R.id.info:changePager(1);viewPager.setCurrentItem(1);break;
            case R.id.note:changePager(2);viewPager.setCurrentItem(2);break;
            case R.id.mine:changePager(3);viewPager.setCurrentItem(3);break;
        }
    }

    @SuppressLint("ResourceAsColor")
    private void changePager(int position) {
        buttons[current].setTextColor(Color.parseColor("#FFFFFF"));
        current = position;
        switch (position){
            case 0: buttons[current].setTextColor(Color.parseColor("#FC5531")); break;
            case 1: buttons[current].setTextColor(Color.parseColor("#FC5531")); break;
            case 2: buttons[current].setTextColor(Color.parseColor("#FC5531")); break;
            case 3: buttons[current].setTextColor(Color.parseColor("#FC5531")); break;
        }
    }
}

下面对MineFragment进行创建

public class MineFragment extends Fragment {
    private static ListView listView;

    // TODO: Rename and change types of parameters

    public MineFragment() {
        // Required empty public constructor
    }

    // TODO: Rename and change types and number of parameters
    public static MineFragment newInstance() {
        MineFragment fragment = new MineFragment();
        Bundle args = new Bundle();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        //在创建的时候初始化ListView，并返回这个视图进行创建显示
        View fragmentView= inflater.inflate(R.layout.fragment_mine2, container, false);
        listView = (ListView) fragmentView.findViewById(R.id.lv);
        MyAdapter myAdapter = new MyAdapter(fragmentView.getContext());
        listView.setAdapter(myAdapter);
        return fragmentView;
    }
}

对ListView进行适配

public class MyAdapter extends BaseAdapter {
    List list = new LinkedList<>();
    Context context;
    TextView title,content;
    LinearLayout box;

    public MyAdapter(Context context) {
        initList();
        this.context = context;
    }

    public void initList(){
        Row r1 = new Row("昵称","大海");
        Row r2 = new Row("学号","19201123");
        Row r3 = new Row("电话","18279750070");
        Row r4 = new Row("二维码名片","大海");
        Row r5 = new Row("性别","男");
        Row r6 = new Row("生日","1998/01/06");
        Row r7 = new Row("地区","江西-南昌");
        this.list.add(r1);
        this.list.add(r2);
        this.list.add(r3);
        this.list.add(r4);
        this.list.add(r5);
        this.list.add(r6);
        this.list.add(r7);
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Object getItem(int i) {
        return list.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        if(view==null){
            view = LayoutInflater.from(context).inflate(R.layout.item,viewGroup,false);

        }
        title = view.findViewById(R.id.title);
        content = view.findViewById(R.id.content);
        title.setText(list.get(i).getLabel());
        content.setText(list.get(i).getContent());

        if(i==7||i==8){
            box = view.findViewById(R.id.box);
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
            lp.setMargins(0, 20, 0, 0);
            box.setLayoutParams(lp);
        }
        return view;
    }
}

ListView中元素布局文件，直接在XML文件中引入即可

头像圆形显示的类

public class ImageRound extends androidx.appcompat.widget.AppCompatImageView {
    //画笔
    private Paint mPaint;
    //圆形图片半径
    private int mRadius;
    //圆形的缩放比例
    private float mScale;

    public ImageRound(Context context) {
        super(context);
    }

    public ImageRound(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public ImageRound(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //由于是圆形，宽高应保持一致
        int size = Math.min(getMeasuredWidth(), getMeasuredHeight());
        mRadius = size / 2;
        setMeasuredDimension(size, size);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        mPaint = new Paint();
        Drawable drawable = getDrawable();
        if (drawable != null) {
            Bitmap bitmap = drawableToBitmap(getDrawable());
            //初始化BitmapShader，传入bitmap对象
            BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            //计算缩放比例
            mScale = (mRadius * 2.0f) / Math.min(bitmap.getHeight(), bitmap.getWidth());
            Matrix matrix = new Matrix();
            matrix.setScale(mScale, mScale);
            bitmapShader.setLocalMatrix(matrix);
            mPaint.setShader(bitmapShader);

            //画圆形，指定好坐标，半径，画笔
            canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
        } else {
            super.onDraw(canvas);
        }
    }


    
    private Bitmap drawableToBitmap(Drawable drawable) {
        if (drawable instanceof BitmapDrawable) {
            BitmapDrawable bd = (BitmapDrawable) drawable;
            return bd.getBitmap();
        }
        int w = drawable.getIntrinsicWidth();
        int h = drawable.getIntrinsicHeight();
        Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, w, h);
        drawable.draw(canvas);
        return bitmap;
    }
}

参考文章：菜鸟教程