› › Cara Membuat GridView dengan RecyclerView

Cara Membuat GridView dengan RecyclerView

watch_later December 8, 2017
comment Add Comment

Keunggulan Menggunakan RecyclerView

RecyclerView merupakan widget yang diusung langsung oleh android support library dalam versi sdk 22.1.0. Widget ini membawa perubahan besar dalam segi performa dan tampilan sebagai pengganti untuk ListView maupun GridView dalam menampilkan daftar, seperti: menu, daftar makanan, daftar isi, dan yang lainnya yang dibutuhkan dalam aplikasi android yang kita buat. 

Cara Membuat GridView dengan RecyclerView
Gridview menggunakan Recyclerview
Sebagai suatu widget, Recycler- view juga membutuhkan adapter agar dapat menampilkan konten secara dinamis. Adapter sendiri memiliki fungsi untuk mengelola konten yang akan ditampilkan kedalam RecyclerView.

Membuat Adapter untuk RecyclerView

1. Buat class baru dalam package project anda. Misalkan: MenuAdapter.java . Oh iya, disini saya menggunakan Android Studio untuk mendevelop aplikasi Android. Kemudian extends class tersebut dengan RecyclerView.Adapter<> . kemudian panggil beberapa fungsi yang sudah ada dalam class tersebut, berikut contohnya :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
public class MenuAdapter extends RecyclerView.Adapter {

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

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        
    }
}

2. Buat class ViewHolder didalam class tersebut yang bertujuan sebagai ViewGroup untuk mengelola layout dan konten per item GridView. Berikut contohnya :


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
public class MenuAdapter extends RecyclerView.Adapter<MenuAdapter.ViewHolder> {
    
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        
    }

    class ViewHolder extends RecyclerView.ViewHolder {
        private TextView menuLabel;
        private ImageView menuIcon;


        private ViewHolder(View itemView) {
            super(itemView);

            menuLabel = (TextView) itemView.findViewById(R.id.main_menu_item_label);
            menuIcon = (ImageView) itemView.findViewById(R.id.main_menu_item_icon);
        }
    }
}

class ViewHolder tersebut meng- extends RecyclerView.ViewHolder. TextView dan ImageView yang ada didalam tersebut merupakan isi dari setiap grid yang ada dalam layout. Saya asumsikan untuk hal layout anda sudah mengerti.

3. Buat Model Object MainMenu sebagai penyuplai informasi yang akan dimasukkan kedalam setiap cell dalam GridView yang diinginkan. Misalkan isinya adalah String nama, dan int icon, saya menggunakan int untuk icon karena akan disuplay oleh R.class sebagai resource drawable dalam package android. Kemudian buat constructor untuk class adapter RecyclerView tersebut. Misalnya :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
public class MenuAdapter extends RecyclerView.Adapter<MenuAdapter.ViewHolder> {
    
    private List<MainMenu> menuList;

    public MenuAdapter(List<MainMenu> menuList) {
        this.menuList = menuList;
    }

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

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        
    }

class ViewHolder extends RecyclerView.ViewHolder {
        private TextView menuLabel;
        private ImageView menuIcon;
        private ImageView menufullService;
        private CardView cardView;


        private ViewHolder(View itemView) {
            super(itemView);

            menuLabel = (TextView) itemView.findViewById(R.id.main_menu_item_label);
            menuIcon = (ImageView) itemView.findViewById(R.id.main_menu_item_icon);
        }
    }
}

4. Selanjutnya pada method onCreateViewHolder, onBindViewHolder, getItemCount ikuti seperti contoh kode berikut ini:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
public class MenuAdapter extends RecyclerView.Adapter<MenuAdapter.ViewHolder> {
    
    private List<MainMenu> menuList;

    public MenuAdapter(List<MainMenu> menuList) {
        this.menuList = menuList;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_main_menu, parent, false);
        return new ViewHolder(v);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        MainMenu mainMenu = menuList.get(position);
        final int _position = position;

        holder.menuLabel.setText(mainMenu.getLabel());
        holder.menuIcon.setImageResource(mainMenu.getIcon());

    }

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

class ViewHolder extends RecyclerView.ViewHolder {
        private TextView menuLabel;
        private ImageView menuIcon;
        private ImageView menufullService;
        private CardView cardView;


        private ViewHolder(View itemView) {
            super(itemView);

            menuLabel = (TextView) itemView.findViewById(R.id.main_menu_item_label);
            menuIcon = (ImageView) itemView.findViewById(R.id.main_menu_item_icon);
        }
    }
}

5. Seperti yang anda lihat, layout saya masukkan pada method onCreateViewHolder dan pada method onBindViewHolder saya masukkan item yang akan ditampilkan per cell untuk GridView nya. Nah, sekarang anda sudah membuat Adapter untuk RecyclerView nya, selanjutnya adalah menggunakan Adapter tersebut.

6. Pada MainActivity.java atau pada activity yang anda inginkan, silahkan masukkan widget RecyclerView pada layoutnya, contoh penggunaannya adalah sebagai berikut :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
public class MainActivity extends AppCompatActivity {

    @BindView(R.id.recycler_menu)
    RecyclerView recyclerMenu;

    private RecyclerView.Adapter adapter;
    private List<MainMenu> menuList;

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

        recyclerMenu.setHasFixedSize(true);
        RecyclerView.LayoutManager layoutManager = new 
        GridLayoutManager(this, 3);
        recyclerMenu.setLayoutManager(layoutManager);

        menuList = new ArrayList<>();
        menuList.add(new MainMenu("MENU 1", R.drawable.ic_menu1));
        menuList.add(new MainMenu("MENU 2", R.drawable.ic_menu2));

        adapter = new MenuAdapter(menuList, this);
        recyclerMenu.setAdapter(adapter);

    }

}

7. Pada contoh kode tersebut, saya menggunakan ButterKnife sebagai library annotation untuk mempermudah pemanggilan resource id. Anda juga tentu akan membutuhkan ini. Hal terpenting dalam membuat GridView dengan RecyclerView adalah pemanggilan object GridLayoutManager sebagai layout manager untuk RecyclerView. Jika anda ingin menggantinya sebagai ListView, maka anda hanya perlu menggantinya menjadi LinearLayoutManager. 

Sekian tutorial "Membuat GridView dengan RecyclerView" semoga bermanfaat. Jika ada pertanyaan silahkan tinggalkan komentar |o|

alexringo

comment 0 comments:

more_vert



sentiment_satisfied Emoticon