android:viewpager2嵌套的完整例子
一,代码:
xml: activity_frag_page.xml(外层viewpager2)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.FragPageActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.viewpager2.widget.ViewPager2
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fragViewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="200px">
<Button
android:id="@+id/btn1"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="#ff0000"
android:text="按钮一"/>
<Button
android:id="@+id/btn2"
android:layout_width="100dp"
android:layout_height="50dp"
android:text="按钮二"/>
<Button
android:id="@+id/btn3"
android:layout_width="100dp"
android:layout_height="50dp"
android:text="按钮三"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="100px">
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
fragment_home.xml(外层viewpager2)
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff00"
tools:context=".fragment.HomeFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="60dp"
android:textSize="45sp"
android:text="home页面" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="200px">
<Button
android:id="@+id/cbtn1"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="#ff0000"
android:text="分类一"/>
<Button
android:id="@+id/cbtn2"
android:layout_width="100dp"
android:layout_height="50dp"
android:text="分类二"/>
<Button
android:id="@+id/cbtn3"
android:layout_width="100dp"
android:layout_height="50dp"
android:text="分类三"/>
</LinearLayout>
<com.example.okdemo1.lib.NestedScrollableHost
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<androidx.viewpager2.widget.ViewPager2
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/cateViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</com.example.okdemo1.lib.NestedScrollableHost>
</LinearLayout>
<!-- TODO: Update blank fragment layout -->
</FrameLayout>
java:
FragAdapter.java(外层viewpager2)
package com.example.okdemo1.adapter;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import java.util.List;
public class FragAdapter extends FragmentStateAdapter {
private List<Fragment> mFragments;
public FragAdapter(FragmentActivity fa,List<Fragment> fragments) {
super(fa);
mFragments=fragments;
}
@Override
public Fragment createFragment(int position) {
return mFragments.get(position);
}
@Override
public int getItemCount() {
return mFragments.size();
}
}
FragPageActivity.java(外层viewpager2)
package com.example.okdemo1.activity;
import android.annotation.SuppressLint;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
import androidx.viewpager2.widget.ViewPager2;
import com.example.okdemo1.R;
import com.example.okdemo1.adapter.FragAdapter;
import com.example.okdemo1.fragment.HomeFragment;
import com.example.okdemo1.fragment.MessageFragment;
import com.example.okdemo1.fragment.ServiceFragment;
import java.util.ArrayList;
import java.util.List;
public class FragPageActivity extends AppCompatActivity {
private List<Fragment> fragmentList = new ArrayList<>();
private ViewPager2 vp_content;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
EdgeToEdge.enable(this);
setContentView(R.layout.activity_frag_page);
/*
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
return insets;
});
*/
fragmentList.add(new HomeFragment());
fragmentList.add(new MessageFragment());
fragmentList.add(new ServiceFragment());
//fragmentList.add(new UserFragment());
FragAdapter viewPagerAdapter=new FragAdapter(this,fragmentList);//创建适配器对象
vp_content = findViewById(R.id.fragViewPager);
vp_content.setAdapter(viewPagerAdapter); // 设置翻页视图的适配器
vp_content.setCurrentItem(0);
//滑动时的事件回调
vp_content.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// 当页面开始滑动时调用
System.out.println("位置:"+position);
}
@Override
public void onPageSelected(int position) {
// 当页面被选中时调用,position是当前页面的索引
// 此处要选中相应的按钮,标识出滑动到的位置
int currentPage = position;
System.out.println("选中位置:"+position);
setButtonSelected(currentPage);
}
@Override
public void onPageScrollStateChanged(int state) {
// 当页面滑动状态改变时调用,state可以是SCROLL_STATE_IDLE, SCROLL_STATE_DRAGGING, SCROLL_STATE_SETTLING
}
});
//按钮的点击事件, 第一个按钮
Button btn1 = findViewById(R.id.btn1);
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//滑动到第一页
vp_content.setCurrentItem(0,true);
}
});
//按钮的点击事件, 第二个按钮
Button btn2 = findViewById(R.id.btn2);
btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//滑动到第二页
vp_content.setCurrentItem(1,true);
}
});
//按钮的点击事件, 第三个按钮
Button btn3 = findViewById(R.id.btn3);
btn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//滑动到第三页
vp_content.setCurrentItem(2,true);
}
});
}
@SuppressLint("ResourceAsColor")
private void setButtonSelected(int id) {
System.out.println("选中按钮id:"+id);
Button btn1 = findViewById(R.id.btn1);
Button btn2 = findViewById(R.id.btn2);
Button btn3 = findViewById(R.id.btn3);
if (id == 0) {
btn1.setBackgroundColor(Color.parseColor("#FF0000"));
btn2.setBackgroundColor(Color.parseColor("#D3D3D3"));
btn3.setBackgroundColor(Color.parseColor("#D3D3D3"));
} else if (id == 1) {
btn2.setBackgroundColor(Color.parseColor("#FF0000"));
btn1.setBackgroundColor(Color.parseColor("#D3D3D3"));
btn3.setBackgroundColor(Color.parseColor("#D3D3D3"));
} else if (id == 2) {
btn3.setBackgroundColor(Color.parseColor("#FF0000"));
btn2.setBackgroundColor(Color.parseColor("#D3D3D3"));
btn1.setBackgroundColor(Color.parseColor("#D3D3D3"));
}
}
}
CateFragAdapter.java(内层viewpager2)
package com.example.okdemo1.adapter;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import com.example.okdemo1.fragment.HomeFragment;
import java.util.List;
public class CateFragAdapter extends FragmentStateAdapter {
private List<Fragment> mFragments;
//
public CateFragAdapter(HomeFragment fa, List<Fragment> fragments) {
super(fa);
//super(fa);
mFragments=fragments;
}
@Override
public Fragment createFragment(int position) {
return mFragments.get(position);
}
@Override
public int getItemCount() {
return mFragments.size();
}
}
HomeFragment.java (内层viewpager2)
package com.example.okdemo1.fragment;
import android.annotation.SuppressLint;
import android.graphics.Color;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.widget.ViewPager2;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import com.example.okdemo1.R;
import com.example.okdemo1.activity.FragPageActivity;
import com.example.okdemo1.adapter.CateFragAdapter;
import com.example.okdemo1.adapter.FragAdapter;
import java.util.ArrayList;
import java.util.List;
/**
* A simple {@link Fragment} subclass.
* Use the {@link HomeFragment#newInstance} factory method to
* create an instance of this fragment.
*/
public class HomeFragment extends Fragment {
// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private static final String ARG_PARAM1 = "param1";
private static final String ARG_PARAM2 = "param2";
// TODO: Rename and change types of parameters
private String mParam1;
private String mParam2;
private List<Fragment> fragmentList = new ArrayList<>();
private ViewPager2 vp_cate;
private CateFragAdapter cateAdapter;
public HomeFragment() {
// Required empty public constructor
}
/**
* Use this factory method to create a new instance of
* this fragment using the provided parameters.
*
* @param param1 Parameter 1.
* @param param2 Parameter 2.
* @return A new instance of fragment HomeFragment.
*/
// TODO: Rename and change types and number of parameters
public static HomeFragment newInstance(String param1, String param2) {
HomeFragment fragment = new HomeFragment();
Bundle args = new Bundle();
args.putString(ARG_PARAM1, param1);
args.putString(ARG_PARAM2, param2);
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mParam1 = getArguments().getString(ARG_PARAM1);
mParam2 = getArguments().getString(ARG_PARAM2);
}
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_home, container, false);
vp_cate = view.findViewById(R.id.cateViewPager);
fragmentList.add(new Cate1Fragment());
fragmentList.add(new Cate2Fragment());
fragmentList.add(new Cate3Fragment());
cateAdapter=new CateFragAdapter(this,fragmentList);//创建适配器对象
vp_cate.setAdapter(cateAdapter); // 设置翻页视图的适配器
vp_cate.setCurrentItem(0);
// Inflate the layout for this fragment
//return inflater.inflate(R.layout.fragment_home, container, false);
//滑动时的事件回调
vp_cate.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// 当页面开始滑动时调用
System.out.println("位置:"+position);
}
@Override
public void onPageSelected(int position) {
// 当页面被选中时调用,position是当前页面的索引
// 此处要选中相应的按钮,标识出滑动到的位置
int currentPage = position;
System.out.println("选中位置:"+position);
setButtonSelected(view,currentPage);
}
@Override
public void onPageScrollStateChanged(int state) {
// 当页面滑动状态改变时调用,state可以是SCROLL_STATE_IDLE, SCROLL_STATE_DRAGGING, SCROLL_STATE_SETTLING
}
});
//按钮的点击事件, 第一个按钮
Button btn1 = view.findViewById(R.id.cbtn1);
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//滑动到第一页
vp_cate.setCurrentItem(0,true);
}
});
//按钮的点击事件, 第二个按钮
Button btn2 = view.findViewById(R.id.cbtn2);
btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//滑动到第二页
vp_cate.setCurrentItem(1,true);
}
});
//按钮的点击事件, 第三个按钮
Button btn3 = view.findViewById(R.id.cbtn3);
btn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//滑动到第三页
vp_cate.setCurrentItem(2,true);
}
});
return view;
}
@SuppressLint("ResourceAsColor")
private void setButtonSelected(View view,int id) {
System.out.println("选中按钮id:"+id);
Button btn1 = view.findViewById(R.id.cbtn1);
Button btn2 = view.findViewById(R.id.cbtn2);
Button btn3 = view.findViewById(R.id.cbtn3);
if (id == 0) {
btn1.setBackgroundColor(Color.parseColor("#FF0000"));
btn2.setBackgroundColor(Color.parseColor("#D3D3D3"));
btn3.setBackgroundColor(Color.parseColor("#D3D3D3"));
} else if (id == 1) {
btn2.setBackgroundColor(Color.parseColor("#FF0000"));
btn1.setBackgroundColor(Color.parseColor("#D3D3D3"));
btn3.setBackgroundColor(Color.parseColor("#D3D3D3"));
} else if (id == 2) {
btn3.setBackgroundColor(Color.parseColor("#FF0000"));
btn2.setBackgroundColor(Color.parseColor("#D3D3D3"));
btn1.setBackgroundColor(Color.parseColor("#D3D3D3"));
}
}
}
NestedScrollableHost.java(用来包含viewpager2)
package com.example.okdemo1.lib;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewTreeObserver;
import android.widget.FrameLayout;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.viewpager2.widget.ViewPager2;
public class NestedScrollableHost extends FrameLayout {
private ViewPager2 parentViewPager;
private int touchSlop = 0;
private float initialX = 0f;
private float initialY = 0f;
public NestedScrollableHost(@NonNull Context context) {
super(context);
init(context);
}
public NestedScrollableHost(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context);
}
public NestedScrollableHost(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
public NestedScrollableHost(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(context);
}
private void init(Context context){
touchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
View v = (View) getParent();
while (v!=null && !(v instanceof ViewPager2)){
v = (View) v.getParent();
}
parentViewPager = (ViewPager2) v;
getViewTreeObserver().removeOnPreDrawListener(this);
return false;
}
});
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
handleInterceptTouchEvent(ev);
return super.onInterceptTouchEvent(ev);
}
private boolean canChildScroll(int orientation, float delta) {
int direction = (int) -delta;
View child = getChildAt(0);
if (orientation == 0) {
return child.canScrollHorizontally(direction);
} else if (orientation == 1) {
return child.canScrollVertically(direction);
} else {
throw new IllegalArgumentException();
}
}
private void handleInterceptTouchEvent(MotionEvent e) {
if (parentViewPager == null) return;
int orientation = parentViewPager.getOrientation();
// Early return if child can't scroll in same direction as parent
if (!canChildScroll(orientation, -1f) && !canChildScroll(orientation, 1f)) {
return;
}
if (e.getAction() == MotionEvent.ACTION_DOWN) {
initialX = e.getX();
initialY = e.getY();
getParent().requestDisallowInterceptTouchEvent(true);
} else if (e.getAction() == MotionEvent.ACTION_MOVE) {
float dx = e.getX()- initialX;
float dy = e.getY() - initialY;
boolean isVpHorizontal = orientation == ViewPager2.ORIENTATION_HORIZONTAL;
// assuming ViewPager2 touch-slop is 2x touch-slop of child
float scaledDx = Math.abs(dx) * (isVpHorizontal ? .5f : 1f);
float scaledDy = Math.abs(dy) * (isVpHorizontal ? 1f : .5f);
if (scaledDx > touchSlop || scaledDy > touchSlop) {
if (isVpHorizontal == (scaledDy > scaledDx)) {
// Gesture is perpendicular, allow all parents to intercept
getParent().requestDisallowInterceptTouchEvent(false);
} else {
// Gesture is parallel, query child if movement in that direction is possible
if (canChildScroll(orientation, isVpHorizontal ? dx : dy)) {
// Child can scroll, disallow all parents to intercept
getParent().requestDisallowInterceptTouchEvent(true);
} else {
// Child cannot scroll, allow all parents to intercept
getParent().requestDisallowInterceptTouchEvent(false);
}
}
}
}
}}
二,测试效果:

浙公网安备 33010602011771号