仿网易新闻客户端头条ViewPager嵌套实例

2020-04-11 12:12:42

字体：大中小

来源：转载

供稿：网友

要点：
1、重写组件public boolean onInterceptTouchEvent(MotionEvent event)方法
2、正确使用requestDisallowInterceptTouchEvent(boolean flag)方法
关于以上两个方法，请大家多看看相关介绍，这里就不在叙述了^_^

接下来上例子：
1、外层ViewPager布局 (假定文件名为viewpager_layout.xml)

复制代码代码如下:

 
<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" > 
<android.support.v4.view.ViewPager 
android:id="@+id/viewpager" 
android:layout_width="fill_parent" 
android:layout_height="300dp" > 
</android.support.v4.view.ViewPager> 
</LinearLayout> 

2、里层ViewPager布局(假定文件名为child_viewpager_layout.xml)

复制代码代码如下:

 
<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:gravity="center" 
android:orientation="vertical" > 
<!--com.android.mylistview.view.MyLayout为自定义的布局，主要是为了重写public boolean onInterceptTouchEvent(MotionEvent event)方法--> 
<com.android.mylistview.view.MyLayout 
android:id="@+id/mylayout" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" > 
<android.support.v4.view.ViewPager 
android:id="@+id/child_viewpager" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:layout_above="@+id/testtextview" > 
</android.support.v4.view.ViewPager> 
<TextView 
android:id="@+id/testtextview" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_alignParentBottom="true" 
android:layout_centerHorizontal="true" 
android:layout_marginTop="10dp" 
android:background="#999999" 
android:padding="20dp" 
android:textColor="@android:color/black" /> 
</com.android.mylistview.view.MyLayout> 
</LinearLayout> 

3、child_viewpager每一页中的内容(假定文件名为child_viewpager_item.xml)

复制代码代码如下:

 
<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:gravity="center" 
android:orientation="vertical" > 
<RelativeLayout 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" > 
<ImageView 
android:id="@+id/imageview" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_centerHorizontal="true" 
android:background="@drawable/ic_launcher" /> 
<TextView 
android:id="@+id/textview" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_alignParentBottom="true" 
android:layout_centerHorizontal="true" /> 
</RelativeLayout> 
</LinearLayout> 

4、以上为全部布局文件，接下来自定义MyLayout布局

复制代码代码如下:

 
public class MyLayout extends RelativeLayout 
{ 
ViewPager child_viewpager; 
float startX; 
/** 
* @param context 
* @param attrs 
*/ 
public MyLayout(Context context, AttributeSet attrs) 
{ 
super(context, attrs); 
} 
//这里是关键 
public boolean onInterceptTouchEvent(MotionEvent event) 
{ 
int action = event.getAction(); 
switch (action) 
{ 
case MotionEvent.ACTION_DOWN://按下 
startX = event.getX(); 
getParent().requestDisallowInterceptTouchEvent(true); 
break; 
//滑动，在此对里层viewpager的第一页和最后一页滑动做处理 
case MotionEvent.ACTION_MOVE: 
if (startX == event.getX()) 
{ 
if (0 == child_viewpager.getCurrentItem() 
|| child_viewpager.getCurrentItem() == child_viewpager 
.getAdapter().getCount() - 1) 
{ 
getParent().requestDisallowInterceptTouchEvent(false); 
} 
} 
//里层viewpager已经是最后一页，此时继续向右滑（手指从右往左滑） 
else if (startX > event.getX()) 
{ 
if (child_viewpager.getCurrentItem() == child_viewpager 
.getAdapter().getCount() - 1) 
{ 
getParent().requestDisallowInterceptTouchEvent(false); 
} 
} 
//里层viewpager已经是第一页，此时继续向左滑（手指从左往右滑） 
else if (startX < event.getX()) 
{ 
if (child_viewpager.getCurrentItem() == 0) 
{ 
getParent().requestDisallowInterceptTouchEvent(false); 
} 
} else 
{ 
getParent().requestDisallowInterceptTouchEvent(true); 
} 
break; 
case MotionEvent.ACTION_UP://抬起 
case MotionEvent.ACTION_CANCEL: 
getParent().requestDisallowInterceptTouchEvent(false); 
break; 
} 
return false; 
} 
//注入里层viewpager 
public void setChild_viewpager(ViewPager child_viewpager) 
{ 
this.child_viewpager = child_viewpager; 
} 
} 

5、最后是主activity

复制代码代码如下:

 
public class TestViewpager extends Activity 
{ 
private ViewPager viewpager; 
@Override 
protected void onCreate(Bundle savedInstanceState) 
{ 
super.onCreate(savedInstanceState); 
setContentView(R.layout.viewpager_layout); 
viewpager = (ViewPager) findViewById(R.id.viewpager); 
LayoutInflater inflater = LayoutInflater.from(this); 
List<View> list = new ArrayList<View>(); 
View view = null, childView = null; 
ViewPager child_viewpager; 
TextView textview, testtextview; 
List<View> childlist = null; 
MyLayout mylayout; 
for (int i = 0; i < 3; i++) 
{ 
view = inflater.inflate(R.layout.child_viewpager_layout, null); 
mylayout = (MyLayout) view.findViewById(R.id.mylayout); 
testtextview = (TextView) view.findViewById(R.id.testtextview); 
testtextview.setText("viewpager：" + i); 
list.add(view); 
child_viewpager = (ViewPager) view 
.findViewById(R.id.child_viewpager); 
//注入里层viewpager 
mylayout.setChild_viewpager(child_viewpager); 
childlist = new ArrayList<View>(); 
for (int j = 0; j < 3; j++) 
{ 
childView = inflater.inflate(R.layout.child_viewpager_item, 
null); 
textview = (TextView) childView.findViewById(R.id.textview); 
textview.setText("view" + i + "：" + j); 
childlist.add(childView); 
child_viewpager.setAdapter(new ViewPagerAdapter(childlist)); 
} 
} 
viewpager.setAdapter(new ViewPagerAdapter(list)); 
} 
} 