Android：viewPage+Fragment实现模拟微信首页

一、前言：虽然现在很多已经不这么写了，但是这是最底层的东西，我想我还是要好好理解一下的。这篇代码是模拟微信首页底部按钮和ViewPage的联动。记录一下！！

二、代码理解：

主页面布局

对应的java类

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    public ViewPager2 viewPager;//1.创建viewPage
    private LinearLayout llMessage, llContect, llFind, llMine;
    private ImageView ivMessage, ivContect, ivFind, ivMine, ivCurrent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initPage();//2.viewPage不再是单纯的ui而是混合的，因此要专门定义一个方法来管理ui
        initTabView();//初始化tableView控件
    }

    private void initTabView() {
        llMessage = findViewById(R.id.id_tab_weixin);
        llMessage.setOnClickListener(this);
        llContect = findViewById(R.id.id_tab_contact);
        llContect.setOnClickListener(this);
        llFind = findViewById(R.id.id_tab_find);
        llFind.setOnClickListener(this);
        llFind = findViewById(R.id.id_tab_mine);
        llFind.setOnClickListener(this);

        ivMessage = findViewById(R.id.tab_iv_weixin);
        ivContect = findViewById(R.id.tab_iv_contect);
        ivFind = findViewById(R.id.tab_iv_find);
        ivMine = findViewById(R.id.tab_iv_mine);

        ivMessage.setSelected(true);
        ivCurrent = ivMessage;//保存当前按钮

    }

    private void initPage() {
        viewPager = findViewById(R.id.vp);//3.找到viewPage
        ArrayList fragments = new ArrayList<>();
        fragments.add(BlankFragment.newInstance("微信聊天"));
        fragments.add(BlankFragment.newInstance("通讯录"));
        fragments.add(BlankFragment.newInstance("发现"));
        fragments.add(BlankFragment.newInstance("我"));
        MyFragmentPagerAdapter myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), getLifecycle(), fragments);
        viewPager.setAdapter(myFragmentPagerAdapter);

        //按钮点击触发viewpage页面发生改变
        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);
                changeTab(position);
            }

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

    private void changeTab(int position) {
        ivCurrent.setSelected(false);
        switch (position) {
            case R.id.id_tab_weixin:
            case 0:
                viewPager.setCurrentItem(0);
                ivMessage.setSelected(true);
                ivCurrent = ivMessage;
                break;
            case R.id.id_tab_contact:
            case 1:
                viewPager.setCurrentItem(1);
                ivContect.setSelected(true);
                ivCurrent = ivContect;
                break;
            case R.id.id_tab_find:
            case 2:
                viewPager.setCurrentItem(2);
                ivFind.setSelected(true);
                ivCurrent = ivFind;
                break;
            case R.id.id_tab_mine:
            case 3:
                viewPager.setCurrentItem(3);
                ivMine.setSelected(true);
                ivCurrent = ivMine;
                break;
        }
    }

    @Override
    public void onClick(View view) {
        //当点击底部导航按钮的时候改变viewpage的页面，需要把点击的按钮id传入
        changeTab(view.getId());
    }
}

底部导航栏设计

需要对应的图片资源

在drawable中新建导航底部按钮选择器

首页消息

通讯录按钮选择器

发现按钮选择器

我的按钮选择器

三、运行效果