Android ViewPager与Fragment联动

Posted 2021-08-11 森然献凉i

新增底部导航栏的联动

在drawable包下新建四个drawable resource file ，我这里分别是

这些底部导航栏图片样式

里面的代码

第一行item是点击时更换的图片，有第二行是正常状态时的图片，我们底部导航栏是四个控件，那四个控件的四个文件都是这样设置，下面只放一个

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/wode_1" android:state_selected="true"/>
    <item android:drawable="@drawable/wode_2"/>
</selector>

底部导航栏的布局文件
bottom_layout.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.viewpager2.widget.ViewPager2
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:id="@+id/id_viewpager">
  </androidx.viewpager2.widget.ViewPager2>

  <include layout="@layout/bottom_layout"></include>

</LinearLayout>

 在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.viewpager2.widget.ViewPager2
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:id="@+id/id_viewpager">
  </androidx.viewpager2.widget.ViewPager2>

  <include layout="@layout/bottom_layout"></include>

</LinearLayout>

更新后的Mainactivity.java

package com.cdw.study7;

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 java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    ViewPager2 viewPager;
    private LinearLayout llChat,llContacts,llFind,llProfile;
    private ImageView ivChat,ivContacts,ivFind,ivProfile,ivCurrent;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initPage();
        initTabView();
    }
    //初始化
    private void initTabView() {
        llChat=findViewById(R.id.id_tab_weixin);
        //监听
        llChat.setOnClickListener(this);
        llContacts=findViewById(R.id.id_tab_contact);
        llContacts.setOnClickListener(this);
        llFind=findViewById(R.id.id_tab_find);
        llFind.setOnClickListener(this);
        llProfile=findViewById(R.id.id_tab_profile);
        llProfile.setOnClickListener(this);

        ivChat=findViewById(R.id.tab_iv_weixin);
        ivContacts=findViewById(R.id.tab_iv_contact);
        ivFind=findViewById(R.id.tab_iv_find);
        ivProfile=findViewById(R.id.tab_iv_profile);

        //默认消息为选中状态
        ivChat.setSelected(true);
        //当前选择的按钮
        ivCurrent=ivChat;

    }

    private void initPage(){
        viewPager=findViewById(R.id.id_viewpager);
        //创建Fragment
        ArrayList<Fragment>fragments=new ArrayList<>();
        fragments.add(BlankFragment.newInstance("微信聊天"));
        fragments.add(BlankFragment.newInstance("通讯录"));
        fragments.add(BlankFragment.newInstance("发现"));
        fragments.add(BlankFragment.newInstance("我"));
        MyFrafgmentPagerAdapter pagerAdapter=new MyFrafgmentPagerAdapter(getSupportFragmentManager(),getLifecycle(),fragments);
        //加载适配器
        viewPager.setAdapter(pagerAdapter);
        //滑动的监听接口
        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);
            }
        });
    }

    //底部tab的位置
    private void changeTab(int position) {
        ivCurrent.setSelected(false);
        switch (position){
            case R.id.id_tab_weixin:
                //点击更改viewPager
                viewPager.setCurrentItem(0);
            case 0:

                ivChat.setSelected(true);
                ivCurrent=ivChat;
                break;
            case R.id.id_tab_contact:
                //点击更改viewPager
                viewPager.setCurrentItem(1);
            case 1:
                ivContacts.setSelected(true);
                ivCurrent=ivContacts;
                break;
            case R.id.id_tab_find:
                //点击更改viewPager
                viewPager.setCurrentItem(2);
            case 2:
                ivFind.setSelected(true);
                ivCurrent=ivFind;
                break;
            case R.id.id_tab_profile:
                //点击更改viewPager
                viewPager.setCurrentItem(3);
            case 3:
                ivProfile.setSelected(true);
                ivCurrent=ivProfile;
                break;
        }

    }

    //点击事件
    @Override
    public void onClick(View view) {
        //点击底部tab的时候则响应
        changeTab(view.getId());

    }
}

效果图

viewpager的滑动会改变底部导航栏，导航栏的点击也会改变viewpager