安卓recyclerview复杂布局（学习微信首页消息布局-RecyclerView）

大家是不是都对微信首页的布局感兴趣呢？以下是用RecyclerView写的demo

安卓recyclerview复杂布局（学习微信首页消息布局-RecyclerView）(1)

微信首页布局

那么今天我们就来讲解RecyclerView的用法，不懂的可以评论或者私信问

RecyclerView 基本用法

因为RecyclerView属于新增的控件,Android将RecyclerView定义在support库里。若要使用RecyclerView,第一步是要在build.gradle中添加对应的依赖库。添加RecyclerView 依赖库

在app/build.gradle中的dependencies闭包添加以下内容：

implementation 'com.android.support:recyclerview-v7:27.1.1'

然后点击顶部的Sync Now进行同步

修改 activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <android.support.v7.widget.RecyclerView android:id="@ id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>

由于RecyclerView不是内置在系统SDK中,需要把其完整的包名路径写出来

新建 Fruit.java

public class Fruit { private String name; private int imageId; public Fruit(String name, int imageId){ this.name = name; this.imageId = imageId; } public String getName() { return name; } public int getImageId() { return imageId; } }

新建 fruit_item.xml

创建ImageView来显示水果图片,TextView来显示水果名字。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@ id/fruit_image"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@ id/fruitname" android:layout_gravity="center_vertical" android:layout_marginLeft="10dp"/> </LinearLayout>

新增适配器 FruitAdapter

为RecyclerView新增适配器FruitAdapter,并让其继承于RecyclerView.Adapter,把泛型指定为FruitAdapter.ViewHolder。

public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> { private List<Fruit> mFruitList; static class ViewHolder extends RecyclerView.ViewHolder{ ImageView fruitImage; TextView fruitName; public ViewHolder (View view) { super(view); fruitImage = (ImageView) view.findViewById(R.id.fruit_image); fruitName = (TextView) view.findViewById(R.id.fruitname); } } public FruitAdapter (List <Fruit> fruitList){ mFruitList = fruitList; } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType){ View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item,parent,false); ViewHolder holder = new ViewHolder(view); return holder; } @Override public void onBindViewHolder(ViewHolder holder, int position){ Fruit fruit = mFruitList.get(position); holder.fruitImage.setImageResource(fruit.getImageId()); holder.fruitName.setText(fruit.getName()); } @Override public int getItemCount(){ return mFruitList.size(); }

定义内部类ViewHolder,并继承RecyclerView.ViewHolder。传入的View参数通常是RecyclerView子项的最外层布局。

FruitAdapter构造函数,用于把要展示的数据源传入,并赋予值给全局变量mFruitList。

FruitAdapter继承RecyclerView.Adapter。因为必须重写onCreateViewHolder(),onBindViewHolder()和getItemCount()三个方法 onCreateViewHolder()用于创建ViewHolder实例,并把加载的布局传入到构造函数去,再把ViewHolder实例返回。 onBindViewHolder()则是用于对子项的数据进行赋值,会在每个子项被滚动到屏幕内时执行。position得到当前项的Fruit实例。 getItemCount()返回RecyclerView的子项数目。

修改 MainActivity.java

public class MainActivity extends AppCompatActivity { private List<Fruit> fruitList = new ArrayList<>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initFruits(); RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view); LinearLayoutManager layoutManager = new LinearLayoutManager(this); recyclerView.setLayoutManager(layoutManager); FruitAdapter adapter = new FruitAdapter(fruitList); recyclerView.setAdapter(adapter); } private void initFruits() { for (int i = 0; i < 2; i ) { Fruit apple = new Fruit("Apple", R.drawable.apple_pic); fruitList.add(apple); Fruit banana = new Fruit("Banana", R.drawable.banana_pic); fruitList.add(banana); Fruit orange = new Fruit("Orange", R.drawable.orange_pic); fruitList.add(orange); Fruit watermelon = new Fruit("Watermelon", R.drawable.watermelon_pic); fruitList.add(watermelon); Fruit pear = new Fruit("Pear", R.drawable.pear_pic); fruitList.add(pear); Fruit grape = new Fruit("Grape", R.drawable.grape_pic); fruitList.add(grape); Fruit pineapple = new Fruit("Pineapple", R.drawable.pineapple_pic); fruitList.add(pineapple); Fruit strawberry = new Fruit("Strawberry", R.drawable.strawberry_pic); fruitList.add(strawberry); Fruit cherry = new Fruit("Cherry", R.drawable.cherry_pic); fruitList.add(cherry); Fruit mango = new Fruit("Mango", R.drawable.mango_pic); fruitList.add(mango); } } }

LayoutManager用于指定RecyclerView的布局方式。LinearLayoutManager指的是线性布局。

运行效果：

安卓recyclerview复杂布局（学习微信首页消息布局-RecyclerView）(2)

修改RecyclerView 显示效果横向滚动修改 fruit_item.xml

把LinearLayout改成垂直排列,因为水果名字长度不一样,把宽度改为100dp。ImageView和TextView都改为水平居中

修改MainActivity.java

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initFruits(); RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view); LinearLayoutManager layoutManager = new LinearLayoutManager(this); layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL); recyclerView.setLayoutManager(layoutManager); FruitAdapter adapter = new FruitAdapter(fruitList); recyclerView.setAdapter(adapter); }

通过调用setOrientation()把布局的排列方向改为水平排列。

得益于RecyclerView的设计,我们可以通过LayoutManager实现各种不同的排列方式的布局。

运行结果:

安卓recyclerview复杂布局（学习微信首页消息布局-RecyclerView）(3)