Question

我有以下xml。我从服务器获取一个json对象并解析它们并在屏幕上显示图像。以下xml和实现有效，但我的实现存在问题。

我正在听图像上的触摸事件。如果左侧是触摸事件方向，则显示上一个图像，如果是右侧则显示下一个图像。由于滚动视图中的这个触摸事件，性能明智，它并不令人满意。它不是那么平滑，有时在触摸事件和滚动视图之间会让人感到困惑。

在我看来，我在这里做火箭科学;因此，我开始认为应该有更简单的方法。

<ScrollView
  android:id="@+id/my_scrollview"
  android:layout_below="@id/imageLayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:scrollbars="horizontal"
  android:fillViewport="true">

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

     <FrameLayout
       android:layout_width="match_parent"
       android:layout_height="300dp"
       android:layout_marginBottom="5dp">

        <com.android.volley.toolbox.NetworkImageView
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:src="@drawable/blue"
          android:adjustViewBounds="true"
          android:id="@+id/detailImage"
          android:scaleType="centerCrop"/>

       <RadioGroup
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center_horizontal|bottom"
          android:orientation="horizontal"
          android:id="@+id/radiogroup">
        </RadioGroup>

   </FrameLayout>

  </LinearLayout>
 </ScrollView>

实施

 obj = new JSONObject(jsonObject);
 JSONObject images_JsonObject =  obj.getJSONObject("images");
 numberOfItems =  images_JsonObject.length();
 createRadioButton(numberOfItems);

 // parse json object
 Iterator<String> stringIterable =  images_JsonObject.keys();
 HashMap<String, String> hashMap = new HashMap<>();
 list = new ArrayList<>();

 while (stringIterable.hasNext()){
    String key = stringIterable.next();
    hashMap.put(key, images_JsonObject.getString(key));
    list.add(images_JsonObject.getString(key));
 }

 //initial loading
 loadProductImage(list.get(0));
 radioGroup.check(radioGroup.getChildAt(0).getId());
 // touch event listener
 productImageView.setOnTouchListener(new View.OnTouchListener() {

   private float downX, downY, upX, upY;
    View v;

     @Override
      public boolean onTouch(View v, MotionEvent event) {
        this.v = v;
        switch (event.getAction()) { // Check vertical and horizontal touches
        case MotionEvent.ACTION_DOWN: {
             downX = event.getX();
             downY = event.getY();
             return true;
        }
        case MotionEvent.ACTION_UP: {
             upX = event.getX();
             upY = event.getY();
             float deltaX = downX - upX;
             float deltaY = downY - upY;

        //HORIZONTAL SCROLL
          if (Math.abs(deltaX) > Math.abs(deltaY)) {
                if (deltaX < 0) {
                   this.onLeftToRightSwipe();
                   return true;
                }
                if (deltaX > 0) {
                    this.onRightToLeftSwipe();
                    return true;
                }
           }
         return false;
        }
      }
    return false;
   }

    public void onLeftToRightSwipe() {
     selectedItem = mod(selectedItem - 1, 5);
     radioGroup.check(radioGroup.getChildAt(selectedItem).getId());
     loadProductImage(list.get(selectedItem));
   }

    public void onRightToLeftSwipe() {
      selectedItem = mod(selectedItem + 1, 5);
       radioGroup.check(radioGroup.getChildAt(selectedItem).getId());
       loadProductImage(list.get(selectedItem));
    }
  });


// Add radio button programmatically
 private void createRadioButton(int nImages) {
    final RadioButton[] rb = new RadioButton[nImages];
    radioGroup.removeAllViews();
    for(int i=0; i<nImages; i++){
        rb[i]  = new RadioButton(this);
        radioGroup.addView(rb[i]);
        rb[i].setId(i);
    }
  }

以下是我应用的UI快照。添加单选按钮不是必需的，所有我想给用户留下的印象是，如果他滚动，会有更多图像。

但是，以下快照来自其他应用程序，看起来更标准，工作更流畅，没有滞后，图像之间的过渡非常顺利。

Answer 1

您应该使用ViewPager来水平滚动图像。

Here它是Android文档的参考。

GitHub上的

Here我提供了一个实现此解决方案的示例项目，使用自定义寻呼机指示器和Picasso库来加载图像。

图像页面滚动转换

1 个答案: