实现步骤:
第一步:添加ViewPager2依赖
implementation 'androidx.viewpager2:viewpager2:1.0.0'
第二步:页面布局activity_main.xml
第三步:定义一个Fragment
布局文件fragment_blank.xml
Fragment.java
package com.example.wecharpage;
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_TEXT = "param1";
private View rootView;
private String mTextString;
public BlankFragment() {
}
//改变值
public static BlankFragment newInstance(String param1) {
BlankFragment fragment = new BlankFragment();
Bundle args = new Bundle();
args.putString(ARG_TEXT, param1);
fragment.setArguments(args);
return fragment;
}
//取值
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mTextString = getArguments().getString(ARG_TEXT);
}
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
if(rootView==null){
rootView = inflater.inflate(R.layout.fragment_blank, container, false);
}
initView();
return rootView;
}
private void initView() {
TextView textView = rootView.findViewById(R.id.tv);
textView.setText(mTextString);
}
}
第四步:下方按钮布局文件(bottom_layout.xml )
定义外部按钮选中/未选中样式(按钮图标素材来自:iconfont-阿里巴巴矢量图标库)
tab_weixin.xml(微信)
tab_contact.xml(通讯录)
tab_find.xml(发现)
tab_profile.xml(我)
然后在activity_main.xml布局文件中,引入按钮布局文件
......
......
第五步:配置适配规则MyFragmentPagerAdapter.java
package com.example.wecharpage;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import java.util.ArrayList;
import java.util.List;
//适配Fragment
public class MyFragmentPagerAdapter extends FragmentStateAdapter {
//用来存放fragment
List fragmentList=new ArrayList<>();
public MyFragmentPagerAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle,List fragments) {
super(fragmentManager, lifecycle);
this.fragmentList=fragments;
}
//拿到fragment
@NonNull
@Override
public Fragment createFragment(int position) {
return fragmentList.get(position);
}
//fragment总大小
@Override
public int getItemCount() {
return fragmentList.size();
}
}
第六步:MainActivity.java
package com.example.wecharpage;
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
ViewPager2 viewPager2;
//获取下标LinearLayout布局
private LinearLayout llChat,llContact,llFind,llProfile;
//获取下标图片ImageView
private ImageView ivChat,ivContact,ivFind,ivProfile,ivCurrent;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//适配
initPager();
//初始化布局文件
initTableView();
}
private void initTableView() {
//初始化LinearLayout
llChat=findViewById(R.id.id_tab_weixin);
//点击事件
llChat.setOnClickListener(this);
llContact=findViewById(R.id.id_tab_contact);
//点击事件
llContact.setOnClickListener(this);
llFind=findViewById(R.id.id_tab_find);
//点击事件
llFind.setOnClickListener(this);
llProfile=findViewById(R.id.id_tab_profile);
//点击事件
llProfile.setOnClickListener(this);
//初始化ImageView
ivChat=findViewById(R.id.tab_iv_weixin);
//默认选中微信图标
ivChat.setSelected(true);
//赋值给ivCurrent
ivCurrent=ivChat;
ivContact=findViewById(R.id.tab_iv_contact);
ivFind=findViewById(R.id.tab_iv_find);
ivProfile=findViewById(R.id.tab_iv_profile);
}
private void initPager() {
//获取viewPager2
viewPager2=findViewById(R.id.viewpage);
//显示的文字
ArrayList fragments=new ArrayList<>();
fragments.add(BlankFragment.newInstance("微信聊天"));
fragments.add(BlankFragment.newInstance("通讯录"));
fragments.add(BlankFragment.newInstance("发现"));
fragments.add(BlankFragment.newInstance("我"));
//适配
MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), getLifecycle(), fragments);
//传入viewPager2
viewPager2.setAdapter(adapter);
viewPager2.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);
changTab(position);
}
@Override
public void onPageScrollStateChanged(int state) {
super.onPageScrollStateChanged(state);
}
}
);
}
//改变下标图标选中和不选中
private void changTab(int position) {
//取消上一个选中
ivCurrent.setSelected(false);
switch (position){
case R.id.id_tab_weixin:
viewPager2.setCurrentItem(0);
case 0:
ivChat.setSelected(true);
ivCurrent=ivChat;
break;
case R.id.id_tab_contact:
viewPager2.setCurrentItem(1);
case 1:
ivContact.setSelected(true);
ivCurrent=ivContact;
break;
case R.id.id_tab_find:
viewPager2.setCurrentItem(2);
case 2:
ivFind.setSelected(true);
ivCurrent=ivFind;
break;
case R.id.id_tab_profile:
viewPager2.setCurrentItem(3);
case 3:
ivProfile.setSelected(true);
ivCurrent=ivProfile;
break;
}
}
//点击
@Override
public void onClick(View view) {
changTab(view.getId());
}
}
目录结构
效果
20220814153800