如何在constraintlayout中实现可滚动和放大缩小答案

【问题标题】：How to implement scrollable and zoom in and out in constraintlayout如何在constraintlayout中实现可滚动和放大缩小
【发布时间】：2018-04-28 03:34:12
【问题描述】：

现在我有了这样的布局。如你所见，ui里面有三样东西

放大控制
重叠的文字
可移动元素

现在我已经成功实现了整个约束布局的可移动功能和放大、缩小控制。但是，由于文本重叠，我想滚动视图。滚动事件似乎与我的自定义可缩放事件冲突。 我想实现滚动事件以向下滚动重叠的文本，但不知道如何执行此操作。

感谢任何建议或评论。

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.mycompany.newmobileclient.ui.plant_inventory.PlantInventoryActivity">
  <ZoomControls
    android:id="@+id/simpleZoomControl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_centerHorizontal="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />
  <android.support.constraint.ConstraintLayout
    android:id="@+id/plantInventory_container"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:background="@color/worklist_divider_bg"
    app:layout_constraintBottom_toTopOf="@+id/simpleZoomControl"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/plantInventory_content_title">
    <TextView
      android:id="@+id/textView133"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"

      android:layout_marginTop="8dp"
      android:text="@string/sample_plantinventory2"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  </android.support.constraint.ConstraintLayout>
  <TextView
    android:id="@+id/plantInventory_content_title"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="TextView"
    tools:text="Plant Inv Activity1 &amp; Activity2"
    android:padding="4dp"
    style="@style/worklist_label"
    android:background="@color/worklist_divider_bg"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

字符串.xml

<string name="sample_plantinventory2">
        Compatible Product List\n
Code     Description\n
-----    -----------\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
1234  MyCompany ABC1234 HKU (4GE)+ Dickson ABC123 DSL Wi-Fi\n
  </string>

PlantInventoryActivity.java

public class PlantInventoryActivity extends BaseActivity {

  private final float SCALE_RATIO = 0.25f;
  private final float MAX_SCALE_RATIO = 2f;
  private final float MIN_SCALE_RATIO = 1f;
  private ConstraintLayout plantInventoryContainer;
  private TextView plantInventory_content_title;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_plant_inventory);
    plantInventory_content_title = findViewById(R.id.plantInventory_content_title);
    plantInventoryContainer = findViewById(R.id.plantInventory_container);
    ZoomControls zoomControls = findViewById(R.id.simpleZoomControl);
    zoomControls.setOnZoomInClickListener(v -> {
      if (plantInventoryContainer.getScaleX() < MAX_SCALE_RATIO) {
        plantInventoryContainer.setScaleX(plantInventoryContainer.getScaleX() + SCALE_RATIO);
        plantInventoryContainer.setScaleY(plantInventoryContainer.getScaleY() + SCALE_RATIO);
      }
    });
    zoomControls.setOnZoomOutClickListener(v -> {
      if (plantInventoryContainer.getScaleX() > MIN_SCALE_RATIO) {
        plantInventoryContainer.setScaleX(plantInventoryContainer.getScaleX() - SCALE_RATIO);
        plantInventoryContainer.setScaleY(plantInventoryContainer.getScaleY() - SCALE_RATIO);
      }
    });
    zoomControls.bringToFront();
    plantInventory_content_title.bringToFront();
    plantInventoryContainer.setOnTouchListener(new ZoomableListener());


  }
}

ZoomableListener.java

public class ZoomableListener implements OnTouchListener {
  float x = 0;
  float y = 0;
  float dx = 0;
  float dy = 0;

  @Override
  public boolean onTouch(View myView, MotionEvent event) {
    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN: {
        x = event.getX();
        y = event.getY();
        dx = x - myView.getX();
        dy = y - myView.getY();
      }
      break;
      case MotionEvent.ACTION_MOVE: {
        myView.setX(event.getX() - dx);
        myView.setY(event.getY() - dy);
      }
      break;
      case MotionEvent.ACTION_UP: {
        //your stuff
      }
    }
    return true;
  }
}

【问题讨论】：

把你的约束布局放在滚动视图中。
我试过了。但是滚动事件与我的触摸监听器冲突，它会导致用户体验不佳
如果您找到了解决方案，请告诉我。我也有类似的问题。
我尝试使用两个滚动视图和线性布局。由于用户体验和 UI 性能，我不能说这是一个好主意。感谢任何好的建议和建议。

标签： java android xml android-constraintlayout

【解决方案1】：

经过几天的挣扎，我尝试使用水平和垂直滚动视图来实现滚动功能。并使用放大、缩小控件来控制文本大小（而不是文本比例）。我知道它不像 pdf 查看器这样的放大和可移动功能。如果有更好的工作，我会更新它。

在嵌套约束布局编辑器中，您可以像往常一样在设计编辑器中设计项目。

activity.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools">
  <data>

    <variable
      name="viewModel"
      type="ActivityViewModel" />
    <variable
      name="selectedActivity"
      type="String" />

  </data>
  <android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="MyActivity">
    <ZoomControls
      android:id="@+id/simpleZoomControl"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginBottom="8dp"
      android:layout_marginEnd="8dp"
      android:layout_marginRight="8dp"
      android:layout_centerHorizontal="true"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent" />
    <HorizontalScrollView
      android:id="@+id/scrollContainer"
      android:layout_width="0dp"
      android:layout_height="0dp"
      android:layout_marginTop="8dp"
      android:layout_marginBottom="8dp"
      android:fillViewport="true"
      app:layout_constraintBottom_toTopOf="@+id/simpleZoomControl"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintHorizontal_bias="0.0"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/content_title">
      <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
          android:id="@+id/directchild"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:orientation="horizontal">
          <include
            android:id="@+id/included"
            layout="@layout/inner_layout"
            app:viewModel="@{viewModel}" />
        </LinearLayout>
      </ScrollView>
    </HorizontalScrollView>
    <TextView
      android:id="@+id/content_title"
      style="@style/worklist_label"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:padding="4dp"
      android:background="@color/worklist_divider_bg"
      android:text="@{selectedActivity}"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      tools:text=" Inv Activity1 &amp; Activity2" />

  </android.support.constraint.ConstraintLayout>
</layout>

Activity.java

@Override
  protected void onCreate(Bundle savedInstanceState) {
    ...
    ZoomControls zoomControls = binding.simpleZoomControl;
    zoomControls.setOnZoomInClickListener(v -> {
      increaseTextSize(SCALE_RATIO);
    });
    zoomControls.setOnZoomOutClickListener(v -> {
      decreaseTextSize(SCALE_RATIO);
    });
    zoomControls.bringToFront();
   }

@Override
  public void increaseTextSize(float value) {
    int childCount = binding.included.Container.getChildCount();
    for (int i = 0; i < childCount; i++) {
      View view = binding.included.Container.getChildAt(i);
      if (view instanceof TextView) {
        TextView textView = (TextView) view;
        float currentTextSize = textView.getTextSize();
        textView
            .setTextSize(TypedValue.COMPLEX_UNIT_PX, currentTextSize + value);
      }
    }
  }

  @Override
  public void decreaseTextSize(float value) {
    int childCount = binding.included.Container.getChildCount();
    for (int i = 0; i < childCount; i++) {
      View view = binding.included.Container.getChildAt(i);
      if (view instanceof TextView) {
        TextView textView = (TextView) view;
        float currentTextSize = textView.getTextSize();
        textView
            .setTextSize(TypedValue.COMPLEX_UNIT_PX, currentTextSize - value);
      }
    }
  }

【讨论】：