android 卡片 点击,AndroidUI 卡片式折叠交互效果实现

最近小猿在改进之前写过的学校教务系统APP的UI界面的时候，发现了一个有趣的Android UI——卡片式折叠交互CardStackView，该View是在GitHub上找到的，但是该View的主人没有告诉我如何使用，小猿研究了半天，在此，将其简单的使用步骤阐述一下：使用步骤：

1.在Android studio中dependencies里添加依赖dependencies {

compile 'com.loopeer.library:cardstack:1.0.2'}

2.自定义一个单个卡片的item：LinearLayout

android:id="@+id/linear_list_card_item"

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

app:stackHeaderHeight="100dp">

android:id="@+id/frame_list_card_item"

android:layout_width="match_parent"

android:layout_height="80dp"

android:background="@drawable/course_item_1">

android:id="@+id/text_list_card_title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="20dp"

android:textColor="#fff"

android:textSize="24sp"

android:textStyle="bold"

tools:text="12"/>

android:id="@+id/container_list_content"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:animateLayoutChanges="true">

android:id="@+id/recycler"

android:layout_width="match_parent"

android:layout_height="wrap_content">

3.在主布局里使用CardStackView：<?xml  version="1.0" encoding="utf-8"?>

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#f0f0f0">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:clipToPadding="false"

android:padding="6dp">

4.写一个TestStackAdapter(GitHub博主上给出了个Adapter的demo，里面有卡片的三种样式：ColorItemViewHolder ：显示卡片正常样式

ColorItemLargeHeaderViewHolder ：卡片的头比正常显示的大

ColorItemWithNoHeaderViewHolder ：不显示卡片的头，只显示内容)

TestStackAdapter代码有点长，但是理解起来不难，因为它非常像RecyclerView.Adapter<>，因为它是继承自CardStackView.Adapter<>,我将部分主要代码讲一下：

1.onCreateView()：加载卡片的item布局(三种样式可以加载)：@Override

protected CardStackView.ViewHolder onCreateView(ViewGroup parent, int viewType) {

View view;        switch (viewType) {            case R.layout.list_card_item_larger_header:

view = getLayoutInflater().inflate(R.layout.list_card_item_larger_header, parent, false);                return new ColorItemLargeHeaderViewHolder(view);            case R.layout.list_card_item_with_no_header:

view = getLayoutInflater().inflate(R.layout.list_card_item_with_no_header, parent, false);                return new ColorItemWithNoHeaderViewHolder(view);            default:

view = getLayoutInflater().inflate(R.layout.list_card_item, parent, false);                return new ColorItemViewHolder(view);

}

}

2.getItemViewType()：返回每个item的布局样式，在这个Adapter里，都返回了统一的样式：@Override

public int getItemViewType(int position) {        if (position == 6) {//TODO TEST LARGER ITEM

return R.layout.list_card_item_larger_header;

} else if (position == 10) {            return R.layout.list_card_item_with_no_header;

}else {            return R.layout.list_card_item;

}

}

3.onItemExpand(boolean b)：在这里判断卡片是否被点击，true就将卡片展开：@Override

public void onItemExpand(boolean b) {

mContainerContent.setVisibility(b ? View.VISIBLE : View.GONE);

}

4.onBind(Integer data, int position)：根据item的position来加载卡片内的内容：public void onBind(Integer data, int position) {            mLayout.getBackground().setColorFilter(ContextCompat.getColor(getContext(), data), PorterDuff.Mode.SRC_IN);            mTextTitle.setText(String.valueOf(position));

}

5.bindView(Integer data, int position, CardStackView.ViewHolder holder)：调用onBind()来加载布局：@Override

public void bindView(Integer data, int position, CardStackView.ViewHolder holder) {        if (holder instanceof ColorItemLargeHeaderViewHolder) {

ColorItemLargeHeaderViewHolder h = (ColorItemLargeHeaderViewHolder) holder;

h.onBind(data, position);

}        if (holder instanceof ColorItemWithNoHeaderViewHolder) {

ColorItemWithNoHeaderViewHolder h = (ColorItemWithNoHeaderViewHolder) holder;

h.onBind(data, position);

}        if (holder instanceof ColorItemViewHolder) {

ColorItemViewHolder h = (ColorItemViewHolder) holder;

h.onBind(data, position);

}

}

5.在MainActivity中将CardStackView初始化，因为我是在Fragment中写的，在此，附上我的Fragment中的代码：public class ProjectFragment extends Fragment implements CardStackView.ItemExpendListener{

private CardStackView cardStackView;    private TestStackAdapter testStackAdapter;    private static Integer[] item = new Integer[]{R.color.team1,R.color.team2,R.color.team3,

R.color.team4,R.color.team5,R.color.team6,R.color.team7,R.color.team8};    @Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.project_fragment,container,false);

initWight(view);        return view;

}    private void initWight(View view) {

cardStackView = (CardStackView) view.findViewById(R.id.stackview);

testStackAdapter = new TestStackAdapter(getContext());

cardStackView.setAdapter(testStackAdapter);

cardStackView.setItemExpendListener(this);

handler.postDelayed(new Runnable() {            @Override

public void run() {

testStackAdapter.updateData(Arrays.asList(item));

}

},200);

}    @Override

public void onItemExpend(boolean expend) {

}

}

1.先初始化一组颜色的数组，因为TestStackAdapter中根据传入的颜色数组来将卡片的片头附上颜色：private static Integer[] item = new Integer[]{R.color.team1,R.color.team2,R.color.team3,

R.color.team4,R.color.team5,R.color.team6,R.color.team7,R.color.team8};

2.利用handler来进行延时更新卡片内的内容，先将CardStackView实例化，在利用.updateData()来进行CardStackView的内容更新：handler.postDelayed(new Runnable() {            @Override

public void run() {

testStackAdapter.updateData(Arrays.asList(item));

}

},200);

3.CardStackView的item展开监听事件(通过implement CardStackView.ItemExpendListener)：cardStackView.setItemExpendListener(this);@Override

public void onItemExpend(boolean expend) {

}

CardStackView的简单使用就到此了，如果对此有兴趣的话，可以自行研究一下源码，也可自己写个CardStackAdapter，因为源代码的TestStackAdapter是继承自CardStackView.Adapter<>的