متریال دیزاین | نحوه‌ی استفاده از RecyclerView

material_design

متریال دیزاین که در کنفرانس Google I/O سال گذشته معرفی شد نگاه جدیدی به طراحی رو به همراه مجموعه‌ای از قواعد معرفی کرد. اما کار صرفا به تعریف کانسپت ختم نشد و گوگل چند کلاس و یک تم جدید به SDK اندروید اضافه کرد:

  1.  یک تم جدید به نام Theme.Material
  2. ویجتهای جدید ( لیستها و کارتها)
  3.  API برای ایجاد سایه و انیمیشن.

در اینجا من قصد معرفی کلاس ویجت جدیدی به نام RecyclerView رو دارم . این ویجت جایگزین مناسبی برای ListView خواهد بود. مخصوصا زمانی که لیست ما قراره به طور مرتب توسط دیتایی که از وب یا از کاربر میگیره تغییر کنه.

این ویجت در API 21 اندروید معرفی شد. اما در کتابخانه ساپورت ورژن هفت (android.support.v7.widget.RecyclerView) هم وجود داره تا در نسخه های پایینتر هم پشتیبانی بشه.

برای شروع پروژه‌ای به اسم ContactsWithRecyclerView میسازم. این پروزه یه برنامه ساده‌ست که لیست شماره تلفنهای من رو بهم نشون میده. اگه حوصله خوندن توضیحات من رو ندارید و میخواید مستقیم کد رو ببینید میتونید این پروژه رو از اینجا در گیت‌هاب ببینید. در غیر اینصورت پیشنهاد میکنم ادامه رو بخونید.

 اگر از Android Studio استفاده میکنید compile ‘com.android.support:appcompat-v7:22.1.1’ رو به زیرمجموعه‌های dependency در build.gradle اضافه کنید:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 22
    buildToolsVersion "22.0.0"

    defaultConfig {
        applicationId "com.arashkhoeini.contactswithrecyclerview"
        minSdkVersion 15
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.1.1'
    compile 'com.android.support:recyclerview-v7:+'
}

حال activity_main.xml رو که همون layout اصلی اپلیکیشن ماست رو به شکل زیر تغییر میدهیم:

<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"
    tools:context="com.arashkhoeini.fragments.ContactsFragment">

    <android.support.v7.widget.RecyclerView

        android:id="@+id/contacts_list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"></android.support.v7.widget.RecyclerView>



</RelativeLayout>

اگر Android Studio کلاس RecyclerView رو نشناخت کافیه یکبار پروژه رو Rebuild کنید.

RecyclerView هم مانند ListView نیاز به یک کلاس آداپتور داره تا بتونه خودش رو بسازه. اما در اینجا کلاس آداپتور باید زیرکلاسی از RecyclerView.Adapter باشه. اگر قبلا برای بهینه شدن آداپتور از ViewHolder استفاده کرده باشید درک ساختار این کلاس براتون آسون خواهد بود. کلاس ContactsListAdapter.java رو به صورت زیر مینویسیم:

public class ContactsListAdapter extends RecyclerView.Adapter<ContactsListAdapter.ViewHolder> {

    List<Contact> contacts ;

    public ContactsListAdapter(List<Contact> contacts){
        this.contacts = contacts;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder{

        TextView vName;
        TextView vNumber;

        public ViewHolder(View v){
            super(v);
            vName = (TextView) v.findViewById)(R.id.contacts_list_name);
            vNumber = (TextView) v.findViewById(R.id.contacts_list_number);

        }

    }


    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.contacts_list_item,parent,false);
        
        return new ViewHolder(v);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.vName.setText(contacts.get(position).getName());
        holder.vNumber.setText(contacts.get(position).getNumber());
    }

    @Override
    public int getItemCount() {
        return contacts.size();
    }


}

 

 

 

این کلاس از سه متد تشکیل شده که همه‌ی آنها override شده اند:

  1. متد onCreateViewHolder : که یک آبجکت از  ViewHolder برمیگرداند.
  2. متد onBindViewHolder : که ViewHolder را برای نمایش آماده میکند.

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

این آداپتور برای ساخت هر ویوو از contacts_list_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">

    <TextView
        android:id="@+id/contacts_list_name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="8dp"
        android:textColor="#666"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/contacts_list_number"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="#666"
        android:paddingLeft="14dp"
        android:textSize="12sp" />

