RecyclerView merupakan widget material design yang memiliki kemampuan yang sangat bagus dibandingkan dengan ListView. RecyclerView adalah widget yang lebih fleksibel dan mampu menampung lebih banyak data dan lebih efisien. Selain itu, RecyclerView memiliki method ViewHolder yang memungkinkan kita menambahkan list data dari layout tertentu.
Pada tutorial kali ini, saya ingin membahas bagaimana menambahkan header di RecyclerView. Sebelum kita mulai, alangkah lebih baik membaca postingan saya yang tentang (Tutorial Android) RecyclerView and CardView Android Material Design.
Karena saya menggunakan sampel projectnya yang sama.
Nah, tinggal kita modifikasi sedikit hehe.
Pertama,
Buat layout baru sebagai header.
header.xml
Kemudian kita buat adapter untuk RecyclerView. Nah disini kita modifikasi dengan menambahkan header.
MemberListAdapter.java
package wim.example.com.androidheaderrecyclerview.adapter;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
import wim.example.com.androidheaderrecyclerview.R;
import wim.example.com.androidheaderrecyclerview.model.Member;
/**
* Created by wim on 4/12/16.
*/
public class MemberListAdapter extends RecyclerView.Adapter<Recyclerview.ViewHolder> {
private static final int TYPE_HEADER = 0;
private static final int TYPE_ITEM = 1;
private List<Member> memberList;
public MemberListAdapter() {
memberList = new ArrayList<>();
}
private void add(Member item) {
memberList.add(item);
notifyItemInserted((memberList.size() + 1)- 1);
}
public void addAll(List memberList) {
for (Member member : memberList) {
add(member);
}
}
public void remove(Member item) {
int position = memberList.indexOf(item);
if (position > -1) {
memberList.remove(position);
notifyItemRemoved(position);
}
}
public void clear() {
while (getItemCount() > 1) {
remove(getItem(-1));
}
}
public Member getItem(int position){
return memberList.get(position + 1);
}
@Override
public int getItemViewType (int position) {
if(isPositionHeader (position)) {
return TYPE_HEADER;
}
return TYPE_ITEM;
}
public boolean isPositionHeader(int position) {
return position == 0;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType == TYPE_HEADER) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.header, parent, false);
return new HeaderViewHolder(view);
} else if (viewType == TYPE_ITEM) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item_member, parent, false);
return new MemberViewHolder(view);
}
return null;
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if (holder instanceof HeaderViewHolder) {
HeaderViewHolder headerViewHolder = (HeaderViewHolder) holder;
headerViewHolder.imgHeader.setImageResource(R.drawable.header);
} else if (holder instanceof MemberViewHolder) {
MemberViewHolder memberViewHolder = (MemberViewHolder) holder;
Member member = memberList.get(position - 1);
memberViewHolder.memberThumb.setImageResource(member.getThumb());
memberViewHolder.memberName.setText(member.getName());
memberViewHolder.memberTeam.setText(member.getTeam());
}
}
@Override
public int getItemCount() {
return memberList == null ? 0 : memberList.size() + 1;
}
@Override
public void onAttachedToRecyclerView(RecyclerView recyclerView) {
super.onAttachedToRecyclerView(recyclerView);
}
@Override
public void onDetachedFromRecyclerView(RecyclerView recyclerView) {
super.onDetachedFromRecyclerView(recyclerView);
}
static class MemberViewHolder extends RecyclerView.ViewHolder {
ImageView memberThumb;
TextView memberName;
TextView memberTeam;
public MemberViewHolder(View itemView) {
super(itemView);
memberThumb = (ImageView) itemView.findViewById(R.id.thumb);
memberName = (TextView) itemView.findViewById(R.id.name);
memberTeam = (TextView) itemView.findViewById(R.id.team);
}
}
static class HeaderViewHolder extends RecyclerView.ViewHolder {
ImageView imgHeader;
public HeaderViewHolder(View itemView) {
super(itemView);
imgHeader = (ImageView) itemView.findViewById(R.id.imgHeader);
}
}
}
Kemudian modifikasi beberapa codingan di kelas MemberFragment.java
package wim.example.com.androidheaderrecyclerview.fragments;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;
import wim.example.com.androidheaderrecyclerview.R;
import wim.example.com.androidheaderrecyclerview.adapter.MemberListAdapter;
import wim.example.com.androidheaderrecyclerview.model.Member;
/**
* Created by wim on 4/12/16.
*/
public class MemberFragment extends Fragment {
private RecyclerView listMember;
private LinearLayoutManager linearLayoutManager;
private MemberListAdapter memberListAdapter;
protected Context context;
public static MemberFragment newInstance(){
return new MemberFragment();
}
@Override
public void onAttach(Context context) {
super.onAttach(context);
this.context = context;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_member, container, false);
listMember = (RecyclerView) rootView.findViewById(R.id.listMember);
return rootView;
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
linearLayoutManager = new LinearLayoutManager(context);
memberListAdapter = new MemberListAdapter();
listMember.setLayoutManager(linearLayoutManager);
listMember.setAdapter(memberListAdapter);
loadData();
}
private void loadData(){
List<Member> memberList = new ArrayList<>();
Member member;
int thumb[] = {R.drawable.acha, R.drawable.yupi, R.drawable.della,
R.drawable.kinal, R.drawable.uty, R.drawable.shafa,
R.drawable.hanna, R.drawable.lidya, R.drawable.nadila,
R.drawable.nat, R.drawable.sisil, R.drawable.viny,
R.drawable.chika_chan, R.drawable.ikha, R.drawable.ayen,
R.drawable.saktia, R.drawable.dudut, R.drawable.yona};
String name[] = {"Alicia Chanzia", "Cindy Yuvia", "Della Delila", "Devi Kinal Putri",
"Dwi Putri Bonita", "Fakhriyani Shafariyanti", "Jennifer Hanna", "Lidya Maulida Djuhandar",
"Nadila Cindi Wantari", "Natalia", "Priscillia Sari Dewi", "Ratu Vienny Fitrilya",
"Rina Chikano", "Riskha Fairunissa", "Rona Anggreani", "Saktia Oktapyani",
"Sinka Juliani", "Viviyona Apriani"};
String motto[] = {"Hap!Tangkap Aku!", "Mau Kemana Kita?", "Future Processor", "K3bahagiaan Depi",
"Different", "Shafa Disana?", "Target", "Banyak Mau", "Yossha Ikuzo!", "Spicy Hot",
"Yuk Isi Batre Senter", "#KitaBisa", "Yuk.. Kita Dangdutan!", "Nothing Gonna Stop Us Now",
"Stand Up!", "Saktia Dalam Jiwa", "Berarti Dalam Hidup", "Life In Technicolor"};
for(int i=0; i < thumb.length; i++){
member = new Member();
member.setId(i+1);
member.setName(name[i]);
member.setTeam(motto[i]);
member.setThumb(thumb[i]);
memberList.add(member);
}
memberListAdapter.addAll(memberList);
}
@Override
public void onDestroyView() {
super.onDestroyView();
}
}
Build dan jalankan maka hasilnya seperti ini.
Nice work !
Foto dan gambar hanya sebagai sampel, abaikan saja :v
Source code lengkap bisa dilihat di https://github.com/wimsonevel/AndroidHeaderRecyclerView
Sekian dan semoga bermanfaat.
Happy Coding :)
0 Komentar
Penulisan markup di komentar