Hướng dẫn sử dụng Android StackView
Xem thêm các chuyên mục:
Hình ảnh dưới đây là một minh họa về StackView:

Một ví dụ về StackView mà bạn có thể xem trong tài liệu này:


- TODO - Cần viết chém gió thêm ở đây. (Viết sau).
Tạo một project có tên AndroidStackView:

- Name: AndroidStackView
- Package name: org.o7planning.androidstackview


Bạn cần một vài ảnh tham gia vào ví dụ:
image1.png | |
image2.png | |
image3.png | |
image4.png | |
image5.png |
Copy các file ảnh trên vào thư mục drawable của project.



Thêm file layout để thiết kế layout cho StackItem:



Thiết kế giao diện cho StackItem:

stack_item.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.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"> <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="115sp" android:layout_marginTop="8dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/ic_launcher_foreground" tools:ignore="VectorDrawableCompat" /> <TextView android:id="@+id/textView" android:layout_width="0dp" android:layout_height="29dp" android:layout_marginStart="8dp" android:layout_marginLeft="8dp" android:layout_marginTop="8dp" android:layout_marginEnd="8dp" android:layout_marginRight="8dp" android:gravity="center" android:text="TextView" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/imageView" /> </androidx.constraintlayout.widget.ConstraintLayout>
Giao diện ứng dụng:

activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.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=".MainActivity"> <StackView android:id="@+id/stackView" android:layout_width="0dp" android:layout_height="201dp" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="8dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:orientation="horizontal" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/stackView"> <Space android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> <Button android:id="@+id/button_previous" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0" android:text="Previous" /> <Button android:id="@+id/button_next" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0" android:text="Next" /> <Space android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> </LinearLayout> </androidx.constraintlayout.widget.ConstraintLayout>
StackItem.java
package org.o7planning.androidstackview; public class StackItem { private String itemText; // "image1","image2",.. private String imageName; public StackItem(String text, String imageName) { this.imageName = imageName; this.itemText = text; } public String getImageName() { return imageName; } public String getItemText() { return itemText; } }
StackAdapter.java
package org.o7planning.androidstackview; import android.content.Context; import android.graphics.Color; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.TextView; import java.util.List; public class StackAdapter extends ArrayAdapter<StackItem> { private List<StackItem> items; private Context context; public StackAdapter(Context context, int textViewResourceId, List<StackItem> objects) { super(context, textViewResourceId, objects); this.items = objects; this.context = context; } public View getView(int position, View convertView, ViewGroup parent) { View itemView = convertView; if (itemView == null) { LayoutInflater layoutInflater = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); itemView = layoutInflater.inflate(R.layout.stack_item, null); } StackItem stackItem = items.get(position); if(stackItem== null) { Log.i("MyLog", "stackItem at " + position + " is null!!!"); return itemView; } // TextView defined in the stack_item.xml TextView textView = (TextView) itemView.findViewById(R.id.textView); // ImageView defined in the stack_item.xml ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView); textView.setText(stackItem.getItemText()); // "image1", "image2",.. String imageName= stackItem.getImageName(); int resId= this.getDrawableResIdByName(imageName); imageView.setImageResource(resId); imageView.setBackgroundColor(Color.rgb(211,204,188)); return itemView; } // Find Image ID corresponding to the name of the image (in the drawable folder). public int getDrawableResIdByName(String resName) { String pkgName = context.getPackageName(); // Return 0 if not found. int resID = context.getResources().getIdentifier(resName, "drawable", pkgName); Log.i("MyLog", "Res Name: " + resName + "==> Res ID = " + resID); return resID; } }
MainActivity.java
package org.o7planning.androidstackview; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.graphics.Color; import android.view.View; import android.widget.Button; import android.widget.StackView; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private StackView stackView; private Button buttonPrevious; private Button buttonNext; private final String[] IMAGE_NAMES= {"image1","image2", "image3", "image4","image5"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); this.stackView = (StackView) findViewById(R.id.stackView); this.buttonNext =(Button) findViewById(R.id.button_next); this.buttonPrevious= (Button) findViewById(R.id.button_previous); List<StackItem> items = new ArrayList<StackItem>(); for(String imageName: IMAGE_NAMES) { items.add(new StackItem(imageName+".png", imageName)); } StackAdapter adapt = new StackAdapter(this, R.layout.stack_item, items); stackView.setAdapter(adapt); stackView.setHorizontalScrollBarEnabled(true); stackView.setBackgroundColor(Color.rgb(230, 255, 255)); buttonNext.setOnClickListener(new Button.OnClickListener() { @Override public void onClick(View v) { stackView.showNext(); } }); buttonPrevious.setOnClickListener(new Button.OnClickListener(){ @Override public void onClick(View v) { stackView.showPrevious(); } }); } }
Chạy ứng dụng:




Tôi không biết tại sao, nhưng StackView không có sẵn trên Palette của cửa sổ thiết kế (Android Studio 3.6.x), vì vậy, có thể bạn phải thêm đoạn mã XML dưới đây vào main_activity.xml để có được StackView trên giao diện.
<StackView android:layout_width="100dp" android:layout_height="100dp" tools:layout_editor_absoluteX="16dp" tools:layout_editor_absoluteY="16dp" />


Sét đặt ID, Text cho các thành phần trên giao diện.