</LinearLayout>

 

برای استفاده از RecyclerView باید برای آن یک LayoutManager تعریف کنیم. سه نوع LayoutManager برای اینکار وجود دارد:

  1. LinearLayoutManager
  2. GridLayoutManager
  3. StaggeredGridLayoutManager

من از LinearLayoutManager استفاده میکنم. و کلاس MainAvtivity.java رو به این شکل مینویسم:

 

public class MainActivity extends Activity {

    RecyclerView vContactsList;
    RecyclerView.LayoutManager vLayoutManager;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        vContactsList = (RecyclerView) findViewById(R.id.contacts_list);
        vLayoutManager = new LinearLayoutManager(getApplicationContext());

        vContactsList.setHasFixedSize(false);
        vContactsList.setLayoutManager(vLayoutManager);
        List<Contact> contacts = getUserContacts();
        if(contacts != null){
            vContactsList.setAdapter(new ContactsListAdapter(contacts));
        }

    }

    private List<Contact> getUserContacts() {
        Cursor cursor = null;
        try {
            cursor = getContentResolver().query(ContactsContract.CommonDataKinds.Phone.CONTENT_URI, null, null, null, null);
            int contactIdIdx = cursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone._ID);
            int nameIdx = cursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.DISPLAY_NAME);
            int phoneNumberIdx = cursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER);
            int photoIdIdx = cursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.PHOTO_ID);
            cursor.moveToFirst();
            List<Contact> contacts = new ArrayList<>();
            Contact c;
            do {
                String idContact = cursor.getString(contactIdIdx);
                String name = cursor.getString(nameIdx);
                String phoneNumber = cursor.getString(phoneNumberIdx);
                c= new Contact(name,phoneNumber);
                contacts.add(c);
            } while (cursor.moveToNext());
            Collections.sort(contacts);
            return contacts;
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (cursor != null) {
                cursor.close();
            }
        }
        return null;
    }

}

 

 

متد getUserContacts لیستی از شماره تلفنهایی که در گوشی کاربر سیو است را برمیگرداند. برای تعریف ساختار داده‌ای Contact، یک کلاس به همین نام میسازیم. در ضمن دقت کنید برای اینکه این متد کار کند، باید حتما این پرمیشن رو به manifest.xml اضافه کنید: <uses-permission android:name=”android.permission.READ_CONTACTS” />

کلاس Contact را به شکل زیر مینویسیم:

 

public class Contact implements Comparable<Contact> {
    String name;
    String number;

    public Contact(){

    }
    public Contact(String name, String number){
        this.name = name;
        this.number = number;
    }

    public String getName() {
        return name;
    }

    public String getNumber() {
        return number;
    }

    public void setName(String name) {
        this.name = name;
    }

    public void setNumber(String number) {
        number =number;
    }



    @Override
    public int compareTo(Contact another) {
        return this.name.compareTo(another.name);
    }
}

اگر همه مراحل رو درست جلو رفته باشید، اکنون یک اپلیکیشن دارید که با استفاده از ‌‌‌RecyclerView لیست نام و شماره تلفن تمام مخاطبان رو نشونتون میده.

این پروژه رو میتونید از اینجا در گیت‌هاب ببینید.

2 پاسخ به “متریال دیزاین | نحوه‌ی استفاده از RecyclerView”

  1. سروش گفت:

    مرسی ، ایشالا همین طور با قدرت ادامه بدی .

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

android application Google I/O HomeBrew ImageMagick Material Design mobile PogressBar RecyclerView splash TEDxKish ux آموزش اندروید الوین تافلر اندروید اپلیکیشن برنامه نویسی برنامه نویسی اندروید برنامه‌نویسی برنامه‌نویسی اندروید تداکس کیش تعمیر تغییر سایز عکس با ترمینال خلاصه کتاب دانش داده دانشگاه دانشگاه ایده‌آل دزد دیتا ساینس رشته مهندسی کامپیوتر ریکامندرسیستم سیستم‌های توصیه‌گر فری‌لنس لپتاپ متریال دیزاین معرفی کتاب موج سوم نوار پیشرفت همایش هوش مصنوعی ُجزیره کیش کار کسب و کار یادگیری عمیق یادگیری ماشین