安卓开发：RecyclerView的使用（二）

如果你越来越冷漠，你以为你成长了，但其实没有。长大应该是变得温柔，对全世界都温柔。

查看文章：

RecyclerView实现横向滚动和瀑布流布局

首先要对 fruit_item 布局进行修改，因为目前这个布局里面的元素是水平排列的，适用于纵向滚动的场景，而如果我们要实现横向滚动的话，应该把 fruit_item 里的元素改成垂直排列才比较合理。修改 fruit_item.xml 中的代码，如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="100dp"
     android:layout_height="wrap_content" >
     <ImageView
         android:id="@+id/fruit_image"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center_horizontal" />
     <TextView
         android:id="@+id/fruit_name"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center_horizontal"
         android:layout_marginTop="10dp" />
</LinearLayout>

可以看到，我们将 LinearLayout 改成垂直方向排列，并把宽度设为 100dp。这里将宽度指定为固定值是因为每种水果的文字长度不一致，如果用 wrap_content 的话，RecyclerView 的子项就会有长有短，非常不美观；而如果用 match_parent 的话，就会导致宽度过长，一个子项占满整个屏幕。

然后我们将 ImageView 和 TextView 都设置成了在布局中水平居中，并且使用 layout_ marginTop 属性让文字和图片之间保持一些距离。

接下来修改 MainActivity 中的代码，如下所示：

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);
         layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
         recyclerView.setLayoutManager(layoutManager);
         FruitAdapter adapter = new FruitAdapter(fruitList);
         recyclerView.setAdapter(adapter);
     }
     ...
}

MainActivity 中只加入了一行代码，调用 LinearLayoutManager 的 setOrientation()方法来设置布局的排列方向，默认是纵向排列的，我们传入 LinearLayoutManager.HORIZONTAL 表示让布局横行排列，这样 RecyclerView 就可以横向滚动了。

炫酷的瀑布流布局

首先还是来修改一下 fruit_item.xml 中的代码，如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="match_parent" 
     android:layout_height=" wrap_content"
     android:layout_margin="5dp" >
     <ImageView
         android:id="@+id/fruit_image"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center_horizontal" />
     <TextView
         android:id="@+id/fruit_name"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="left"
         android:layout_marginTop="10dp" />
</LinearLayout>

这里做了几处小的调整，首先将 LinearLayout 的宽度由 100dp 改成了 match_parent，因为瀑布流布局的宽度应该是根据布局的列数来自动适配的，而不是一个固定值。另外我们使用了 layout_margin 属性来让子项之间互留一点间距，这样就不至于所有子项都紧贴在一些。还有就是将 TextView 的对齐属性改成了居左对齐，因为待会我们会将文字的长度变长，如果还是居中显示就会感觉怪怪的。

接着修改 MainActivity 中的代码，如下所示：

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);
         StaggeredGridLayoutManager layoutManager = new
         StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
         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(
             getRandomLengthName("Apple"), R.drawable.apple_pic);
             fruitList.add(apple);
             Fruit banana = new Fruit(
             getRandomLengthName("Banana"), R.drawable.banana_pic);
             fruitList.add(banana);
             Fruit orange = new Fruit( 
             getRandomLengthName("Orange"), R.drawable.orange_pic);
             fruitList.add(orange);
             Fruit watermelon = new Fruit(
             getRandomLengthName("Watermelon"), R.drawable.watermelon_pic);
             fruitList.add(watermelon);
             Fruit pear = new Fruit(
             getRandomLengthName("Pear"), R.drawable.pear_pic);
             fruitList.add(pear);
             Fruit grape = new Fruit(
             getRandomLengthName("Grape"), R.drawable.grape_pic);
             fruitList.add(grape);
             Fruit pineapple = new Fruit(
             getRandomLengthName("Pineapple"), R.drawable.pineapple_pic);
             fruitList.add(pineapple);
             Fruit strawberry = new Fruit(
             getRandomLengthName("Strawberry"), R.drawable.strawberry_pic);
             fruitList.add(strawberry);
             Fruit cherry = new Fruit(
             getRandomLengthName("Cherry"), R.drawable.cherry_pic);
             fruitList.add(cherry);
             Fruit mango = new Fruit(
             getRandomLengthName("Mango"), R.drawable.mango_pic);
             fruitList.add(mango);
         }
     }
     private String getRandomLengthName(String name) {
         Random random = new Random();
         int length = random.nextInt(20) + 1;
         StringBuilder builder = new StringBuilder();
         for (int i = 0; i < length; i++) {
             builder.append(name);
         }
         return builder.toString();
     }
}

首先，在 onCreate()方法中，我们创建了一个 StaggeredGridLayoutManager 的实例。 StaggeredGridLayoutManager 的构造函数接收两个参数，第一个参数用于指定布局的列数，传入 3 表示会把布局分为 3 列；第二个参数用于指定布局的排列方向，传入 StaggeredGridLayoutManager.VERTICAL 表示会让布局纵向排列，最后再把创建好的实例设置到 RecyclerView 当中就可以了，就是这么简单！

没错，仅仅修改了一行代码，我们就已经成功实现瀑布流布局的效果了。不过由于瀑布流布局需要各个子项的高度不一致才能看出明显的效果，为此我又使用了一个小技巧。这里我们把眼光聚焦在 getRandomLengthName()这个方法上，这个方法使用了 Random 对象来创造一个 1 到 20 之间的随机数，然后将参数中传入的字符串随机重复几遍。在 initFruits()方法中，每个水果的名字都改成调用 getRandomLengthName()这个方法来生成，这样就能保证各水果名字的长短差距都比较大，子项的高度也就各不相同了。

转载声明：此篇文章转载自郭霖作者写的《第一行代码》书中的章节，因为此章节对我帮助很大，并且写的非常详细，以便之后方便查阅。特在此做转载声明。