Android 5.X新特性——列表与卡片

1.RecyclerView

        在Android5.x中将使用了很久的ListView做了升级，增加了一个使用更方便、效率更高的控件——RecyclerView。RecyclerView是support-v7包中的新组件，是一个功能非常强大的滑动组件，与经典的ListView相比，它同样拥有item回收复用功能，但是RecyclerView可以直接把ViewHolder的实现封装起来，用户只要实现自己的ViewHolder就可以了，该组件会自动帮你回收服用每一个item。

         要使用更RecyclerView，首先需要在项目中引入com.android.support:recyclerview-v7:x.x.x的依赖。在布局中使用RecyclerView与使用ListView类似，同样需要使用一个List item的布局，在Material Design中，通常与CardView配合使用，后面我们会详细讲解CardView的使用方法。

        使用RecyclerView的重点与使用ListView一样，需要使用一个合适的数据适配器来加载数据，RecyclerView中需要重写很多的方法都似曾相识，不过RecyclerView更加先进的是，它已经封装好了ViewHolder，只需要实现功能就可以了，而使用上仍然是跟在ListView中使用ViewHolder一样，代码如下所示。

package test.chenj.study_12;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;

/**
* Created by 72312 on 2018/1/11.
*/

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {
private OnItemClickListener mOnItemClickListener;
private List<String> mData;

public RecyclerAdapter(List<String> mData) {
this.mData = mData;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//将布局转化为View，并传递给RecyclerView封装好的ViewHolder
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false);
return new ViewHolder(view);
}

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
//建立起ViewHolder中视图与数据的关联
holder.textView.setText(mData.get(position));
}

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

public void setOnItemClickListener(OnItemClickListener listener) {
mOnItemClickListener = listener;
}

class ViewHolder extends  RecyclerView.ViewHolder implements View.OnClickListener{
TextView textView;
public ViewHolder(View itemView) {
super(itemView);
textView = (TextView)itemView;
textView.setOnClickListener(this);
}

@Override
public void onClick(View v) {
if(mOnItemClickListener != null) {
mOnItemClickListener.onItemClick(v, getPosition());
}
}
}

interface OnItemClickListener {
void onItemClick(View view, int position);
}
}

        上面就是一个非常简单却典型的RecyclerView，通过onCreateViewHolder将List Item的布局转为为View，并传递给
RecyclerView封装好的ViewHolder，就可以将数据与视图关联起来了。但是有一点需要注意的是，Android并没有给RecyclerView增加点击时间，所以我们需要自己使用接口回调机制，创建一个点击事件的接口，代码如下所示。

private OnItemClickListener mOnItemClickListener;
public void setOnItemClickListener(OnItemClickListener listener) {
mOnItemClickListener = listener;
}
interface OnItemClickListener {
void onItemClick(View view, int position);
}

类似ListView的List Item视图如下所示。

<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:textSize="40sp"
android:gravity="center"
android:background="#bebebe"
android:layout_margin="3dp">
</TextView>

        当然紧紧是优化性能也是不够的，让开发者能够更加方便地使用也是非常重要的。Google在RecyclerView中定义了LayoutManager来帮助开发者更加方便地创建不同地布局，下面地例子就演示了如何创建简单地水平和竖直两种布局方式。当然你也可以通过自定义地LayoutManager来创建自己地布局，核心代码如下所示。

recycler_view.setLayoutManager(new LinearLayoutManager(RecyclerViewActivity.this));
recycler_view.setLayoutManager(new GridLayoutManager(RecyclerViewActivity.this, 3));

        完整代码如下所示。

package test.chenj.study_12;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.annotation.TargetApi;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Spinner;

import java.util.ArrayList;
import java.util.List;

public class RecyclerViewActivity extends AppCompatActivity {
private RecyclerView recycler_view;
private RecyclerAdapter recyclerAdapter;
private RecyclerView.LayoutManager layoutManager;
private Spinner spinner;
private List<String> mData = new ArrayList<>();

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_recycler_view);
recycler_view = (RecyclerView)findViewById(R.id.recycler_view);
layoutManager = new LinearLayoutManager(this);
recycler_view.setLayoutManager(layoutManager);
recycler_view.setHasFixedSize(true);
//设置显示动画
recycler_view.setItemAnimator(new DefaultItemAnimator());

spinner = (Spinner)findViewById(R.id.spinner);
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
if(position == 0) {
recycler_view.setLayoutManager(new LinearLayoutManager(RecyclerViewActivity.this));
} else if(position == 1) {
recycler_view.setLayoutManager(new GridLayoutManager(RecyclerViewActivity.this, 3));
} else {

}
}

@Override
public void onNothingSelected(AdapterView<?> parent) {

}
});

//增加测试数据
mData.add("Recycler");
mData.add("Recycler1");
mData.add("Recycler2");
recyclerAdapter = new RecyclerAdapter(mData);
recyclerAdapter.setOnItemClickListener(new RecyclerAdapter.OnItemClickListener() {
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
public void onItemClick(final View view, int position) {
//设置点击动画
view.animate().translationZ(15f)
.setDuration(300)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
view.animate().translationZ(1f).setDuration(500).start();
}
})
.start();
}
});

recycler_view.setAdapter(recyclerAdapter);
}

public void addRecycler(View view) {
mData.add("Recycler");
if(mData.size() > 0) {
recyclerAdapter.notifyDataSetChanged();
}
}

public void delRecycler(View view) {
int position = mData.size();
if(position > 0) {
mData.remove(position-1);
recyclerAdapter.notifyDataSetChanged();
}
}
}

        在程序中使用Spinner来选择线性布局管理器还是表格布局管理器，并给按钮增加了点击动画效果，整个程序运行效果如下图所示。

2.CardView

        CardView曾经开始流程在Google+上，后来越来越多地App也引入了Card这样一种布局方式。因此在Android5.X上，Google索性就提供了CardView地控件，方便大家使用这种布局。说到底，CardView也是一个容器类布局，只是它提供了卡片这样一种形式。开发者可以定义卡片地大小与视图地高度，并设置圆角地角度。不过使用CardView与RecyclerView还是有区别的，首先同样是要在项目中引入com.android.support:cardview-v7:X.X.X的依赖。其次在布局中使用CardView的时候需要引入新的名字控件——在Android
Studio中使用xmlns:card_view="http://schemas.android.com/apk/res-auto"来添加。这样菜可以通过自定义的名字控件来引用它的两个属性。

card_view:cardBackgroundColor="@color/cardview_light_background"
card_view:cardCornerRadius="30dp"

        这两个属性非常简单，第一个是设置背景颜色，第二个是设置圆角的角度。我们以一个例子来演示下CardView的使用，XML代码如下所示。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="test.chenj.study_12.CardViewActivity">
<android.support.v7.widget.CardView
android:layout_marginTop="40dp"
card_view:cardBackgroundColor="@color/cardview_light_background"
card_view:cardCornerRadius="30dp"
android:elevation="10dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:gravity="center"
android:layout_gravity="center"
android:textSize="30sp"
android:layout_margin="30dp"
android:text="I am a CardView"
android:layout_width="wrap_content"
android:layout_height="100dp" />
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
        显示效果如图所示。