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

ستاره مقاری 1395/1/12 3123

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

سلام خدمت همه دوستان عزیز. جلسه 20 آموزش اندروید رو شروع میکنیم.

جلسه قبل در مورد لیست ویو حرف زدیم و یک لیست ویو ایجاد کردیم از یک آرایه. متد کلیک شدن هم برای اون نوشتیم. در این جلسه به ادامه کار با لیست ویوها میپردازیم.

تا اینجا تنها یک لیست ویوای ساخیتیم که در آن از تم های خود اندروید استفاده کردیم. اما همیشه قرار نیست لیست ویو یک متن را نمایش بدهد. شاید بخواهیم کنار هم متن یک عکس بگذاریم بطور مثال و.... در اینجا هست که باید یاد بگیریم چطور یک لیست ویو سفارشی بسازیم.

اول بیاید یک لیست ویو طبق فونت و رنگ دلخواه خودمون بسازیم تا بعد بهش آیتم عکس اضافه کنیم.

پس یک فایل xml میسازم به اسم list_row و تگ زیر رو داخلش میسازم که در اصل باید نشان دهنده یک سطر از لیست ویو باشه:

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

بعد هم در لیوت اصلی خودم یک لیست ویو میسازم.

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

فقط دقت کنید که نحوه آیدی دادن من متفاوت شده. این  نوع id دادن یعنی شما میخواهید از reference های خود اندروید استفاده کنید. خب میریم سراغ کد J

ابتدا یک آرایه میسازیم از محتویاتی که میخواهیم نمایش دهیم:

String[] listStringItems = {"android", "ios" , "java", "cSharp", "php", "asp", "sql", "ruby"};

خب ما از اداپترها صحبت کردیم. دیدیم که اداپترها پل ارتباطی داده شما با ابزار view شما هستند. اندفعه ما داریم خودمان یک تم برای لیست ایجاد میکنیم. پس باید برای آن یک آداپتر سفارشی تعریف کنیم. برای اینکار یک کلاس میسازم و از ArrayAdapter ارث میبرم تا آن را تغییر بدهم:

public class CustomAdapter extends ArrayAdapter<String>

درمورد علامت <String> هم که صحبت کردیم که مربوط به Generic بودن کلاس ArrayAdapter هست.

خب تا اینجا کد شما ایرادی داره که اگه موس رو روش نگه دارید متوجه ارور خواهید شد. از شما constructor میخواهد. اگه به یاد داشته باشید موقع صدا زدن ArrayAdapter در دفعه قبل به شکل زیر عمل میکردیم:

 ArrayAdapter<String> adapter = new ArrayAdapter<String>(getApplicationContext(),android.R.layout.simple_list_item_1,listStringItems)

یعنی کانستراکتور آن ورودی میگرفت. اینجا هم باید برای کلاس خودمون یک کانستراکتور بسازیم و داخلش کانستراکتور کلاس پدر یعنی ArrayAdapter رو صدا بزنیم تا اجرا بشه.

public CustomAdapter(Context context, String[] ListArray){
    super(context,R.layout.list_row,ListArray);
}

ورودی های سازنده کلاس خودم رو context و آرایه گذاشتم. و همون ها رو به سازنده کلاس پدر که با super صدا زده میشه ارسال کردم. بعلاوه ی xml ای که از سطر لیست ویو ساخته بودم.

سه تا متغیر در سطح کلاس (فیلد) هم ایجاد میکنم تا همین مقادیری که در سازنده دریافت کردم رو بتونم رد سطح کلاس بهش دسترسی داشته باشم. پس دارم:

Context mainContext;
String[] mainListArray;
public CustomAdapter(Context context, String[] ListArray){

    super(context,R.layout.list_row,ListArray);

    this.mainContext = context;

    this.mainListArray = ListArray;

}

تنها یک متد مانده. متدی که وظیفه خواندن فایل xml من و تبدیل آن به لیست ویو رو بر عهده داره. متدی به اسم getView که برای ArrayAdapter هست و باید Override شود:

@Override

public View getView(int position, View convertView, ViewGroup parent){

}

این متد برای ایجاد آیتم های لیست ویو هست. سه ورودی دارد. ورودی اول که با آن بیشتر کار داریم در اصل شمارنده آیتم های شما در لیست ویو هست. ورودی دوم برای بازیابی هست. فرض کنید شما 11 آیتم در لیست ویو دارید و گوشی شما آیتم های 1 تا 10 را به نمایش گذاشته. وقتی اسکرول کنید آیتم 11 ایجاد و نشان داده میشود. و آیتم اول شما که الان استفاده ای ندارد توسط convertView در آینده بازیابی میشود. ورودی آخر نیز view ای هست که متد getView در آن قرار دارد و برای آن اجرا میشود در اصل.

اما به ادامه کد بریم. داخل این متد کد زیر رو میزنیم:

LayoutInflater inflater = LayoutInflater.from(mainContext);

اول LayoutInflater چی هست. وقتی شما میخواهید از یک فایل xml خود در اصل یک view ایجاد کنید از این کلاس استفاده میکنید. در تعریف آن ابتدا context خودم رو بهش دادم. در ادامه باید با متد inflate عملیات تبدیل به view را انجام دهم و آن را در یک view به نام row ذخیره کنم.

View row = inflater.inflate(R.layout.list_row,null,true);

ورودی اول آن فایل xml ما هست. دو ورودی دیگر را هم کاری نداریم فعلا.

TextView textView = (TextView) row.findViewById(R.id.list_textView);

textView.setText(mainListArray[position]);

return row;

کدهای بالا نیز ابتدا از view ای که ساختم یعنی row تکست ویو من را پیدا میکند.آیدی تسکت ویو خودم رو در فایل xml ایتدا برابر با list_textview کردم. بعد آن را در این کلاس خوانده و سپس مقدار آن را با درایه ی با اندیس position از آرایه ام پر میکند. و در نهایت چون خروجی این متد از جنس view هست آن را برمیگردانم. در کل کدهای کلاس من بصورت زیر هستند:

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

حالا کافی هست در کلاس اکتیویتی خودم این Custom Adapter را بعنوان یک Adapter به لیست ویو خود سفارش دهیم:

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

این هم خروجی:

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

در ادامه برویم برای  قرار دادن عکس در لیست ویو. کد xml خودم رو به صورت زیر تغییر میدم:

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

همچنین تعدادی عکس به پوشیه drawable اضافه میکنم دقیقا به تعداد آیتم های لیستم. باید آیدی این عکس ها را نگه دارم تا بتوانم آنها را در متد getView به ImageView خودم نسبت بدهم. حواستون باشه آیدی ها از جنس int  هستند! درست هست که ما میگیم R.drawable.imagename تا اسم عکس یا درواقع آیدی اون رو صدا بزنیم. اما در اصل اینها از جنس int هستند پس خیلی ساده اینها رو توی یک آرایه اینتیجری ذخیره میکنم دقیقا زیر آرایه ی مقادیر String ام:

int[] Image_Id = {

        R.drawable.android,

        R.drawable.ios,

        R.drawable.java,

        R.drawable.csharp,

        R.drawable.php,

        R.drawable.asp,

        R.drawable.sql,

        R.drawable.ruby

};

 

کافی هست تغییراتی هم در کلاس آداپترم بدهم. تعریف یک فیلد برای آیدی عکسها، تغییر سازنده کلاس و درنهایت صدا زدن و مقداردهی imageView در متد getView:

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

و در آخر موقع نسبت دادن آداپتورمان به لیست کدش را اصلاح میکنیم:

CustomAdapter customAdapter = new CustomAdapter(getApplicationContext(),listStringItems, Image_Id);

و در نهایت این هم خروجی:

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

خسته نباشید !!!

قسمت بعدی قسمت قبلی