constraintlayout에서 스크롤 및 확대/축소를 구현하는 방법

이제 이와 같은 레이아웃이 있습니다. 당신이 볼 때, UI 내부 아웃 제어에constraintlayout에서 스크롤 및 확대/축소를 구현하는 방법

줌 세 가지가
움직이는 요소는

는 지금은 성공적으로 이동 기능을 구현 한

전체 제약 레이아웃 및 확대, 축소 제어 그러나 텍스트가 겹쳐 있으므로보기를 스크롤 싶어요. 스크롤 이벤트가 내 맞춤 확대/축소 이벤트와 충돌하는 것 같습니다. 겹쳐진 텍스트를 아래로 스크롤하기 위해 scroll 이벤트를 구현하고 싶지만이를 수행하는 방법을 모릅니다.

모든 조언이나 의견에 감사드립니다.

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>

strings.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; 
    } 
}

출처

2017-11-15 Long Ranger

있는 ScrollView에 제약 레이아웃을 넣습니다. – Dilip

나는 노력했다. 하지만 스크롤 이벤트가 내 터치 수신자와 충돌, 그것은 나쁜 사용자 경험을 종료합니다 –

당신이 이것에 대한 해결책을 찾으면 알려 주시기 바랍니다. 나는 비슷한 문제가있다. –

며칠 동안 고민 끝에 스크롤 기능을 구현하기 위해 가로 및 세로 스크롤보기를 사용하려고했습니다. 확대/축소를 사용하여 텍스트 크기 대신 텍스트 크기를 제어 할 수 있습니다. 나는 그것이 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); 
     } 
    } 
    }

출처

2017-11-21 01:51:35

constraintlayout에서 스크롤 및 확대/축소를 구현하는 방법

답변

관련 문제