Android-android ViewFlipper中如何实现每页所有的元素都支持左右滑动?

Android-android ViewFlipper中如何实现每页所有的元素都支持左右滑动?

晚风撩人 发布于 2017-08-19 字数 13920 浏览 1033 回复 2

请输入图片描述

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/green_bg"
android:orientation="vertical" >

<ViewFlipper
android:id="@+id/viewFlipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<LinearLayout
android:id="@+id/ll_pro_details"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/green_bg"
android:orientation="vertical" >

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/textView3"
android:layout_alignBottom="@+id/textView3"
android:layout_alignParentLeft="true"
android:text="&lt;&lt; 评论"
android:textColor="#FFF" />

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="咨询 >>"
android:textColor="#FFF" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/textView3"
android:layout_alignBottom="@+id/textView3"
android:layout_centerHorizontal="true"
android:text="商品详细"
android:textColor="#000" />
</RelativeLayout>

<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="10dip" >

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/black_bg"
android:orientation="vertical"
android:padding="10dip" >

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >

<TextView
android:id="@id/pro_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFF" />

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom" >

<TextView
android:id="@id/pro_code"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFF"
android:textSize="12dip" />
</RelativeLayout>
</LinearLayout>

<TextView
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="@drawable/bg_white_line"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFF" />

<ImageView
android:id="@id/pro_img"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dip"
android:layout_marginTop="10dip" />

<RelativeLayout
android:id="@+id/rl_duihuan"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >

<TextView
android:id="@+id/tv_duihuan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginBottom="10dip"
android:layout_marginTop="10dip"
android:text="加入购物车"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#FFF" />

<TextView
android:id="@+id/tv_attention"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="关注此商品"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#FFF" />

<TextView
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="@drawable/bg_white_line"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFF" />
</RelativeLayout>

<TextView
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="@drawable/bg_white_line"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFF" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="10dip"
android:autoLink="phone"
android:text="联系客服:400-666-1720"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFF"
android:textColorLink="#FFF" />

<TextView
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="@drawable/bg_white_line"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFF" />

<TextView
android:id="@id/pro_brandname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginBottom="5dip"
android:layout_marginTop="5dip"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFF" />

<TextView
android:id="@id/pro_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:autoLink="all"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#FFF" />
</LinearLayout>
</ScrollView>
</LinearLayout>

<LinearLayout
android:id="@+id/ll_pro_ask"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dip" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/textView3"
android:layout_alignBottom="@+id/textView3"
android:layout_alignParentLeft="true"
android:text="&lt;&lt; 详细"
android:textColor="#FFF" />

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="评论 >>"
android:textColor="#FFF" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/textView3"
android:layout_alignBottom="@+id/textView3"
android:layout_centerHorizontal="true"
android:text="商品咨询"
android:textColor="#000" />
</RelativeLayout>
</LinearLayout>

<LinearLayout
android:id="@+id/ll_pro_comment"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/textView3"
android:layout_alignBottom="@+id/textView3"
android:layout_alignParentLeft="true"
android:text="&lt;&lt; 咨询"
android:textColor="#FFF" />

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="详细 >>"
android:textColor="#FFF" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/textView3"
android:layout_alignBottom="@+id/textView3"
android:layout_centerHorizontal="true"
android:text="商品评论"
android:textColor="#000" />
</RelativeLayout>
</LinearLayout>
</ViewFlipper>

</LinearLayout>

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

晚风撩人 2017-10-14 2 楼

从你的view来看,不需要用viewFilpper来处理左右滚动的问题。
建议采用viewpager,每个页面作为一个fragment,用adapter将各个页面整合进去。

晚风撩人 2017-10-12 1 楼

你的问题可能没有描述清楚,但是这类问题基本是event流程没搞清楚。

你可以把处理手势加在最外面,或者每一个view做一个手势来处理。也可以拦截或者不拦截。

Activity代码如下:

public class MainActivity extends Activity implements OnTouchListener {

private ViewFlipper viewFlipper;

// 左右滑动时手指按下的X坐标
private float touchDownX;
// 左右滑动时手指松开的X坐标
private float touchUpX;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

viewFlipper = (ViewFlipper) findViewById(R.id.myViewFilpper);
viewFlipper.setOnTouchListener(this);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {

case MotionEvent.ACTION_DOWN :
touchDownX = event.getX();
return true;

case MotionEvent.ACTION_UP :
touchUpX = event.getX();
change();
return false;

case MotionEvent.ACTION_MOVE :
return true;
}
return false;
}

private void change() {
if (touchUpX - touchDownX > 100) {
// 显示下一个View
viewFlipper.showPrevious();

} else if (touchDownX - touchUpX > 100) {
// 显示前一个View
viewFlipper.showNext();
}
}

}

Layout code flow

<RelativeLayout 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" >

<ViewFlipper
android:id="@+id/myViewFilpper"
android:layout_width="match_parent"
android:layout_height="match_parent">

<include
android:id="@+id/layout1"
layout="@layout/linearlayout_01"/>

<include
android:id="@+id/layout2"
layout="@layout/linearlayout_02"/>

</ViewFlipper>

</RelativeLayout>

included layout is your linear layout content