由于普通的ListView的一些局限性，比如創建水平滾動listView、瀑布流布局。以及item點擊事件和list item 內部空間的點擊事件沖突等等。于是android提供了一款更強大的滾動空間-RecyclerView，RecyclerView不僅能輕松實現ListView的功能，還能實現ListView不能或很難實現的功能。所以現在是時候用RecyclerView來替代ListView了。
新建工程.
- 同樣，新建一個list item 布局文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/fruit_image"
android:layout_width="50dp"
android:layout_height="50dp"/>
<TextView
android:id="@+id/fruit_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"/>
</LinearLayout>
- 新建Fruit類：
package com.example.recyclerview;
/**
* Created by archerlj on 2017/9/17.
*/
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;
}
}
- RecyclerView是定義在support庫中的，在build.gradle文件中導入recyclerView:
dependencies {
......
compile 'com.android.support:recyclerview-v7:26.+'
testCompile 'junit:junit:4.12'
}
- 修改activity_main.xml文件：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
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"></android.support.v7.widget.RecyclerView>
</LinearLayout>
5.創建FruitAdapter類
package com.example.recyclerview;
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.List;
/**
* Created by archerlj on 2017/9/17.
*/
public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {
private List<Fruit> mFruitList;
public FruitAdapter(List<Fruit> mFruitList) {
this.mFruitList = mFruitList;
}
@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();
}
static class ViewHolder extends RecyclerView.ViewHolder {
ImageView fruitImage;
TextView fruitName;
public ViewHolder(View itemView) {
super(itemView);
this.fruitImage = itemView.findViewById(R.id.fruit_image);
this.fruitName = itemView.findViewById(R.id.fruit_name);
}
}
}
繼承RecyclerView.Adapter，并指定泛型類型為FruitAdapter內部定義的ViewHolder類，實現RecyclerView.Adapter抽象類的方法，并提供一個初始化方法，傳入Fruit列表。
6.在MainActivity中配置Adapter，并設置RecyclerView的布局樣式:
package com.example.recyclerview;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import java.util.ArrayList;
import java.util.List;
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);
// 給recyclerView指定一個Linear線性布局
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
FruitAdapter adapter = new FruitAdapter(fruitList);
recyclerView.setAdapter(adapter);
}
private void initFruits() {
for (int i = 0; i < 20; i++) {
Fruit apple = new Fruit("apple", R.mipmap.ic_launcher);
fruitList.add(apple);
}
}
}
運行：
Screenshot_2017-09-17-14-46-42-886_ListView.png
-----------------------------------------------------
下面把上面的垂直列表修改為水平列表
- 修改fruit_item.xml文件：
設置LinearLayout為垂直方向，并把fruit名字放到圖片下面。
<?xml version="1.0" encoding="utf-8"?>
<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="50dp"
android:layout_height="50dp"
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>
- MainActivity中，給linearManager設置方向:
......
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
recyclerView.setLayoutManager(layoutManager);
......
運行:
Screenshot_2017-09-17-18-16-22-065_RecyclerView.png
-----------------------------------------------------
接下來，我們把上面的代碼修改為實現一個簡單的瀑布流樣式
- 修改fruit_item.xml文件：
指定LinearLayout的layout_width為match_parent， 后面我們會指定瀑布流的列數，所以fruit_item的寬度應該根據列數來動態填充。
<?xml version="1.0" encoding="utf-8"?>
<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="50dp"
android:layout_height="50dp"
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>
- 修改MainActivity，修改RecyclerView的布局樣式為StaggeredGridLayoutManager瀑布流樣式：
......
RecyclerView recyclerView = (RecyclerView)findViewById(R.id.recycler_view);
StaggeredGridLayoutManager gridLayoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(gridLayoutManager);
......
運行：
Screenshot_2017-09-17-18-27-42-030_RecyclerView.png
-----------------------------------------------------
下面，我們給瀑布流中的list item整體和item上的圖片分別添加點擊事件。如果是在ListView中，要把整個item的點擊事件和item中其他控件的點擊事件分開還是挺麻煩的。所以RecylerView干脆把點擊事件屏蔽了，所有的點擊事件都需要用戶自己去定義。不過這并不是一件麻煩的事。
修改FruitAdapter:
1.在內部類ViewHolder中添加一個fruitView View用來保存整個item視圖。
static class ViewHolder extends RecyclerView.ViewHolder {
View fruitView;
ImageView fruitImage;
TextView fruitName;
public ViewHolder(View itemView) {
super(itemView);
fruitView = itemView;
this.fruitImage = itemView.findViewById(R.id.fruit_image);
this.fruitName = itemView.findViewById(R.id.fruit_name);
}
}
- 修改onCreateViewHolder方法，給正個list item和item 里面的圖片添加點擊事件：
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item, parent, false);
final ViewHolder holder = new ViewHolder(view);
holder.fruitView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int position = holder.getAdapterPosition();
Fruit fruit = mFruitList.get(position);
Toast.makeText(view.getContext(), "you clicked fruitView: " + fruit.getName(), Toast.LENGTH_LONG).show();
}
});
holder.fruitImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int position = holder.getAdapterPosition();
Fruit fruit = mFruitList.get(position);
Toast.makeText(view.getContext(), "you clicked image: " + fruit.getName(), Toast.LENGTH_LONG).show();
}
});
return holder;
}
運行：分別點擊每個item里面的圖片和圖片之外的區域
Screenshot_2017-09-17-18-37-48-449_RecyclerView.png
Screenshot_2017-09-17-18-37-52-706_RecyclerView.png
