RecyclerView droid girls meetup #2 Yuki Anzai (@yanzm)

• blog : Y.A.M ͷࡶهா • y-anz-m.blogspot.com • twitter : @yanzm ʢ΍Μ͟Ήʣ • uPhyca Inc. (גࣜձࣾ΢ϑΟΧ) ͋Μ͍͟Ώ͖

RecyclerView A flexible view for providing a limited window into a large data set.

RecyclerView RecyclerView ͸ αϙʔτϥΠϒϥϦ IUUQTEFWFMPQFSBOESPJEDPNUPQJDMJCSBSJFTTVQQPSU MJCSBSZGFBUVSFTIUNMWSFDZDMFSWJFX

RecyclerView େن໛ͳσʔληοτʹɺ ݶఆ͞Εͨ΢Οϯυ΢Λ ఏڙ͢ΔͨΊͷॊೈͳϏϡʔ

RecyclerView େن໛ͳσʔληοτͷҰ෦Λ ϏϡʔΛ࠶ར༻͠ͳ͕Β දࣔ͢ΔͨΊͷίϯϙʔωϯτ

RecyclerView ListViewͱ͔GridView Έ͍ͨͳ΍ͭ

RecyclerViewͷߏ੒ • RecyclerView • σʔλΛදࣔ͢ΔͨΊͷεΫϩʔϧՄೳͳ View

• RecyclerView • σʔλΛදࣔ͢ΔͨΊͷεΫϩʔϧՄೳͳ View • RecyclerView.LayoutManager • ΞΠςϜ༻ͷϏϡʔͷαΠζΛܭࢉ͠ɺ഑ ஔ͢Δ RecyclerViewͷߏ੒

• RecyclerView.Adapter • RecyclerViewʹදࣔ͢ΔσʔληοτΛ ؅ཧ͠ɺΞΠςϜ༻ͷViewʹσʔλΛඥ ͚ͮΔ RecyclerViewͷߏ੒

• RecyclerView.Adapter • RecyclerViewʹදࣔ͢ΔσʔληοτΛ ؅ཧ͠ɺΞΠςϜ༻ͷViewʹσʔλΛඥ ͚ͮΔ • RecyclerView.ViewHolder • ΞΠςϜ༻ͷϏϡʔͱϝλσʔλΛอ࣋͢ Δ RecyclerViewͷߏ੒

RecyclerViewͷߏ੒ RecyclerView LayoutManager Adapter ࢠϏϡʔ഑ஔ ࢠϏϡʔ ʢViewHolderʣ ʹσʔλඥ෇ Recycler ViewHolderΛ࠶ར༻ ࠶ར༻͢Δ ViewHolder

ListViewͷߏ੒ RecyclerView LayoutManager Adapter ࢠϏϡʔ഑ஔ ࢠϏϡʔ ʢViewHolderʣ ʹσʔλඥ෇ Recycler ViewHolderΛ࠶ར༻ ࠶ར༻͢Δ ViewHolder ListView ListAdapter

ListViewͷߏ੒ ListView = RecyclerView + LayoutManager + Recycler + ͦͷଞ΋Ζ΋Ζͷػೳ ListAdapter = Adapter + ViewHolder

ListViewͷߏ੒ ListView = RecyclerView + LayoutManager + Recycler + ͦͷଞ΋Ζ΋Ζͷػೳ ListAdapter = Adapter + ViewHolder

ListView vs RecyclerView ListView RecyclerView ۠੾Γઢ ⚪ ࣗ෼Ͱ࣮૷ listSelector ⚪ º onItemClick ⚪ ࣗ෼Ͱ࣮૷ choiceMode ⚪ º BOESPJETVQQPSUWXJEHFU%JWJEFS*UFN%FDPSBUJPO͕Ͱ௥Ճ͞Ε·ͨ͠

ListView vs RecyclerView ListView RecyclerView Filter ⚪ ࣗ෼Ͱ࣮૷ FadingEdge ⚪ ࣗ෼Ͱ࣮૷ Header, Footer ⚪ ࣗ෼Ͱ࣮૷ StaggeredGrid º ⚪

ListView vs RecyclerView ListView RecyclerView ௥Ճɾ࡟আͷ Ξχϝʔγϣϯ ࣗ෼Ͱ࣮૷ ⚪ Swipe to Dismiss ࣗ෼Ͱ࣮૷ ⚪ Drag & Drop ࣗ෼Ͱ࣮૷ ⚪ ԣεΫϩʔϧ഑ஔ º ⚪

RecyclerViewͷ Ұ൪γϯϓϧͳ ࢖͍ํ

gradle ͷઃఆ dependencies {
 …
 
 compile 'com.android.support:recyclerview-v7:25.1.0'
 }

࠷௿ݶඞཁͳ΋ͷ • RecyclerView • RecyclerView.LayoutManager • RecyclerView.Adapter • RecyclerView.ViewHolder

࠷௿ݶඞཁͳ΋ͷ • RecyclerView • RecyclerView.LayoutManager • RecyclerView.Adapter • RecyclerView.ViewHolder

RecyclerView + LayoutManager

RecyclerView + LayoutManager

࠷௿ݶඞཁͳ΋ͷ • RecyclerView • RecyclerView.LayoutManager • RecyclerView.Adapter • RecyclerView.ViewHolder

public class ViewHolder extends RecyclerView.ViewHolder {
 
 private static final int LAYOUT_ID = android.R.layout.simple_list_item_1;
 
 @NonNull
 public static ViewHolder create(@NonNull LayoutInflater inflater,
 ViewGroup parent) {
 return new ViewHolder(inflater.inflate(LAYOUT_ID, parent, false));
 }
 
 final TextView textView;
 
 private ViewHolder(View itemView) {
 super(itemView);
 textView = (TextView) itemView.findViewById(android.R.id.text1);
 }
 } ViewHolder

public class SimpleAdapter extends RecyclerView.Adapter {
 
 @NonNull
 private final List data;
 
 public SimpleAdapter(@NonNull List data) {
 this.data = data;
 }
 
 @Override
 public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
 final LayoutInflater inflater = LayoutInflater.from(parent.getContext()) return ViewHolder.create(inflater, parent);
 }
 
 @Override
 public void onBindViewHolder(ViewHolder holder, int position) {
 final String text = data.get(position);
 holder.textView.setText(text);
 }
 
 @Override
 public int getItemCount() {
 return data.size();
 }
 } Adapter

public class MainActivity extends AppCompatActivity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view) recyclerView.setHasFixedSize(true);
 
 List data = new ArrayList<>();
 for (int i = 0; i < 30; i++) {
 data.add("Item : " + i);
 }
 
 final SimpleAdapter adapter = new SimpleAdapter(data);
 recyclerView.setAdapter(adapter);
 }
 } Activity

No content

LinearLayoutManager GridLayoutManager StaggeredGridLayoutManager

LinearLayoutManager • ઃఆ߲໨ • orientation • reverseLayout • stackFromEnd

orientation • σϑΥϧτ͸LinearLayoutManager.VERTICAL 
 new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false); layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL); PS PS

No content

app:reverseLayout="true" app:stackFromEnd="true"

GridLayoutManager • ઃఆ߲໨ • spanCount • orientation • reverseLayout • stackFromEnd

spanCount • ྻ਺ɺσϑΥϧτ͸1 
 new GridLayoutManager(this, 2); layoutManager.setSpanCount(2); PS PS

No content

StaggeredGridLayoutManager • ઃఆ߲໨ • spanCount • orientation • reverseLayout

No content

ItemDecorationͰ DividerΛ͚ͭΔ

DividerItemDecoration • v25.0.0 Ͱ DividerItemDecoration ͕௥Ճ͞Εͨ ͷͰͦΕΛ࢖͏ͷ͕؆୯ • https://developer.android.com/reference/ android/support/v7/widget/ DividerItemDecoration.html • Ұ൪࠷ޙͷΞΠςϜͷԼʹ΋ඳը͞Εͯ͠·͏ recyclerView.addItemDecoration( new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));

ItemDecoration • ૷০Λߦ͏ͨΊͷΫϥε • ΞΠςϜ༻ͷViewͷoffsetΛࢦఆ • onDraw()ͰRecyclerViewͷԼʹඳը • onDrawOver()ͰRecyclerVieͷ্ʹඳը

ΞΠςϜ༻ͷViewͷOffsetΛࢦఆ final int offset = (int) (8 * getResources().getDisplayMetrics().density);
 
 RecyclerView.ItemDecoration itemDecoration = new RecyclerView.ItemDecoration() {
 @Override
 public void getItemOffsets(Rect outRect, View view,
 RecyclerView parent, RecyclerView.State state) {
 outRect.set(offset, offset, offset, offset);
 }
 };
 recyclerView.addItemDecoration(itemDecoration);

No content

ΞΠςϜ༻ͷViewͷOffsetΛࢦఆ RecyclerView.ItemDecoration itemDecoration = new RecyclerView.ItemDecoration() {
 @Override
 public void getItemOffsets(Rect outRect, View view,
 RecyclerView parent, RecyclerView.State state) {
 int position = ((RecyclerView.LayoutParams) view.getLayoutParams())
 .getViewLayoutPosition();
 if (position == 0) {
 outRect.set(offset, offset, offset, offset);
 } else {
 outRect.set(offset, 0, offset, offset);
 }
 }
 };
 
 recyclerView.addItemDecoration(itemDecoration);

No content

public class DividerDecoration extends RecyclerView.ItemDecoration {
 
 private final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
 private final int dividerHeight;
 
 public DividerDecoration(Resources res) {
 paint.setColor(Color.GRAY);
 dividerHeight = (int) (4 * res.getDisplayMetrics().density);
 }
 
 @Override
 public void getItemOffsets(Rect outRect, View view, RecyclerView parent, 
 RecyclerView.State state) {
 final int position = ((RecyclerView.LayoutParams) view.getLayoutParams())
 .getViewLayoutPosition();
 // Ґஔ͕2൪໨Ҏ߱ͳΒ্෦ʹdividerΛඳը͍ͨ͠ͷͰɺ
 // divider෼্͚ͩΛ͚͋Δ
 
 int top = position == 0 ? 0 : dividerHeight;
 outRect.set(0, top, 0, 0);
 } DividerΛඳը

@Override
 public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
 super.onDrawOver(c, parent, state);
 // ΞΠςϜͷϏϡʔΑΓ্ʹඳը͞ΕΔ
 
 
 final RecyclerView.LayoutManager manager = parent.getLayoutManager();
 final int left = parent.getPaddingLeft();
 final int right = parent.getWidth() - parent.getPaddingRight();
 final int childCount = parent.getChildCount();
 for (int i = 1; i < childCount; i++) {
 final View child = parent.getChildAt(i);
 final RecyclerView.LayoutParams params =
 (RecyclerView.LayoutParams) child.getLayoutParams();
 if (params.getViewLayoutPosition() == 0) {
 continue;
 }
 
 // ViewCompat.getTranslationY()ΛೖΕͳ͍ͱ
 // ௥Ճɾ࡟আͷΞχϝʔγϣϯ࣌ͷҐஔ͕มʹͳΔ
 final int top = manager.getDecoratedTop(child)
 - params.topMargin + Math.round(ViewCompat.getTranslationY(child));
 final int bottom = top + dividerHeight;
 c.drawRect(left, top, right, bottom, paint);
 }
 }
 }
 DividerΛඳը

No content

onItemClick

OnItemClick • ํ๏͕͍͔ͭ͋͘Δ • ViewHolderͷitemViewʹ View.setOnClickListener • ItemDecorationͰλοϓ͞ΕͨΞΠςϜͷ ҐஔʹselectorΛඳը

OnItemClick • ํ๏͕͍͔ͭ͋͘Δ • ViewHolderͷitemViewʹ View.setOnClickListener • ItemDecorationͰλοϓ͞ΕͨΞΠςϜͷ ҐஔʹselectorΛඳը v17 leanback library ͸ͬͪ͜

public class SimpleAdapter extends RecyclerView.Adapter {
 
 …
 
 protected void onItemClicked(String text) {
 }
 
 @Override
 public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
 final LayoutInflater inflater = LayoutInflater.from(parent.getContext());
 final ViewHolder holder = ViewHolder.create(inflater, parent);
 holder.itemView.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 final int position = holder.getAdapterPosition();
 final String text = data.get(position);
 onItemClicked(text);
 }
 });
 return holder;
 }
 
 …
 } OnItemClick

public class MainActivity extends AppCompatActivity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 …
 
 final SimpleAdapter adapter = new SimpleAdapter(data) {
 @Override
 protected void onItemClicked(String text) {
 super.onItemClicked(text);
 Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
 }
 };
 recyclerView.setAdapter(adapter); OnItemClick

σʔλͷ௥Ճɾ࡟আɾมߋ

notify** • ArrayAdapterʹ૬౰͢Δ΋ͷ͸༻ҙ͞Ε͍ͯͳ͍ • σʔλͷ௥Ճɾ࡟আɾมߋ࣌ʹ͸notifyItem**()ΛݺͿ • notifyDataSetChanged()͸ͦΕҎ֎ͷͱ͖͚ͩʹ͢Δ

notify** • notifyItemChanged(int position) • positionͷҐஔͷΞΠςϜͷมߋ͞Εͨ • notifyItemInserted(int position) • posiitonͷҐஔʹΞΠςϜ͕௥Ճ͞Εͨ • notifyItemRemoved(int position) • positionͷҐஔͷΞΠςϜ͕࡟আ͞Εͨ

