آموزش Multilevel Expandable ListView در اندروید

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش Multilevel Expandable ListView در اندروید می پردازیم قبلتر آموزش Expandable ListView را برای شما قرار داده بودیم در امروز در صدد آمدیم تا آموزش Multilevel Expandable ListView یا listview هایی چند طبقه (چند منظوره ) را برای شما قرار دهیم در ادامه می توانید پیش نمایش از Multilevel Expandable ListView را مشاهده کرده تا درک آن برای شما راحت تر باشد در ادامه با ما همراه باشید.
 

اگر عکس بالا را نگاه کنید متوجه می شوید که Listview به دو Child های تو در تو تقسیم شده است یعنی اولی Group دومی Child و سومی Child درون Child دوم به مثال زیر توجه کنید.

• رنگ
  • نام رنگ
    • رنگ قرمز

ابتدا فایل زیر را دانلود کرده و در پوشه drawable قرار دهید. این فایل شامل عکس هایی است که در برنامه استفاده شده است.
لینک دانلود
وارد پوشه layout شده و یک فایل به نام row_first.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:background="@android:color/white"
    android:orientation="vertical" >
    <RelativeLayout
        android:id="@+id/linearFirst"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        android:padding="15dp" >
        <TextView
            android:id="@+id/textViewName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="10dp"
            android:text="TextView"
            android:textColor="@android:color/white"
            android:textSize="22sp" />
        <ImageView
            android:id="@+id/imageFirstArrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="5dp" />
    </RelativeLayout>
    <LinearLayout
        android:id="@+id/linear_scroll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:background="@android:color/white"
        android:orientation="vertical" />
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/white" />
</LinearLayout>

کد بالا row اولی listview را ایجاد می کند اسم آن را می گذاریم Group تا در ادامه آموزش راحتر آن را توضیح دهیم .
یک فایل دیگر در همان پوشه به نام row_second.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:background="@android:color/white"
    android:orientation="vertical" >
    <RelativeLayout
        android:id="@+id/linearSecond"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/background_dark"
        android:padding="15dp" >
        <TextView
            android:id="@+id/textViewTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="10dp"
            android:text="TextView"
            android:textColor="@android:color/white"
            android:textSize="20sp" />
        <ImageView
            android:id="@+id/imageSecondArrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="5dp" />
    </RelativeLayout>
    <LinearLayout
        android:id="@+id/linear_scroll_third"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:background="@android:color/white"
        android:orientation="vertical" />
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/white" />
</LinearLayout>

کد بالا row دوم که child اول ما می شود را ایجاد می کند نام آن را برابر با Child اول  قرار می دهیم.
یک فایل دیگر در همان پوشه به نام row_third.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:background="@android:color/white"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/textViewItemName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/background_light"
        android:text="TextView"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
    <TextView
        android:id="@+id/textViewItemPrice"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/background_light"
        android:text="TextView"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray" />
</LinearLayout>

کد بالا child دوم ما که درون child اول است را ایجاد می کند.
بعد از اینکار وارد layout اصلی شده در اینجا نام آن برابر با activity_main.xml است و کدهای زیر را در آن قرار دهید.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <LinearLayout
        android:id="@+id/linear_listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" />
</ScrollView>

همانطور که مشاهده می کنید یک ScrollView و یک LinearLayout در کد بالا قرار گرفته است و در ادامه با استفاده از کد layout هایی را که ساختیم در این layout بالا Inflate می کنیم.
یک کلاس به نام Product.java ایجاد کرده و کدهای زیر را در آن قرار دهید.

package com.androidhub4you.multilevellistview;
import java.util.ArrayList;
/**
 *
 * Group
 *
 */
