(三) UI开发 Part 3 RecyclerView

RecyclerView

1)RecyclerView的基本用法

2)横向滚动和瀑布流滚动

3)注册点击事件

3.6 强大的滚动控件 RecyclerView

ListView缺点：

1.不使用技巧优化，ListView效率很差。

2.扩展性能不够好，只能实现数据纵向滚动。

3.6.1 RecyclerView的基本用法

1.RecylerView定义在了support库当中。

首先需要在build.gradle中添加相应的依赖库，在dependencies闭包中添加内容。

    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:recyclerview-v7:24.2.1'
    testCompile 'junit:junit:4.12'

2.修改main_layout.xml中的代码

在布局中加入RecylerView。由于RecyclerView并不是内置在系统SDK中的，所以需要把完整的路径写出来。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     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>

3.创建Hero类和hero_item.xml（同ListView）

public class Hero {
    private String name;
    private int imageId;
    public Hero(String name, int imageId){
        this.name = name;
        this.imageId = imageId;
    }

    public String getName() {
        return name;
    }

    public int getImageId() {
        return imageId;
    }
}

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/hero_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/hero_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"/>
</LinearLayout>

4.新建HeroAdapter类，让这个适配器继承自RecyclerView.Adapter，并将泛型指定为HeroAdapter.ViewHolder，ViewHolder是在HeroAdapter中定义的一个内部类。

public class HeroAdapter extends RecyclerView.Adapter<HeroAdapter.ViewHolder>{

    private List<Hero> mHeroList;

    static class ViewHolder extends RecyclerView.ViewHolder{
        ImageView heroImage;
        TextView heroName;

        public ViewHolder(View view){
            super(view);
            heroImage = (ImageView)view.findViewById(R.id.hero_image);
            heroName = (TextView)view.findViewById(R.id.hero_name);
        }
    }

    public HeroAdapter(List<Hero> heroList){
        mHeroList = heroList;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.hero_item, parent, false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Hero hero = mHeroList.get(position);
        holder.heroImage.setImageResource(hero.getImageId());
        holder.heroName.setText(hero.getName());
    }

    @Override
    public int getItemCount() {
        return mHeroList.size();
    }
}

首先定义一个内部类ViewHolder，ViewHolder要继承自RecylcerView.ViewHolder。ViewHolder的构造函数中传入的View参数，通常为RecylclerView子项的最外层布局。可以通过findVIewById()方法来获取到布局中的ImageView和TextView的实例。

HeroAdapter中的构造函数，将要展示的数据源传进来，并赋值给一个全局变量mHeroList，后续操作都在该数据源的基础上进行。

由于HeroAdapter继承了RecyclerView.Adapter，那么就必须重写onCreatViewHolder()，onBindViewHolder()和getItemCount()三个方法。

onCreatViewHolder()方法用于创建ViewHolder实例，在这个方法中将hero_item布局传进来，然后创建一个VIewHolder实例，将加载出来的布局传入到构造函数中，最后将ViewHolder实例返回。

 @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.hero_item, parent, false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

onBindViewHolder()方法是用于对RecyclerView子项的数据进行赋值，会在每个子项被滚动到屏幕内的时候执行，通过position参数得到当前项的Hero实例，然后再将数据置入ViewHolder的ImageView和TextView。

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Hero hero = mHeroList.get(position);
        holder.heroImage.setImageResource(hero.getImageId());
        holder.heroName.setText(hero.getName());
    }

getItemCount()方法用于告诉RecycleView一共有多少子项，直接返回数据源的长度。

 @Override
    public int getItemCount() {
        return mHeroList.size();
    }

5.修改MainActivity中的代码

public class MainActivity extends AppCompatActivity {

    private List<Hero> heroList = new ArrayList<Hero>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);
        initHeros();
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        HeroAdapter adapter = new HeroAdapter(heroList);
        recyclerView.setAdapter(adapter);
    }

    private void initHeros(){
        for(int i = 0 ; i < 2 ; i ++){
            Hero gareen = new Hero("gareen", R.drawable.gareen);
            heroList.add(gareen);
            Hero annie = new Hero("annie", R.drawable.annie);
            heroList.add(annie);
            Hero shana = new Hero("shana", R.drawable.shana);
            heroList.add(shana);
            Hero teemo = new Hero("teemo", R.drawable.teemo);
            heroList.add(teemo);
        }
    }
}

用同样的initHeros()方法，初始化所有英雄数据。

在onCreat()方法中先获取到RecyclerView的实例，然后创建一个LinearLayoutManager对象，并设置到RecyclerView当中。LayoutManager用于指定RecyclerView的布局方式，这里使用LinearLayoutManager为线性布局。然后创建HeroAdapter的实例，并将英雄数据传入HeroAdapter的构造函数中，最后调用RecycleView的setAdapter()方法来完成适配器设置，完成RecyclerView和数据之间的关联。

3.6.2 实现横向滚动和瀑布流滚动

1.横向滚动

a.首先对hero_item的布局进行修改，目前布局里的元素水平放置的，即为horizontal，把元素改为垂直放置，宽度设为100dp

ImageView和TextView都设置为在布局中水平居中，并使用layout_marginTop让文字和图片之间保持一定距离

<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/hero_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        />

    <TextView
        android:id="@+id/hero_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="10dp"/>
</LinearLayout>

b.修改MainActivity中的代码

@Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);
        initHeros();
        RecyclerView recyclerView = (RecyclerView) f
        indViewById(R.id.recycler_view);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        recyclerView.setLayoutManager(layoutManager);
        HeroAdapter adapter = new HeroAdapter(heroList);
        recyclerView.setAdapter(adapter);
    }

加一句

layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);

调用LinearLayoutManager的setOri()方法来设置布局的排列方向，默认为纵向，传入LinearLayoutManger.HORIZEONTAL表示让布局横向排列。

运行程序：

原因：ListView的布局排列是由自身去管理的，而RecylerView则由LayoutManager管理，LayoutManager中制定了一套可扩展的布局排列接口，子类只要按照接口的规范来实现，就能定制出各种不同的排列方式的布局。

2.瀑布流布局

a.修改hero_item.xml中的布局，宽度由列数自动匹配而不是一个固定值，用layout_margin来让子项之间互留一点间距，TextView的对齐属性改为了左对齐，因为待会会将文字的长度边长，居中显示很奇怪

<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/hero_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        />

    <TextView
        android:id="@+id/hero_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_marginLeft="10dp"/>
</LinearLayout>

b.修改MainActivit.java中的代码

在onCreat()方法中创建了一个StaggeredGridLayoutManager的实例，构造函数接受两个参数，第一个参数用于指定布局的列数，第二个参数用于制定布局的排列方向，传入StaggeredGridLayoutManager.VERTICAL表示会让布局纵向排列。

在getRandomLengthName()方法中得到每个英雄名字都长短不一，显示出来的效果更明显

public class MainActivity extends AppCompatActivity {

    private List<Hero> heroList = new ArrayList<Hero>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);
        initHeros();
        RecyclerView recyclerView = (RecyclerView)
        findViewById(R.id.recycler_view);
        StaggeredGridLayoutManager layoutManager = new
        StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);
        HeroAdapter adapter = new HeroAdapter(heroList);
        recyclerView.setAdapter(adapter);
    }

    private void initHeros(){
        for(int i = 0 ; i < 3 ; i ++){
            Hero gareen = new Hero(getRandomLengthName("gareen"), R.drawable.gareen);
            heroList.add(gareen);
            Hero annie = new Hero(getRandomLengthName("annie"), R.drawable.annie);
            heroList.add(annie);
            Hero shana = new Hero(getRandomLengthName("shana"), R.drawable.shana);
            heroList.add(shana);
            Hero teemo = new Hero(getRandomLengthName("teemo"), R.drawable.teemo);
            heroList.add(teemo);
        }
    }

    private String getRandomLengthName(String name){
        Random random = new Random();
        int length = random.nextInt(20) + 1 ;
        StringBuilder res = new StringBuilder();
        for(int i = 0 ; i < length ; i ++){
            res.append(name);
        }
        return res.toString();
    }
}        

运行程序

3.6.3 RecycleView的点击事件

ListView中的setOnClickListener()方法注册的是子项的点击事件，如果是点击子项里的按钮，则实现起来很麻烦。

RecyclerView摒弃了子项点击事件的监听器，所有监听事件都由具体的View来注册。

在RecyclerView中注册点击事件，修改MainActivity中的代码

public class HeroAdapter extends RecyclerView.Adapter<HeroAdapter.ViewHolder>{

    private List<Hero> mHeroList;

    static class ViewHolder extends RecyclerView.ViewHolder{
        View heroView;
        ImageView heroImage;
        TextView heroName;

        public ViewHolder(View view){
            super(view);
            heroView = view;
            heroImage = (ImageView)view.findViewById(R.id.hero_image);
            heroName = (TextView)view.findViewById(R.id.hero_name);
        }
    }

    public HeroAdapter(List<Hero> heroList){
        mHeroList = heroList;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.hero_item, parent, false);

        final ViewHolder holder = new ViewHolder(view);
        holder.heroView.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Hero hero = mHeroList.get(position);
                Toast.makeText(v.getContext() , "You clicked view " + hero.getName(), Toast.LENGTH_SHORT ).show();
            }
        });
        holder.heroImage.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Hero hero = mHeroList.get(position);
                Toast.makeText(v.getContext() , "You clicked image " + hero.getName(), Toast.LENGTH_SHORT).show();
            }
        });

        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Hero hero = mHeroList.get(position);
        holder.heroImage.setImageResource(hero.getImageId());
        holder.heroName.setText(hero.getName());
    }

    @Override
    public int getItemCount() {
        return mHeroList.size();
    }
}

在ViewHolder中添加了heroView变量用来保存子项最外层布局的实例，然后在onCreatViewHolder()方法中注册事件。

运行程序：

点击图片部分：

显示点击了图片

点击图片下的TextView部分：由于TextView并没有注册时间，所以该事件会被子项最外层布局捕捉到。

最后一点小小的总结：

1.线性布局中orientation属性默认为horizontal（水平方向）

2.android:gravity用于指定文字在控件中的对齐方式，android:layout_gravity用于指定控件在布局中的对齐方式。

3.将控件宽度指定为0dp，用android:layout_weight来决定控件在屏幕的比例宽度

<EditText
     android:id="@+id/input_message"
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:layout_weight="1" />
<Button
     android:id="@+id/button"
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:layout_weight="1"
     android:text="Button"/>

表示EditText和Button以1:1的比例平分屏幕，以此类推。

4.动态加载布局的LayoutInflater方法，LayoutInflater的from()方法可以构建出一个LayouInflater对象，然后调用inflate()方法就可以加载一个布局文件。

inflate()方法接受两个参数，第一个参数要加载的布局文件的id，第二个参数是给加载好的布局再添加一个父布局。

接收三个参数，第三个为boolean型，false表示只让在父布局中声明的layout属性生效，但不会为View添加父布局。

ListView中的标准写法为：

View view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);