notify** • notifyItemMoved(int fromPosition, int toPosition) • fromPositionʹ͋ͬͨΞΠςϜ͕toPositionʹҠಈͨ͠ • notifyItemRangeChanged(int positionStart, int itemCount) • positionStart͔ΒitemCountݸͷΞΠςϜ͕มߋ͞Εͨ • notifyItemRangeInserted(int positionStart, int itemCount) • positionStartʹitemCountݸͷΞΠςϜ͕௥Ճ͞Εͨ

notify** • notifyItemRangeRemoved(int positionStart, int itemCount) • positionStart͔ΒitemCountݸͷΞΠςϜ͕࡟আ͞Εͨ • notifyDataSetChanged() • σʔληοτ͕มߋ͞Εͨ

public abstract class ArrayAdapter extends RecyclerView.Adapter {
 
 private final Object lock = new Object();
 private final List objects;
 
 public ArrayAdapter() {
 this(new ArrayList());
 }
 
 public ArrayAdapter(List objects) {
 this.objects = objects;
 }
 
 public void add(@NonNull T object) {
 final int position;
 synchronized (lock) {
 position = objects.size();
 objects.add(object);
 }
 notifyItemInserted(position);
 }
 ArrayAdapterతͳRecyclerView༻Adapter

public void addAll(@NonNull Collection extends T> collection) {
 final int itemCount = collection.size();
 final int positionStart;
 synchronized (lock) {
 positionStart = objects.size();
 objects.addAll(collection);
 }
 notifyItemRangeInserted(positionStart, itemCount);
 }
 
 public void insert(@NonNull T object, int index) {
 synchronized (lock) {
 objects.add(index, object);
 }
 notifyItemInserted(index);
 }
 
 public void remove(@NonNull T object) {
 final int position = objects.indexOf(object);
 synchronized (lock) {
 objects.remove(object);
 }
 notifyItemRemoved(position);
 }
 } ArrayAdapterతͳRecyclerView༻Adapter

ItemViewType

getItemViewType() • ϨΠΞ΢τͷछྨʢViewHolder ͷछྨʣʹԠͯ͡ผͷ஋ Λฦ͢Α͏ʹ͢Δ • σʔλͷछྨͰ͸ͳ͍ • ಉ͡ itemViewType Ͱ ViewHolder ͕࠶ར༻͞ΕΔ

Header ͱ Footer Λͭ͘Δ • ϨΠΞ΢τͷछྨʢViewHolder ͷछྨʣʹԠͯ͡ผͷ஋ Λฦ͢Α͏ʹ͢Δ • σʔλͷछྨͰ͸ͳ͍ • ಉ͡ itemViewType Ͱ ViewHolder ͕࠶ར༻͞ΕΔ

Header ͱ Footer Λͭ͘Δ public class SimpleAdapter2 extends RecyclerView.Adapter {
 
 private static final int VIEW_TYPE_HEADER = 0;
 private static final int VIEW_TYPE_FOOTER = 1;
 private static final int VIEW_TYPE_ITEM = 2;
 
 …
 
 @Override
 public int getItemCount() {
 return data.size() + 2; // header + footer
 }
 
 @Override
 public int getItemViewType(int position) {
 if (position == 0) {
 return VIEW_TYPE_HEADER;
 }
 if (position == getItemCount() - 1) {
 return VIEW_TYPE_FOOTER;
 }
 return VIEW_TYPE_ITEM;
 }
 }

Header ͱ Footer Λͭ͘Δ public class SimpleAdapter2 extends RecyclerView.Adapter {
 
 …
 
 @Override
 public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
 final LayoutInflater inflater = LayoutInflater.from(parent.getContext());
 switch (viewType) {
 case VIEW_TYPE_HEADER: {
 return HeaderViewHolder.create(inflater, parent);
 }
 case VIEW_TYPE_FOOTER: {
 return FooterViewHolder.create(inflater, parent);
 }
 case VIEW_TYPE_ITEM: {
 final ViewHolder holder = ViewHolder.create(inflater, parent);
 holder.itemView.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 final int position = holder.getAdapterPosition();
 final String text = data.get(position);
 onItemClicked(text);
 }
 });
 return holder;
 }
 }
 
 return null;
 }

Header ͱ Footer Λͭ͘Δ public class SimpleAdapter2 extends RecyclerView.Adapter {
 
 …
 
 @Override
 public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
 if (holder instanceof ViewHolder) {
 final ViewHolder viewHolder = (ViewHolder) holder;
 final String text = data.get(position);
 viewHolder.textView.setText(text);
 }
 }

·ͱΊ

• γϯϓϧͳList, Grid → • ListView, GridView • RecyclerView • ListView, GridView Ͱ͸ແཧͳ഑ஔ → • RecyclerView ·ͱΊ