Scrollview dọc và ngang trong Android

Tôi thực sự mệt mỏi khi tìm kiếm một giải pháp cho Scrollview dọc và ngang.

Tôi đọc rằng không có bất kỳ khung nhìn / bố cục nào trong khung triển khai tính năng này, nhưng tôi cần một cái gì đó như thế này:

Tôi cần xác định bố cục bên trong khác, bố trí con phải thực hiện cuộn dọc / ngang để di chuyển.

Ban đầu triển khai một mã di chuyển pixel bố cục theo pixel, nhưng tôi nghĩ đó không phải là cách đúng đắn. Tôi đã thử nó với ScrollView và ngang ScrollView nhưng không có gì hoạt động như tôi muốn, bởi vì nó chỉ thực hiện cuộn dọc hoặc cuộn ngang.

Canvas không phải là giải pháp của tôi vì tôi cần gắn người nghe vào một số yếu tố con.

Tôi có thể làm gì?

Trộn một số gợi ý ở trên và có thể nhận được một giải pháp tốt:

ScrollView tùy chỉnh:

package com.scrollable.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ScrollView;

public class VScroll extends ScrollView {

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

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

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

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return false;
    }
}

Ngang tùy chỉnh Xem:

package com.scrollable.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.HorizontalScrollView;

public class HScroll extends HorizontalScrollView {

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

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

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

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return false;
    }
}

ScrollableImageActivity:

package com.scrollable.view;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.HorizontalScrollView;
import android.widget.ScrollView;

public class ScrollableImageActivity extends Activity {

    private float mx, my;
    private float curX, curY;

    private ScrollView vScroll;
    private HorizontalScrollView hScroll;

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

        vScroll = (ScrollView) findViewById(R.id.vScroll);
        hScroll = (HorizontalScrollView) findViewById(R.id.hScroll);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float curX, curY;

        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:
                mx = event.getX();
                my = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                curX = event.getX();
                curY = event.getY();
                vScroll.scrollBy((int) (mx - curX), (int) (my - curY));
                hScroll.scrollBy((int) (mx - curX), (int) (my - curY));
                mx = curX;
                my = curY;
                break;
            case MotionEvent.ACTION_UP:
                curX = event.getX();
                curY = event.getY();
                vScroll.scrollBy((int) (mx - curX), (int) (my - curY));
                hScroll.scrollBy((int) (mx - curX), (int) (my - curY));
                break;
        }

        return true;
    }

}

cách bố trí:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <com.scrollable.view.VScroll android:layout_height="fill_parent"
        android:layout_width="fill_parent" android:id="@+id/vScroll">
        <com.scrollable.view.HScroll android:id="@+id/hScroll"
            android:layout_width="fill_parent" android:layout_height="fill_parent">
            <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/bg"></ImageView>
        </com.scrollable.view.HScroll>
    </com.scrollable.view.VScroll>

</LinearLayout>

Vì đây dường như là kết quả tìm kiếm đầu tiên trong Google cho "Android vertical + vertical ScrollView", tôi nghĩ tôi nên thêm nó vào đây. Matt Clark đã xây dựng chế độ xem tùy chỉnh dựa trên nguồn Android và dường như nó hoạt động hoàn hảo: ScrollView hai chiều

Coi chừng rằng lớp trong trang đó có lỗi tính toán chiều rộng đường chân trời của khung nhìn. Một sửa chữa của Manuel Hilty là trong các ý kiến:

Giải pháp: Thay thế câu lệnh trên dòng 808 bằng cách sau:

final int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(lp.leftMargin + lp.rightMargin, MeasureSpec.UNSPECIFIED);

Chỉnh sửa: Liên kết không hoạt động nữa nhưng đây là liên kết đến một phiên bản cũ của blogpost .

Tôi tìm thấy một giải pháp tốt hơn.

XML: (design.xml)

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent">
  <FrameLayout android:layout_width="90px" android:layout_height="90px">
    <RelativeLayout android:id="@+id/container" android:layout_width="fill_parent" android:layout_height="fill_parent">        
    </RelativeLayout>
</FrameLayout>
</FrameLayout>

Mã Java:

public class Example extends Activity {
  private RelativeLayout container;
  private int currentX;
  private int currentY;

  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.design);

    container = (RelativeLayout)findViewById(R.id.container);

    int top = 0;
    int left = 0;

    ImageView image1 = ...
    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    layoutParams.setMargins(left, top, 0, 0);               
    container.addView(image1, layoutParams);

    ImageView image2 = ...
    left+= 100;
    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    layoutParams.setMargins(left, top, 0, 0);               
    container.addView(image2, layoutParams);

    ImageView image3 = ...
    left= 0;
    top+= 100;
    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    layoutParams.setMargins(left, top, 0, 0);               
    container.addView(image3, layoutParams);

    ImageView image4 = ...
    left+= 100;     
    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    layoutParams.setMargins(left, top, 0, 0);               
    container.addView(image4, layoutParams);
  }     

  @Override 
  public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN: {
            currentX = (int) event.getRawX();
            currentY = (int) event.getRawY();
            break;
        }

        case MotionEvent.ACTION_MOVE: {
            int x2 = (int) event.getRawX();
            int y2 = (int) event.getRawY();
            container.scrollBy(currentX - x2 , currentY - y2);
            currentX = x2;
            currentY = y2;
            break;
        }   
        case MotionEvent.ACTION_UP: {
            break;
        }
    }
      return true; 
  }
}

Đó là công việc !!!

Nếu bạn muốn tải bố cục hoặc điều khiển khác, cấu trúc là như nhau.

Tôi sử dụng nó và hoạt động tốt:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:id="@+id/ScrollView02" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            xmlns:android="http://schemas.android.com/apk/res/android">
<HorizontalScrollView android:id="@+id/HorizontalScrollView01" 
                      android:layout_width="wrap_content" 
                      android:layout_height="wrap_content">
<ImageView android:id="@+id/ImageView01"
           android:src="@drawable/pic" 
           android:isScrollContainer="true" 
           android:layout_height="fill_parent" 
           android:layout_width="fill_parent" 
           android:adjustViewBounds="true">
</ImageView>
</HorizontalScrollView>
</ScrollView>

Liên kết nguồn ở đây: Android-spa

Giải pháp của tôi dựa trên câu trả lời của Mahdi Hijazi , nhưng không có bất kỳ chế độ xem tùy chỉnh nào:

Bố trí:

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/scrollHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ScrollView 
        android:id="@+id/scrollVertical"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" >

        <WateverViewYouWant/>

    </ScrollView>
</HorizontalScrollView>

Mã (onCreate / onCreateView):

    final HorizontalScrollView hScroll = (HorizontalScrollView) value.findViewById(R.id.scrollHorizontal);
    final ScrollView vScroll = (ScrollView) value.findViewById(R.id.scrollVertical);
    vScroll.setOnTouchListener(new View.OnTouchListener() { //inner scroll listener         
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            return false;
        }
    });
    hScroll.setOnTouchListener(new View.OnTouchListener() { //outer scroll listener         
        private float mx, my, curX, curY;
        private boolean started = false;

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            curX = event.getX();
            curY = event.getY();
            int dx = (int) (mx - curX);
            int dy = (int) (my - curY);
            switch (event.getAction()) {
                case MotionEvent.ACTION_MOVE:
                    if (started) {
                        vScroll.scrollBy(0, dy);
                        hScroll.scrollBy(dx, 0);
                    } else {
                        started = true;
                    }
                    mx = curX;
                    my = curY;
                    break;
                case MotionEvent.ACTION_UP: 
                    vScroll.scrollBy(0, dy);
                    hScroll.scrollBy(dx, 0);
                    started = false;
                    break;
            }
            return true;
        }
    });

Bạn có thể thay đổi thứ tự của các cuộn xem. Chỉ cần thay đổi thứ tự của chúng trong bố trí và trong mã. Và rõ ràng thay vì WthingViewYouWant bạn đặt bố cục / chế độ xem bạn muốn cuộn cả hai hướng.

Tùy chọn # 1: Bạn có thể đưa ra một thiết kế UI mới không yêu cầu cuộn ngang và cuộn dọc.

Tùy chọn # 2: Bạn có thể lấy mã nguồn ScrollViewvà HorizontalScrollView, tìm hiểu cách nhóm Android cốt lõi triển khai các mã đó và tạo BiDirectionalScrollViewtriển khai của riêng bạn .

Tùy chọn # 3: Bạn có thể thoát khỏi các phụ thuộc yêu cầu bạn sử dụng hệ thống tiện ích và vẽ thẳng vào Canvas.

Tùy chọn # 4: Nếu bạn vấp phải một ứng dụng nguồn mở dường như thực hiện những gì bạn tìm kiếm, hãy nhìn xem họ đã làm như thế nào.

Thử cái này

<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:id="@+id/Sview" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        xmlns:android="http://schemas.android.com/apk/res/android">
<HorizontalScrollView 
   android:id="@+id/hview" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content">
<ImageView .......
 [here xml code for image]
</ImageView>
</HorizontalScrollView>
</ScrollView>

do liên kết Two Dimensional Scrollview đã chết nên tôi không thể lấy được nên tôi đã tạo thành phần của riêng mình. Nó xử lý flelling và hoạt động đúng cho tôi. Hạn chế duy nhất là quấn_content có thể không hoạt động đúng cho thành phần đó.

https://gist.github.com/androidseb/9902093

Tôi có một giải pháp cho vấn đề của bạn. Bạn có thể kiểm tra mã ScrollView mà nó chỉ xử lý cuộn dọc và bỏ qua mã ngang và sửa đổi điều này. Tôi muốn có một chế độ xem như một webview, vì vậy ScrollView đã được sửa đổi và nó hoạt động tốt với tôi. Nhưng điều này có thể không phù hợp với nhu cầu của bạn.

Hãy cho tôi biết bạn đang nhắm mục tiêu loại UI nào.

Trân trọng,

Ravi Pandit

Chơi với mã, bạn có thể đặt ngang ngang vào ScrollView. Qua đó, bạn có thể có hai phương thức cuộn trong cùng một chế độ xem.

Nguồn: http://androiddevblog.blogspot.com/2009/12/creating-two-dimensions-scroll-view.html

Tôi hy vọng điều này có thể giúp bạn.

sử dụng cách này tôi đã thử nó tôi đã sửa nó

Đặt tất cả bố cục XML của bạn vào bên trong

<android.support.v4.widget.NestedScrollView 

Tôi đã giải thích điều này trong liên kết dọc recyclerView và ngang recyclerview cuộn cùng nhau