آموزش StackView در برنامه نویسی اندروید

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش StackView در برنامه نویسی اندروید می پردازیم SatckView برای arrange کردن یکسری item برای نمایش در حالت خاص استفاده می شود و آیتم ها قابلیت رفتن بروی روی هم را نیز دارند در ادامه ویدیوی زیر را تماشا کنید تا بیشتر با StackView آشنا شوید با ما همراه باشید.

خب مثل همیشه ابتدا یک پروژه جدید ایجاد کنید البته این کار و هم می تونید در پروژه فعلی انجام بدید برای ساخت پروزه از منوی File ⇒ New Android ⇒ Application Project استفاده کنید.
ما در اکتیویتی اصلی کد های زیر را قرار خواهیم داد نام layout ما در اینجا برابر با activity_main.xml است.

<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" >
    <StackView
        android:id="@+id/stackView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:animateLayoutChanges="true" >
    </StackView>
</RelativeLayout>

<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" >

<StackView

android:id="@+id/stackView1"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:animateLayoutChanges="true" >

</StackView>

</RelativeLayout>

چون ما در اینجا آداپتور سفارشی داریم باید شکل ظاهری آن رو هم خودمان درست کنیم کار آداپتور در اینجا قرار دادن متن و عکس است.
پس در همان پوشه layout یک فایل به نام display_item.xml ایجاد کرده و کد های زیر را در آن قرار دهید.

<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" >
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true" />
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_below="@+id/imageView1"
        android:textColor="#FFFFFF"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp" />
</RelativeLayout>

<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" >

<ImageView

android:id="@+id/imageView1"

android:layout_width="200dp"

android:layout_height="200dp"

android:layout_centerHorizontal="true" />

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:layout_below="@+id/imageView1"

android:textColor="#FFFFFF"

android:layout_centerHorizontal="true"

android:layout_marginTop="5dp" />

</RelativeLayout>

شکل ظاهری هر کدام از StackView ها توسط کد بالا ایجاد می شود.
حالا یک فایل به نام Stack_Items.java ایجاد کرده و کد های زیر را در آن قرار دهید.

package ir.programchi;
public class Stack_Items {
	String name;
	Integer image;
	public Stack_Items(String name, Integer image) {
		this.name = name;
		this.image = image;
	}
	public String getName() {
		return name;
	}
	public int getImage() {
		return image;
	}
}

package ir.programchi;

public class Stack_Items {

String name;

Integer image;

public Stack_Items(String name, Integer image) {

this.name = name;

this.image = image;

}

public String getName() {

return name;

}

public int getImage() {

return image;

}

به این کلاس getter و setter میگن.
حالا زمان ایجاد آداپتور است یک فایل جاوا به نام Stack_Adapter.java ایجاد کرده و کد های زیر را در آن قرار دهید.

package ir.programchi;
import java.util.ArrayList;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
public class Stack_Adapter extends BaseAdapter {
	ArrayList<Stack_Items> arrayList;
	LayoutInflater inflater;
	ViewHolder holder = null;
	public Stack_Adapter(Context context, ArrayList<Stack_Items> arrayList) {
		this.arrayList = arrayList;
		this.inflater = LayoutInflater.from(context);
	}
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return arrayList.size();
	}
	@Override
	public Stack_Items getItem(int pos) {
		// TODO Auto-generated method stub
		return arrayList.get(pos);
	}
	@Override
	public long getItemId(int pos) {
		// TODO Auto-generated method stub
		return pos;
	}
	@Override
	public View getView(int pos, View view, ViewGroup parent) {
		if (view == null) {
			view = inflater.inflate(R.layout.display_item, parent, false);
			holder = new ViewHolder();
			holder.text = (TextView) view.findViewById(R.id.textView1);
			holder.image = (ImageView) view.findViewById(R.id.imageView1);
			view.setTag(holder);
		} else {
			holder = (ViewHolder) view.getTag();
		}
		holder.text.setText(arrayList.get(pos).getName());
		holder.image.setBackgroundResource(arrayList.get(pos).getImage());
		return view;
	}
	public class ViewHolder {
		TextView text;
		ImageView image;
	}
}

package ir.programchi;

import java.util.ArrayList;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

public class Stack_Adapter extends BaseAdapter {

ArrayList<Stack_Items> arrayList;

LayoutInflater inflater;

ViewHolder holder = null;

public Stack_Adapter(Context context, ArrayList<Stack_Items> arrayList) {

this.arrayList = arrayList;

this.inflater = LayoutInflater.from(context);

}

@Override

public int getCount() {

// TODO Auto-generated method stub

return arrayList.size();

}

@Override

public Stack_Items getItem(int pos) {

// TODO Auto-generated method stub

return arrayList.get(pos);

}

@Override

public long getItemId(int pos) {

// TODO Auto-generated method stub

return pos;

}

@Override

public View getView(int pos, View view, ViewGroup parent) {

if (view == null) {

view = inflater.inflate(R.layout.display_item, parent, false);

holder = new ViewHolder();

holder.text = (TextView) view.findViewById(R.id.textView1);

holder.image = (ImageView) view.findViewById(R.id.imageView1);

view.setTag(holder);

} else {

holder = (ViewHolder) view.getTag();

}

holder.text.setText(arrayList.get(pos).getName());

holder.image.setBackgroundResource(arrayList.get(pos).getImage());

return view;

}

public class ViewHolder {

TextView text;

ImageView image;

}

و در آخر کد مربوط به MainActivity.java همانند زیر می شود.

38
package com.android_stackview_demo;
import java.util.ArrayList;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.StackView;
public class MainActivity extends ActionBarActivity {
	private static StackView stackView;
	private static ArrayList<Stack_Items> list;
	private static final Integer[] icons = { R.drawable.a, R.drawable.b,
			R.drawable.c, R.drawable.d };
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		stackView = (StackView) findViewById(R.id.stackView1);
		list = new ArrayList<Stack_Items>();
		for (int i = 0; i < icons.length; i++) {
			list.add(new Stack_Items("Item " + i, icons[i]));
		}
		Stack_Adapter adapter = new Stack_Adapter(MainActivity.this, list);
		stackView.setAdapter(adapter);
		adapter.notifyDataSetChanged();
	}
}

package com.android_stackview_demo;

import java.util.ArrayList;

import android.support.v7.app.ActionBarActivity;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

import android.widget.StackView;

public class MainActivity extends ActionBarActivity {

private static StackView stackView;

private static ArrayList<Stack_Items> list;

private static final Integer[] icons = { R.drawable.a, R.drawable.b,

R.drawable.c, R.drawable.d };

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

stackView = (StackView) findViewById(R.id.stackView1);

list = new ArrayList<Stack_Items>();

for (int i = 0; i < icons.length; i++) {

list.add(new Stack_Items("Item " + i, icons[i]));

}

Stack_Adapter adapter = new Stack_Adapter(MainActivity.this, list);

stackView.setAdapter(adapter);

adapter.notifyDataSetChanged();

}

در بالا شما باید 4 تا عکس به نام a,b,c,d در پوشه drawable خودتان داشته باشید. و سپس به سادگی با استفاده از یک آرایه و آداپتوری که درست کردیم داده ها را در satckView قرار می دهیم.

این آموزش هم به پایان رسید.

موفق و موید باشید.

مطالعه بیشتر