Android viewPager2 + fragment 模拟微信首页2(滑动页面标签同步变化,点击标签滑动页面)

可以实现的方式:BottomNavigationView
这里我们不使用BottomNavigationView,手动来写代码

先看一下效果

fragment + viewPager2模拟微信首页2(滑动页面标签同步变化,点击标签滑动页面)

一 步骤

此案例是接着上一个案例继续写的

1 创建一个放底部按钮的layout
2 创建drawable文件,放不同的图片,点击时替换
3 activity_main.xml里放入bottom_layout
    
4 MainActivity.java
    获取底部按钮
    添加点击事件监听
    把页面滑动和标签变化绑定起来
        viewPager.registerOnPageChangeCallback()

二 代码

1 创建一个放底部按钮的layout

bottom_layout.xml

2 创建drawable文件,放不同的图片,点击时替换

 

3 activity_main.xml里放入bottom_layout

4 MainActivity.java

package com.example.viewpager2fragment;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{


    ViewPager2 viewPager;
    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
    private ImageView imageView1,imageView2,imageView3,imageView4,imageCurrent;


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

    private void initBottom() {
        linearLayout1 = findViewById(R.id.bottom1);
        linearLayout2 = findViewById(R.id.bottom2);
        linearLayout3 = findViewById(R.id.bottom3);
        linearLayout4 = findViewById(R.id.bottom4);

        imageView1 = findViewById(R.id.bottom1_icon);
        imageView2 = findViewById(R.id.bottom2_icon);
        imageView3 = findViewById(R.id.bottom3_icon);
        imageView4 = findViewById(R.id.bottom4_icon);

        //添加点击事件监听
        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);
        imageView1.setOnClickListener(this);
        imageView2.setOnClickListener(this);
        imageView3.setOnClickListener(this);
        imageView4.setOnClickListener(this);
        //初始化的时候,第一张图片是选中的
        imageView1.setSelected(true);
        imageCurrent = imageView1;

    }

    //初始化viewPager
    private void initPager() {
        viewPager = findViewById(R.id.viewpager);
        ArrayList fragments =new ArrayList<>();
        fragments.add(BlankFragment1.newInstance("微信聊天"));
        fragments.add(BlankFragment1.newInstance("通讯录"));
        fragments.add(BlankFragment1.newInstance("发现"));
        fragments.add(BlankFragment1.newInstance("我"));
        MyFragmentPagerAdapter myAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),getLifecycle(),fragments);
        viewPager.setAdapter(myAdapter);

        //把页面滑动和标签变化绑定起来
        viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }

            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                //viewPager页面滑动的时候,改变选择的标签
                changeTable(position);
                //点击标签的时候,滑动到对应的页面
                changeTableClick(position);
            }

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

    //viewPager页面滑动的时候,改变选择的标签
    private void changeTable(int position) {
        imageCurrent.setSelected(false);
        switch(position){
            case 0:
                imageView1.setSelected(true);
                imageCurrent = imageView1;
                break;
            case 1:
                imageView2.setSelected(true);
                imageCurrent = imageView2;
                break;
            case 2:
                imageView3.setSelected(true);
                imageCurrent = imageView3;
                break;
            case 3:
                imageView4.setSelected(true);
                imageCurrent = imageView4;
                break;
        }
    }


    @Override
    public void onClick(View v) {
        changeTableClick(v.getId());
    }

    //点击标签的时候,滑动到对应的页面
    private void changeTableClick(int id) {
        switch(id){
            case R.id.bottom1_icon:
                viewPager.setCurrentItem(0);
                break;
            case R.id.bottom2_icon:
                viewPager.setCurrentItem(1);
                break;
            case R.id.bottom3_icon:
                viewPager.setCurrentItem(2);
                break;
            case R.id.bottom4_icon:
                viewPager.setCurrentItem(3);
                break;
        }
    }
}