Hướng dẫn sử dụng Android StackView

Xem thêm các chuyên mục:

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

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:

Xem thêm các chuyên mục: