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

WordPress 开发 WordPress 开发 主题:1098 回复:2322

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

晚风撩人 发布于 2017-08-19 字数 13920 浏览 991 回复 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>

发布评论

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

支持 Markdown 语法,需要帮助?

评论(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 &gt; 100) {
        // 显示下一个View 
        viewFlipper.showPrevious(); 

    } else if (touchDownX - touchUpX &gt; 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" >

&lt;ViewFlipper 
    android:id="@+id/myViewFilpper"
    android:layout_width="match_parent"
    android:layout_height="match_parent"&gt;

    &lt;include 
        android:id="@+id/layout1"
        layout="@layout/linearlayout_01"/&gt;

    &lt;include 
        android:id="@+id/layout2"
        layout="@layout/linearlayout_02"/&gt;

&lt;/ViewFlipper&gt;

</RelativeLayout>

included layout is your linear layout content