Android RecycleView 的多布局
来源:互联网 发布:c语言开发游戏 编辑:程序博客网 时间:2024/05/24 04:35
前言
上一篇和大家分享了recycleview的基本的用法,实现了recycleview的3种不同的布局方式。上一篇种也提到了recycleview可以实现很多的功能,比如说recycleview的多布局,今天写的这一篇,recycleview的多布局。
名言
很多事情努力了未必有结果,但是不努力却什么改变也没有。
好了接下来就进入正题吧:
首先我们看下我们要实现的效果是什么样子的。
可能有的人看了这个界面在想,这个界面为什么要用recycleview来实现,用一般的布局就可以做啊,何必那么复杂?
原因:
1、我真的不晓得举出什么样的例子了。
2、只是做个例子来看看recycleview是怎么去实现多布局的。
3、这个例子也告诉大家,写界面之前,想清楚,怎么简单怎么来。
好了首先我们要做的事情就是创建布局,这个例子中我把这个页面分成了4个布局。依次来看看,很简单的。
第一个布局item_one:
<TextView android:id="@+id/textview" android:layout_width="match_parent" android:layout_height="44dp" android:background="#ed9b9b" android:gravity="center" android:text="" />
第二个布局item_two:
<ImageView android:layout_margin="5dp" android:id="@+id/img" android:layout_width="match_parent" android:layout_height="250dp" />
第三个布局item_three:
<Button android:id="@+id/btn_one" android:layout_width="0dp" android:layout_height="50dp" android:layout_margin="5dp" android:layout_weight="1" android:text="" /> <Button android:id="@+id/btn_two" android:layout_width="0dp" android:layout_height="50dp" android:layout_margin="5dp" android:layout_weight="1" android:text="" />
第四个布局item_four:
<ImageView android:id="@+id/img_four" android:layout_width="match_parent" android:layout_height="250dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="200dp" android:orientation="horizontal"> <TextView android:id="@+id/tv_one" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="#85d6df" android:gravity="center" android:text="" android:textSize="16sp" /> <TextView android:id="@+id/tv_two" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="#d188c5" android:gravity="center" android:text="" android:textSize="16sp" /> </LinearLayout>
主要界面的布局:
<android.support.v7.widget.RecyclerView android:id="@+id/recycle" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="16dp"></android.support.v7.widget.RecyclerView>
布局就是这样随性,顽皮!
布局布好了接下里recycleview重要的就是adapter了,我先贴出adapter的所有的代码在分快的讲解。
public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> { private Context context = null; private LayoutInflater inflater = null; private ItemClick click = null; public MyAdapter(Context context) { this.context = context; inflater = LayoutInflater.from(context); } @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { switch (viewType) { case ONE_ITEM: View view1 = inflater.inflate(R.layout.item_one, parent, false); OneHolder oneHolder = new OneHolder(view1); return oneHolder; case TWO_ITEM: View view2 = inflater.inflate(R.layout.item_two, parent, false); TwoHolder twoHolder = new TwoHolder(view2); return twoHolder; case THREE_ITEM: View view3 = inflater.inflate(R.layout.item_three, parent, false); ThreeHolder threeHolder = new ThreeHolder(view3); return threeHolder; case FOUR_ITEM: View view4 = inflater.inflate(R.layout.item_four, parent, false); FourHolder fourHolder = new FourHolder(view4); return fourHolder; } return null; } @Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { if (holder instanceof OneHolder) { OneHolder oneHolder = (OneHolder) holder; oneHolder.textView.setText("我是头部"); } if (holder instanceof TwoHolder) { TwoHolder twoHolder = (TwoHolder) holder; twoHolder.img.setImageResource(R.mipmap.four); } if (holder instanceof ThreeHolder) { ThreeHolder threeHolder = (ThreeHolder) holder; threeHolder.btn_one.setText("按钮1号"); threeHolder.btn_two.setText("按钮2号"); } if (holder instanceof FourHolder) { FourHolder fourHolder = (FourHolder) holder; fourHolder.img_four.setImageResource(R.mipmap.one); fourHolder.tv_one.setText("海贼王"); fourHolder.tv_two.setText("洒家卖蘑菇"); } } @Override public int getItemCount() { return 4; } private final int ONE_ITEM = 0; private final int TWO_ITEM = 1; private final int THREE_ITEM = 2; private final int FOUR_ITEM = 3; @Override public int getItemViewType(int position) { if (position == ONE_ITEM) { return ONE_ITEM; } else if (position == TWO_ITEM) { return TWO_ITEM; } else if (position == THREE_ITEM) { return THREE_ITEM; } else if (position == FOUR_ITEM) { return FOUR_ITEM; } return 0; } class OneHolder extends RecyclerView.ViewHolder { private TextView textView = null; public OneHolder(View itemView) { super(itemView); textView = (TextView) itemView.findViewById(R.id.textview); } } class TwoHolder extends RecyclerView.ViewHolder { private ImageView img = null; public TwoHolder(View itemView) { super(itemView); img = (ImageView) itemView.findViewById(R.id.img); } } class ThreeHolder extends RecyclerView.ViewHolder { private Button btn_one, btn_two = null; public ThreeHolder(View itemView) { super(itemView); btn_one = (Button) itemView.findViewById(R.id.btn_one); btn_two = (Button) itemView.findViewById(R.id.btn_two); } } class FourHolder extends RecyclerView.ViewHolder { private ImageView img_four = null; private TextView tv_one, tv_two = null; public FourHolder(View itemView) { super(itemView); img_four = (ImageView) itemView.findViewById(R.id.img_four); tv_one = (TextView) itemView.findViewById(R.id.tv_one); tv_two = (TextView) itemView.findViewById(R.id.tv_two); } }}
第一步先看看Holder吧
第一个布局的holder
class OneHolder extends RecyclerView.ViewHolder { private TextView textView = null; public OneHolder(View itemView) { super(itemView); textView = (TextView) itemView.findViewById(R.id.textview); } }
这里有几个布局就写几个holder,我这里写了4个布局所以有4个holder,代码上面都有我就不依次贴出来了。这个相信大家都能够看懂。
第二步:
public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> { @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {...} @Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {...} @Override public int getItemCount() {return null;}}
自定义的holder继承了recycleview的adapter重写了3个方法:
放布局文件:
@Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {...}
绑定数据:
@Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {...}
有多少个item:
@Override public int getItemCount() {return null;}
第三步:
private final int ONE_ITEM = 0; private final int TWO_ITEM = 1; private final int THREE_ITEM = 2; private final int FOUR_ITEM = 3; @Override public int getItemViewType(int position) { if (position == ONE_ITEM) { return ONE_ITEM; } else if (position == TWO_ITEM) { return TWO_ITEM; } else if (position == THREE_ITEM) { return THREE_ITEM; } else if (position == FOUR_ITEM) { return FOUR_ITEM; } return 0; }
先来看看这个方法:
@Override public int getItemViewType(int position) {...}
这个就是来区分有多少个布局
position = 0 的时候就是整个recycleview的第一行
position = 1 的时候就是整个recycleview的第二行
position = 2 的时候就是整个recycleview的第三行
position = 3 的时候就是整个recycleview的第四行
这就满足了我们每一行都是不同布局的要求。
接下来就到第二步的:
绑定布局的这个方法中来。
@Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {...}
这个方法里面有一个viewtype这个就是来区分布局的。
所以在这个方法里面我用了一个switch循环来区分是哪个布局。
@Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { switch (viewType) { case ONE_ITEM: View view1 = inflater.inflate(R.layout.item_one, parent, false); OneHolder oneHolder = new OneHolder(view1); return oneHolder; case TWO_ITEM: View view2 = inflater.inflate(R.layout.item_two, parent, false); TwoHolder twoHolder = new TwoHolder(view2); return twoHolder; case THREE_ITEM: View view3 = inflater.inflate(R.layout.item_three, parent, false); ThreeHolder threeHolder = new ThreeHolder(view3); return threeHolder; case FOUR_ITEM: View view4 = inflater.inflate(R.layout.item_four, parent, false); FourHolder fourHolder = new FourHolder(view4); return fourHolder; } return null; }
绑定完成布局以后我们就应该插入数据:
就在第二步的
@Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { if (holder instanceof OneHolder) { OneHolder oneHolder = (OneHolder) holder; oneHolder.textView.setText("我是头部"); } if (holder instanceof TwoHolder) { TwoHolder twoHolder = (TwoHolder) holder; twoHolder.img.setImageResource(R.mipmap.four); } if (holder instanceof ThreeHolder) { ThreeHolder threeHolder = (ThreeHolder) holder; threeHolder.btn_one.setText("按钮1号"); threeHolder.btn_two.setText("按钮2号"); } if (holder instanceof FourHolder) { FourHolder fourHolder = (FourHolder) holder; fourHolder.img_four.setImageResource(R.mipmap.one); fourHolder.tv_one.setText("海贼王"); fourHolder.tv_two.setText("洒家卖蘑菇"); } }
instanceof它的作用是测试它左边的对象是否是它右边的类的实例,返回boolean类型的数据。
因为我们这里是开始是继承他原有的adapter和holder所以我们这里要把,他原有的holder转换成自己的holder。
OneHolder oneHolder = (OneHolder) holder;
因此就有了这一步。
好了重要的部分也就哔哔完了。
还是吧主页面的代码贴一下吧
public class MoreActivity extends AppCompatActivity{ private RecyclerView recyclerView = null; private MyAdapter adapter = null; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_more); recyclerView = (RecyclerView) findViewById(R.id.recycle); RecyclerView.LayoutManager manager = new LinearLayoutManager(this); recyclerView.setLayoutManager(manager); adapter = new MyAdapter(this); recyclerView.setAdapter(adapter); adapter.notifyDataSetChanged(); }}
打完收工~~~有问题的地方还请大神们提出来多多指教!