public class Product {
	private String pName;
	private ArrayList<SubCategory> mSubCategoryList;
	public Product(String pName, ArrayList<SubCategory> mSubCategoryList) {
		super();
		this.pName = pName;
		this.mSubCategoryList = mSubCategoryList;
	}
	public String getpName() {
		return pName;
	}
	public void setpName(String pName) {
		this.pName = pName;
	}
	public ArrayList<SubCategory> getmSubCategoryList() {
		return mSubCategoryList;
	}
	public void setmSubCategoryList(ArrayList<SubCategory> mSubCategoryList) {
		this.mSubCategoryList = mSubCategoryList;
	}
	/**
	 *
	 * First Child
	 *
	 */
	public static class SubCategory {
		private String pSubCatName;
		private ArrayList<ItemList> mItemListArray;
		public SubCategory(String pSubCatName,
				ArrayList<ItemList> mItemListArray) {
			super();
			this.pSubCatName = pSubCatName;
			this.mItemListArray = mItemListArray;
		}
		public String getpSubCatName() {
			return pSubCatName;
		}
		public void setpSubCatName(String pSubCatName) {
			this.pSubCatName = pSubCatName;
		}
		public ArrayList<ItemList> getmItemListArray() {
			return mItemListArray;
		}
		public void setmItemListArray(ArrayList<ItemList> mItemListArray) {
			this.mItemListArray = mItemListArray;
		}
		/**
		 *
		 * Second Child
		 *
		 */
		public static class ItemList {
			private String itemName;
			private String itemPrice;
			public ItemList(String itemName, String itemPrice) {
				super();
				this.itemName = itemName;
				this.itemPrice = itemPrice;
			}
			public String getItemName() {
				return itemName;
			}
			public void setItemName(String itemName) {
				this.itemName = itemName;
			}
			public String getItemPrice() {
				return itemPrice;
			}
			public void setItemPrice(String itemPrice) {
				this.itemPrice = itemPrice;
			}
		}
	}
}

در بالا هر بخش از کد را نام گذاری کردم همانطور که در بالاتر آنها را نام گذاری کردم. این کلاس به getter و setter نیر معروف است.
و در آخر به کد MainActivity.java میرسیم که در اینجا MainActivity.java اکتیویتی اصلی ما است .

package ir.programchi;
import java.util.ArrayList;
import ir.programchi.Product.SubCategory;
import ir.programchi.Product.SubCategory.ItemList;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
/**
 *
 * @author Jefferson
 *
 */
