Hướng dẫn và ví dụ Android StackView
Xem thêm các chuyên mục:

Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.


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.
