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

Posted 2022-12-04 黄飞_hf

RecyclerView

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

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

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> 

    private List<String> mData;
    public OnItemClickListener mItemClickListener;

    public RecyclerAdapter(List<String> data)
        mData = data;
    

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

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

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

    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener

        TextView mTextView;

        public ViewHolder(View itemView) 
            super(itemView);
            mTextView = (TextView) itemView;
            mTextView.setOnClickListener(this);
        

        // 通过接口回调来实现RecyclerView的点击事件
        @Override
        public void onClick(View view) 
            if(mItemClickListener != null)
                mItemClickListener.onItemClick(view, getLayoutPosition());
        
    

    public void setOnItemClickListener(OnItemClickListener itemClickListener) 
        this.mItemClickListener = itemClickListener;
    

    /**
     * Android并没有给RecyclerView增加点击事件，所以我们需要自己使用接口回调机制，创建一个点击事件的接口
     */
    public interface OnItemClickListener 
        void onItemClick(View view, int position);
    

Google在RecyclerView中定义了LayoutManager来帮助开发者更加方便地创建不同的布局，下面的例子中就演示了如何创建简单的水平和竖直两种布局方式。当然，也可以通过自定义LayoutManager来创建自己的布局，代码如下：

public class RecyclerActivity extends Activity 

    private RecyclerView mRcList;
    private RecyclerAdapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;
    private Spinner mSpinner;
    private List<String> mData = new ArrayList<String>();

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycler);

        mRcList = (RecyclerView) findViewById(R.id.rc_list);
        mLayoutManager = new LinearLayoutManager(this);
        mRcList.setLayoutManager(mLayoutManager);
        mRcList.setHasFixedSize(true);

        // 设置显示动画
        mRcList.setItemAnimator(new DefaultItemAnimator());
        mSpinner = (Spinner) findViewById(R.id.spinner);
        mSpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() 
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int position, long l) 
                if (position == 0) 
                    // 设置为线性布局
                    mRcList.setLayoutManager(new LinearLayoutManager(RecyclerActivity.this));
                 else if (position == 1) 
                    // 设置为表格布局
                    mRcList.setLayoutManager(new GridLayoutManager(RecyclerActivity.this, 3));
                
            

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) 

            
        );
        // 增加测试数据
        mData.add("Recycler");
        mData.add("Recycler");
        mData.add("Recycler");
        mAdapter = new RecyclerAdapter(mData);
        mRcList.setAdapter(mAdapter);
        mAdapter.setOnItemClickListener(new RecyclerAdapter.OnItemClickListener() 
            @Override
            public void onItemClick(final View view, int position) 
                // 设置点击动画
                view.animate().translationZ(15).setDuration(300)
                        .setListener(new AnimatorListenerAdapter() 
                            @Override
                            public void onAnimationEnd(Animator animation) 
                                super.onAnimationEnd(animation);
                                view.animate().translationZ(1).setDuration(500).start();
                            
                        ).start();
            
        );
    

    public void addRecycler(View view) 
        mData.add("Recycler");
        mAdapter.notifyDataSetChanged();
    

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

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

CardView

CardView是一个容器类布局，只是它提供了卡片这样一种形式。开发者可以定义卡片的大小和视图高度，并设置圆角的角度。不过在使用CardView时，首先需要在项目中引入com.android.support:cardview-v7:23.+的依赖。其次在布局文件中使用CardView的时候需要引入一个新的命名空间——xmlns:card_view=”http://schemas.android.com/apk/res-auto”。这样才可以通过自定义的命名空间来引用它的两个属性。

card_view:cardBackgroundColor="@color/"
card_view:cardCornerRadius="8dp"

这两个属性非常简单，第一个是设置背景颜色，第二个是设置圆角的角度。CardView使用的示例XML代码如下：

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    android:layout_marginRight="@dimen/activity_horizontal_margin"
    android:layout_marginTop="40dp"
    card_view:cardBackgroundColor="@color/colorAccent"
    card_view:cardCornerRadius="8dp"
    android:elevation="10dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="@dimen/fab_margin"
        android:gravity="center"
        android:text="I am a CardView"
        android:textSize="30sp" />


</android.support.v7.widget.CardView>

效果图如下所示：

代码地址