Cara membuat PagedScrollPane pada aplikasi Android menggunakan LibGDX

Hey Gwener's, What's Up!
Jika berbicara tentang scroll tentu sobat sudah cukup familiar dengan istilah ini. Yakni sebuah metoda untuk menampilkan data pada ukuran tertentu namun berisi informasi yang banyak sehingga membutuhkan ruang yang lebih, hal ini bisa diatasi menggunakan scroll tersebut dengan cara menampilkannya secara sebagian dan berubah ketika discroll untuk melihat informasi selanjutnya.

Pada Android sendiri telah disediakan suatu scrollpane. Namun sayangnya scroll hanya fokus pada satu objek tertentu saja, namun bagaimana jika kita ingin membuat beberapa object yang menjadi satu kesatuan sehingga hanya akan bisa discroll jika terdapat beberapa object lain yang memiliki komponen yang serupa pula. Inilah yang disebut dengan istilah pagedscroll. Dengan menggabungkan beberapa objek menjadi satu kesatuan yang dianggap sebagai suatu objek tersendiri, sehingga ketika discroll objek tersebut tikak akan dipisah.

Paged Scrollpane

Apa itu PagedScroll

Seperti yang telah diungkap sebelumnya bahwa, pagedscroll merupakan metoda yang menggabungkan beberapa komponen menjadi satu kesatuan yang tidak dipisahkkan oleh scroll. Misalkan didalam objek terdiri dari sebuah rectangle yang berisi text seperti gambar diatas. Objek itu sebenarnya terdiri dari 2 bagian, jika menggunakan scrollpane biasa 2 objek tersebut akan dianggap berbeda satu sama lain. sehingga kita harus menyatukan kedua onbjek tersebut sehingga menjadi satu objek saja.

Membuat PagedScroll

Untuk menerapkan konsep diatas kita bisa menggunakan sebuah table untuk membuat beberapa objek menjadi satu kesatuan sehingga table-table tersebut akan dibedakan menjadi 1 objek yang berbeda satu sama lain terhadapa scrollpane. Pada LibGDX hal ini pun bisa diterapkan. Selengkapnya sobat bisa menggunakan kode berikut untuk mencobanya.

import com.badlogic.gdx.math.MathUtils;
import com.badlogic.gdx.scenes.scene2d.Actor;
import com.badlogic.gdx.scenes.scene2d.ui.ScrollPane;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.Table;
import com.badlogic.gdx.utils.Array;
import com.esotericsoftware.tablelayout.Cell;
 
public class PagedScrollPane extends ScrollPane {
 
 private boolean wasPanDragFling = false;
 
 private Table content;
 
 public PagedScrollPane () {
  super(null);
  content = new Table();
  content.defaults().space(50);
  setWidget(content);
 }
 
 public PagedScrollPane (Skin skin) {
  super(null, skin);
  content = new Table();
  content.defaults().space(50);
  setWidget(content);
 }
 
 public PagedScrollPane (Skin skin, String styleName) {
  super(null, skin, styleName);
  content = new Table();
  content.defaults().space(50);
  setWidget(content);
 }
 
 public PagedScrollPane (Actor widget, ScrollPaneStyle style) {
  super(null, style);
  content = new Table();
  content.defaults().space(50);
  setWidget(content);
 }
 
 public void addPages (Actor... pages) {
  for (Actor page : pages) {
   content.add(page).expandY().fillY();
  }
 }
 
 public void addPage (Actor page) {
  content.add(page).expandY().fillY();
 }
 
 @Override
 public void act (float delta) {
  super.act(delta);
  if (wasPanDragFling && !isPanning() && !isDragging() && !isFlinging()) {
   wasPanDragFling = false;
   scrollToPage();
  } else {
   if (isPanning() || isDragging() || isFlinging()) {
    wasPanDragFling = true;
   }
  }
 }
 
 @Override
 public void setWidth (float width) {
  super.setWidth(width);
  if (content != null) {
   for (Cell cell : content.getCells()) {
    cell.width(width);
   }
   content.invalidate();
  }
 }
 
 public void setPageSpacing (float pageSpacing) {
  if (content != null) {
   content.defaults().space(pageSpacing);
   for (Cell cell : content.getCells()) {
    cell.space(pageSpacing);
   }
   content.invalidate();
  }
 }
 
 private void scrollToPage () {
  final float width = getWidth();
  final float scrollX = getScrollX();
  final float maxX = getMaxX();
 
  if (scrollX >= maxX || scrollX <= 0) return;
 
  Array pages = content.getChildren();
  float pageX = 0;
  float pageWidth = 0;
  if (pages.size > 0) {
   for (Actor a : pages) {
    pageX = a.getX();
    pageWidth = a.getWidth();
    if (scrollX < (pageX + pageWidth * 0.5)) {
     break;
    }
   }
   setScrollX(MathUtils.clamp(pageX - (width - pageWidth) / 2, 0, maxX));
  }
 }
 
 
}

Pada contoh ini kita akan membuat sebuah objek untuk suatu halaman dan dapat discroll ke kanan atau secara horizontal saja. Sobat bisa memanipulasinya pada fungsi addPage. Jika ingin membuat scroll secara verticall maka sobat harus membuat row baru setiap page ditambahkan pada scrollpane ini. Begitu seterusnya

Demikian cara ini semoga bermanfaat dan bisa diterapkan, untuk informasi tambahan bisa sobat membaca Cara mendapatkan KeyHash untuk aplikasi android