Android中CardStackView的使用

今天看到这个效果，感觉很nice，

效果图如下：

https://github.com/loopeer/CardStackView

1.首先添加依赖

compile 'com.loopeer.library:cardstack:1.0.1'

2.xml的中：

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.administrator.cardstackviewdemo.MainActivity"> <com.loopeer.cardstack.CardStackView android:id="@+id/cardStackView" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>

3.adapter中：

public class TestStackAdapter extends StackAdapter<Integer> { public TestStackAdapter(Context context) { super(context); } @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); } } @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); } } @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; } } static class ColorItemViewHolder extends CardStackView.ViewHolder { View mLayout; View mContainerContent; TextView mTextTitle; public ColorItemViewHolder(View view) { super(view); mLayout = view.findViewById(R.id.frame_list_card_item); mContainerContent = view.findViewById(R.id.container_list_content); mTextTitle = (TextView) view.findViewById(R.id.text_list_card_title); } @Override public void onItemExpand(boolean b) { mContainerContent.setVisibility(b ? View.VISIBLE : View.GONE); } public void onBind(Integer data, int position) { mLayout.getBackground().setColorFilter(ContextCompat.getColor(getContext(), data), PorterDuff.Mode.SRC_IN); mTextTitle.setText(String.valueOf(position)); } } static class ColorItemWithNoHeaderViewHolder extends CardStackView.ViewHolder { View mLayout; TextView mTextTitle; public ColorItemWithNoHeaderViewHolder(View view) { super(view); mLayout = view.findViewById(R.id.frame_list_card_item); mTextTitle = (TextView) view.findViewById(R.id.text_list_card_title); } @Override public void onItemExpand(boolean b) { } public void onBind(Integer data, int position) { mLayout.getBackground().setColorFilter(ContextCompat.getColor(getContext(), data), PorterDuff.Mode.SRC_IN); mTextTitle.setText(String.valueOf(position)); } } static class ColorItemLargeHeaderViewHolder extends CardStackView.ViewHolder { View mLayout; View mContainerContent; TextView mTextTitle; public ColorItemLargeHeaderViewHolder(View view) { super(view); mLayout = view.findViewById(R.id.frame_list_card_item); mContainerContent = view.findViewById(R.id.container_list_content); mTextTitle = (TextView) view.findViewById(R.id.text_list_card_title); } @Override public void onItemExpand(boolean b) { mContainerContent.setVisibility(b ? View.VISIBLE : View.GONE); } @Override protected void onAnimationStateChange(int state, boolean willBeSelect) { super.onAnimationStateChange(state, willBeSelect); if (state == CardStackView.ANIMATION_STATE_START && willBeSelect) { onItemExpand(true); } if (state == CardStackView.ANIMATION_STATE_END && !willBeSelect) { onItemExpand(false); } } public void onBind(Integer data, int position) { mLayout.getBackground().setColorFilter(ContextCompat.getColor(getContext(), data), PorterDuff.Mode.SRC_IN); mTextTitle.setText(String.valueOf(position)); itemView.findViewById(R.id.text_view).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { ((CardStackView)itemView.getParent()).performItemClick(ColorItemLargeHeaderViewHolder.this); } }); } } }

4.MainActivity中使用：

public class MainActivity extends AppCompatActivity { private CardStackView cardStackView; private TestStackAdapter mTestStackAdapter; public static Integer[] TEST_DATAS = new Integer[]{ R.color.color_1, R.color.color_2, R.color.color_3, R.color.color_4, R.color.color_5, R.color.color_6, R.color.color_7, R.color.color_8, R.color.color_9, R.color.color_10, R.color.color_11, R.color.color_12, R.color.color_13, R.color.color_14, R.color.color_15, R.color.color_16, R.color.color_17, R.color.color_18, R.color.color_19, R.color.color_20, R.color.color_21, R.color.color_22, R.color.color_23, R.color.color_24, R.color.color_25, R.color.color_26 }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); cardStackView = (CardStackView) findViewById(R.id.cardStackView); mTestStackAdapter = new TestStackAdapter(this); cardStackView.setAdapter(mTestStackAdapter); mTestStackAdapter.updateData(Arrays.asList(TEST_DATAS)); } }

当然了，这只是控件的使用，我们可以在这个基础上增加想要的功能， 本人菜鸟一个，有什么不对的地方希望大家指出评论，大神勿喷，希望大家一起学习进步！