Hướng dẫn sử dụng Android StackView
Công ty Vĩnh Cửu tuyển dụng lập trình viên Java

1- Android StackView là gì?

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).

2- Ví dụ với Android StackView

Tạo một project có tên 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"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/image1"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_gravity="center_horizontal" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="@android:color/holo_blue_dark"
        android:textStyle="bold"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_gravity="center_horizontal" />

</LinearLayout>
Giao diện ứng dụng:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Stack View"
        android:layout_marginTop="31dp"
        android:textColor="#336633"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_gravity="center"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/textView" />

    <StackView
        android:id="@+id/stackView"
        android:layout_width="match_parent"
        android:layout_height="234dp"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="0dp"
        android:layout_alignParentTop="true"
        android:layout_marginTop="88dp">
    </StackView>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Previous"
        android:id="@+id/button_previous"
        android:layout_below="@+id/stackView"
        android:layout_alignRight="@+id/textView"
        android:layout_alignEnd="@+id/textView"
        android:layout_marginRight="44dp"
        android:layout_marginEnd="44dp"
        android:layout_marginTop="31dp" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Next"
        android:id="@+id/button_next"
        android:layout_alignTop="@+id/button_previous"
        android:layout_alignLeft="@+id/textView"
        android:layout_alignStart="@+id/textView"
        android:layout_marginLeft="57dp"
        android:layout_marginStart="57dp" />

</RelativeLayout>
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) {
           // TextView định nghĩa trên stack_item.xml
           TextView textView = (TextView) itemView.findViewById(R.id.textView);
           // ImageView định nghĩa trên stack_item.xml
           ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);


           if (textView != null) {
               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;
   }

 
   // Tìm ID của Image ứng với tên của ảnh (Trong thư mục drawable).
   public int getDrawableResIdByName(String resName)  {
       String pkgName = context.getPackageName();
 
       // Trả về 0 nếu không tìm thấy.
       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 android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.StackView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity {

    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: