android 可以上下左右滑动的界面布局

1.我使用的是ScrollView嵌套HorizontalScrollView让ScrollView负责上下滑动HorizontalScrollView负责左右滑动
2.以下代码提供了思路和完成手段,请根据具体业务去进行修改,我试过使用recyclerview进行自定义,发现一旦有了复杂业务之后会掉帧卡顿所以使用了这种方法

XML布局

<?xml version="1.0" encoding="utf-8"?>

    <test.smartonet.com.myapplication.PagerScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <HorizontalScrollView
                android:id="@+id/hor"
                android:layout_width="match_parent"
                android:background="#e1f1f1"
                android:layout_height="160dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center|left"
                    android:gravity="center"
                    android:orientation="horizontal">
                    <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A1"/> <TextView
                    android:layout_width="160dp"
                    android:layout_height="60dp"
                    android:gravity="center"
                    android:text="A2"/> <TextView
                    android:layout_width="160dp"
                    android:layout_height="60dp"
                    android:gravity="center"
                    android:text="A3"/> <TextView
                    android:layout_width="160dp"
                    android:layout_height="60dp"
                    android:gravity="center"
                    android:text="A4"/> <TextView
                    android:layout_width="160dp"
                    android:layout_height="60dp"
                    android:gravity="center"
                    android:text="A5"/><TextView
                    android:layout_width="160dp"
                    android:layout_height="60dp"
                    android:gravity="center"
                    android:text="A6"/><TextView
                    android:layout_width="160dp"
                    android:layout_height="60dp"
                    android:gravity="center"
                    android:text="A1"/> <TextView
                    android:layout_width="160dp"
                    android:layout_height="60dp"
                    android:gravity="center"
                    android:text="A2"/> <TextView
                    android:layout_width="160dp"
                    android:layout_height="60dp"
                    android:gravity="center"
                    android:text="A3"/> <TextView
                    android:layout_width="160dp"
                    android:layout_height="60dp"
                    android:gravity="center"
                    android:text="A4"/> <TextView
                    android:layout_width="160dp"
                    android:layout_height="60dp"
                    android:gravity="center"
                    android:text="A5"/><TextView
                    android:layout_width="160dp"
                    android:layout_height="60dp"
                    android:gravity="center"
                    android:text="A6"/>
                </LinearLayout>

            </HorizontalScrollView>



            <HorizontalScrollView
                android:id="@+id/hor1"
                android:layout_width="match_parent"
                android:scrollbars="none"
                android:background="#a2f2f2"
                android:layout_height="160dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center|left"
                    android:gravity="center"
                    android:orientation="horizontal">
                    <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A1"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A2"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A3"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A4"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A5"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A6"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A1"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A2"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A3"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A4"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A5"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A6"/>
                </LinearLayout>

            </HorizontalScrollView>
  <HorizontalScrollView
                android:id="@+id/hor2"
                android:layout_width="match_parent"
                android:scrollbars="none"
                android:background="#a2a2f2"
                android:layout_height="160dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center|left"
                    android:gravity="center"
                    android:orientation="horizontal">
                    <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A1"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A2"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A3"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A4"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A5"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A6"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A1"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A2"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A3"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A4"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A5"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A6"/>
                </LinearLayout>

            </HorizontalScrollView>


            <HorizontalScrollView
                android:id="@+id/hor3"
                android:layout_width="match_parent"
                android:scrollbars="none"
                android:background="#f3f3f3"
                android:layout_height="160dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center|left"
                    android:gravity="center"
                    android:orientation="horizontal">
                    <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A1"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A2"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A3"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A4"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A5"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A6"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A1"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A2"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A3"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A4"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A5"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A6"/>
                </LinearLayout>

            </HorizontalScrollView>
            <HorizontalScrollView
                android:id="@+id/hor4"
                android:layout_width="match_parent"
                android:scrollbars="none"
                android:background="#a4f4f4"
                android:layout_height="200dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center|left"
                    android:gravity="center"
                    android:orientation="horizontal">
                    <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A1"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A2"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A3"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A4"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A5"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A6"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A1"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A2"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A3"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A4"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A5"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A6"/>
                </LinearLayout>

            </HorizontalScrollView>

            <HorizontalScrollView
                android:id="@+id/hor5"
                android:layout_width="match_parent"
                android:scrollbars="none"
                android:background="#f5f5f5"
                android:layout_height="200dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center|left"
                    android:gravity="center"
                    android:orientation="horizontal">
                    <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A1"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A2"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A3"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A4"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A5"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A6"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A1"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A2"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A3"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A4"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A5"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A6"/>
                </LinearLayout>

            </HorizontalScrollView>

            <HorizontalScrollView
                android:id="@+id/hor6"
                android:layout_width="match_parent"
                android:scrollbars="none"
                android:background="#a5f5f5"
                android:layout_height="200dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center|left"
                    android:gravity="center"
                    android:orientation="horizontal">
                    <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A1"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A2"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A3"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A4"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A5"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A6"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A1"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A2"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A3"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A4"/> <TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A5"/><TextView
                        android:layout_width="160dp"
                        android:layout_height="60dp"
                        android:gravity="center"
                        android:text="A6"/>
                </LinearLayout>

            </HorizontalScrollView>

        </LinearLayout>

    </test.smartonet.com.myapplication.PagerScrollView>