public class MainActivity extends Activity {
	private ArrayList<Product>pProductArrayList;
	private ArrayList<SubCategory>pSubItemArrayList;
	private ArrayList<SubCategory>pSubItemArrayList2;
	private LinearLayout mLinearListView;
	boolean isFirstViewClick=false;
	boolean isSecondViewClick=false;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mLinearListView = (LinearLayout) findViewById(R.id.linear_listview);
		ArrayList<ItemList> mItemListArray=new ArrayList<ItemList>();
		mItemListArray.add(new ItemList("Red", "20"));
		mItemListArray.add(new ItemList("Blue", "50"));
		mItemListArray.add(new ItemList("Red", "20"));
		mItemListArray.add(new ItemList("Blue", "50"));
		ArrayList<ItemList> mItemListArray2=new ArrayList<ItemList>();
		mItemListArray2.add(new ItemList("Pant", "2000"));
		mItemListArray2.add(new ItemList("Shirt", "1000"));
		mItemListArray2.add(new ItemList("Pant", "2000"));
		mItemListArray2.add(new ItemList("Shirt", "1000"));
		mItemListArray2.add(new ItemList("Pant", "2000"));
		mItemListArray2.add(new ItemList("Shirt", "1000"));
		pSubItemArrayList=new ArrayList<SubCategory>();
		pSubItemArrayList2=new ArrayList<SubCategory>();
		pSubItemArrayList.add(new SubCategory("Color", mItemListArray));
		pSubItemArrayList2.add(new SubCategory("Cloths", mItemListArray2));
		pSubItemArrayList.add(new SubCategory("Color", mItemListArray));
		pSubItemArrayList2.add(new SubCategory("Cloths", mItemListArray2));
		pProductArrayList=new ArrayList<Product>();
		pProductArrayList.add(new Product("Emotions", pSubItemArrayList));
		pProductArrayList.add(new Product("Garments", pSubItemArrayList2));
		for (int i = 0; i < pProductArrayList.size(); i++) {
			LayoutInflater inflater = null;
			inflater = (LayoutInflater) getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
			View mLinearView = inflater.inflate(R.layout.row_first, null);
			final TextView mProductName = (TextView) mLinearView.findViewById(R.id.textViewName);
			final RelativeLayout mLinearFirstArrow=(RelativeLayout)mLinearView.findViewById(R.id.linearFirst);
			final ImageView mImageArrowFirst=(ImageView)mLinearView.findViewById(R.id.imageFirstArrow);
			final LinearLayout mLinearScrollSecond=(LinearLayout)mLinearView.findViewById(R.id.linear_scroll);
			if(isFirstViewClick==false){
			mLinearScrollSecond.setVisibility(View.GONE);
			mImageArrowFirst.setBackgroundResource(R.drawable.arw_lt);
			}
			else{
				mLinearScrollSecond.setVisibility(View.VISIBLE);
				mImageArrowFirst.setBackgroundResource(R.drawable.arw_down);
			}
			mLinearFirstArrow.setOnTouchListener(new OnTouchListener() {
				@Override
				public boolean onTouch(View v, MotionEvent event) {
					if(isFirstViewClick==false){
						isFirstViewClick=true;
						mImageArrowFirst.setBackgroundResource(R.drawable.arw_down);
						mLinearScrollSecond.setVisibility(View.VISIBLE);
					}else{
						isFirstViewClick=false;
						mImageArrowFirst.setBackgroundResource(R.drawable.arw_lt);
						mLinearScrollSecond.setVisibility(View.GONE);
					}
					return false;
				}
			});
			final String name = pProductArrayList.get(i).getpName();
			mProductName.setText(name);
		    for (int j = 0; j < pProductArrayList.get(i).getmSubCategoryList().size(); j++) {
				LayoutInflater inflater2 = null;
				inflater2 = (LayoutInflater) getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
				View mLinearView2 = inflater2.inflate(R.layout.row_second, null);
				TextView mSubItemName = (TextView) mLinearView2.findViewById(R.id.textViewTitle);
				final RelativeLayout mLinearSecondArrow=(RelativeLayout)mLinearView2.findViewById(R.id.linearSecond);
				final ImageView mImageArrowSecond=(ImageView)mLinearView2.findViewById(R.id.imageSecondArrow);
				final LinearLayout mLinearScrollThird=(LinearLayout)mLinearView2.findViewById(R.id.linear_scroll_third);
				if(isSecondViewClick==false){
					mLinearScrollThird.setVisibility(View.GONE);
					mImageArrowSecond.setBackgroundResource(R.drawable.arw_lt);
					}
					else{
						mLinearScrollThird.setVisibility(View.VISIBLE);
						mImageArrowSecond.setBackgroundResource(R.drawable.arw_down);
					}
				mLinearSecondArrow.setOnTouchListener(new OnTouchListener() {
						@Override
						public boolean onTouch(View v, MotionEvent event) {
							if(isSecondViewClick==false){
								isSecondViewClick=true;
								mImageArrowSecond.setBackgroundResource(R.drawable.arw_down);
								mLinearScrollThird.setVisibility(View.VISIBLE);
							}else{
								isSecondViewClick=false;
								mImageArrowSecond.setBackgroundResource(R.drawable.arw_lt);
								mLinearScrollThird.setVisibility(View.GONE);
							}
							return false;
						}
					});
				final String catName = pProductArrayList.get(i).getmSubCategoryList().get(j).getpSubCatName();
				mSubItemName.setText(catName);
				  for (int k = 0; k < pProductArrayList.get(i).getmSubCategoryList().get(j).getmItemListArray().size(); k++) {
						LayoutInflater inflater3 = null;
						inflater3 = (LayoutInflater) getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
						View mLinearView3 = inflater3.inflate(R.layout.row_third, null);
						TextView mItemName = (TextView) mLinearView3.findViewById(R.id.textViewItemName);
						TextView mItemPrice = (TextView) mLinearView3.findViewById(R.id.textViewItemPrice);
						final String itemName = pProductArrayList.get(i).getmSubCategoryList().get(j).getmItemListArray().get(k).getItemName();
						final String itemPrice = pProductArrayList.get(i).getmSubCategoryList().get(j).getmItemListArray().get(k).getItemPrice();
						mItemName.setText(itemName);
						mItemPrice.setText(itemPrice);
						mLinearScrollThird.addView(mLinearView3);
				  }
				mLinearScrollSecond.addView(mLinearView2);
		    }
		    mLinearListView.addView(mLinearView);
		}
	}
}

 
در کد بالا ما سه تا آرایه داریم که به ترتیب برای Group و child اول و child دوم است این داده ها از نوع array هستند و یک داده sample برای قرار گرفتن در  Group و child اول و child هستند.
حالا ما باید هر row را Inflate کنیم تا نمایش داده شوند بعد از Inflate کردن باید آداپتور را ست کنیم یعنی داده sample آرایه را در بخش های مخصوصشان (  Group و child اول و child ) قرار دهیم . همینطور باید برای یک کلیک تعریف کنیم تا زمانی که بروی هر آیکون هر row کلیک شد لیست دوم یا child دوم و سوم به ترتیب باز شوند. برای اینکه این برنامه کمی متریال دیزاین شود کافی است یک انیمیشن در listview لود کنید و همینطور اندازه آیکون Row ها را تغییر دهید.
 
این آموزش هم به پایان رسید.
 
موفق و موید باشید.
 

مطالعه بیشتر