mainAvtivity的代码

package test.smartonet.com.myapplication;

import android.annotation.SuppressLint;
import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.ScrollView;
import android.widget.TextView;
import android.widget.Toast;

import org.w3c.dom.Text;

import java.lang.reflect.Array;
import java.util.ArrayList;
import java.util.List;

/**
 * zhaohan creat 2019/3/6
 */
public class MainActivity extends AppCompatActivity {
    String TAG = "主程序";
    float mPosX;
    float mPosY;
    float mCurPosX;
    float mCurPosY;
    int offset=10;//偏移量
    int friction = 10;//摩擦力
    final List<HorizontalScrollView> list = new ArrayList();

    @SuppressLint("ClickableViewAccessibility")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final PagerScrollView scrollView = findViewById(R.id.main);
        list.add((HorizontalScrollView) findViewById(R.id.hor));
        list.add((HorizontalScrollView) findViewById(R.id.hor1));
        list.add((HorizontalScrollView) findViewById(R.id.hor2));
        list.add((HorizontalScrollView) findViewById(R.id.hor3));
        list.add((HorizontalScrollView) findViewById(R.id.hor4));
        list.add((HorizontalScrollView) findViewById(R.id.hor5));
        list.add((HorizontalScrollView) findViewById(R.id.hor6));



        for(HorizontalScrollView horizontalScrollView:list){
            horizontalScrollView.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    switch (event.getAction()) {
                        case MotionEvent.ACTION_DOWN:
                            mPosX = event.getX();
                            mPosY = event.getY();
                            Log.w(TAG,mPosY+"");
                            break;
                        case MotionEvent.ACTION_MOVE:
                            mCurPosX = event.getX();
                            mCurPosY = event.getY();
                        case MotionEvent.ACTION_UP:
                            if (mCurPosX - mPosX > 0 && (Math.abs(mCurPosX - mPosX) > offset)) {
                                int speed = 10;//速度
                                int distance = 20;//滑动距离
                                if((Math.abs(mCurPosX - mPosX))>50){
                                    speed = (int) Math.abs(mCurPosX - mPosX)/friction;
                                    distance = (int) Math.abs(mCurPosX - mPosX)/3;//滑动距离
                                }
                                //向右滑動
                                Log.w(TAG,"向右滑动了!");
                                while(distance>0) {
                                    distance = distance - speed;
                                    for(HorizontalScrollView horizontalScrollView:list){
                                        horizontalScrollView.smoothScrollBy(distance, 0);
                                    }
                                }
                                return true;//true为屏蔽范围内的其他滑动监听
                            } else if (mCurPosX - mPosX < 0 && (Math.abs(mCurPosX - mPosX) > offset)) {
                                int speed = 10;//速度
                                int distance = 20;//滑动距离
                                if((Math.abs(mCurPosX - mPosX))>50){
                                    speed = (int) Math.abs(mCurPosX - mPosX)/friction;
                                    distance = (int) Math.abs(mCurPosX - mPosX)/3;//滑动距离
                                }
                                //向左滑动
                                Log.w(TAG,"向左滑动了!");
                                //改为滑动
                                while(distance>0){
                                    distance=distance-speed;
                                    for(HorizontalScrollView horizontalScrollView:list){
                                        horizontalScrollView.smoothScrollBy(-distance,0 );
                                    }
                                }
                                return true;//true为屏蔽范围内的其他滑动监听
                            }
                            break;
                    }
                    return true;//true为屏蔽范围内的其他滑动监听
                }
            });
        }
    }
}

class PagerScrollView extends ScrollView {

    private float xDistance, yDistance, xLast, yLast;

    public PagerScrollView(Context context) {
        super(context);
    }

    public PagerScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public PagerScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                xDistance = yDistance = 0f;
                xLast = ev.getX();
                yLast = ev.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                final float curX = ev.getX();
                final float curY = ev.getY();

                xDistance += Math.abs(curX - xLast);
                yDistance += Math.abs(curY - yLast);
                xLast = curX;
                yLast = curY;

                /**
                 * X轴滑动距离大于Y轴滑动距离,也就是用户横向滑动时,返回false,ScrollView不处理这次事件,
                 * 让子控件中的TouchEvent去处理,所以横向滑动的事件交由ViewPager处理,
                 * ScrollView只处理纵向滑动事件
                 */
                if (xDistance > yDistance) {
                    return false;
                }
        }

        return super.onInterceptTouchEvent(ev);
    }
}

猜你喜欢

转载自blog.csdn.net/zhaohan___/article/details/88225560