效果图：
效果图
首先关于RxTools的导入和使用：
https://www.jianshu.com/p/bba6fe666d35
我们要使用RxTool中银行卡堆叠效果组件RxCardStackView来完成以上效果
！！！！！！！！！
注意：以下内容只是本人拙劣的复制和模仿，更多精彩的用法请参考GitHub上的源码https://github.com/Tamsiree/RxTool
拉下代码来一行行理解就可以了
！！！！！！！
一.布局 xml文件
首先Activity布局文件,只需要关注RxCardStackView就可以 ，其他的button什么的 根据业务来调整：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
android:animateLayoutChanges="true"
android:orientation="vertical"
android:background="@color/lightcyan"
tools:context="swust.yuqiaodan.tomatoapp.mvp.ui.activity.JokeActivity">
<com.vondear.rxui.view.cardstack.RxCardStackView
android:id="@+id/stackview_main"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:clipToPadding="false"
android:paddingLeft="12dp"
android:paddingTop="12dp"
android:paddingRight="12dp" />
.......(其他的省略)......
</LinearLayout>
补充一下在Layout中加入一条属性：
android:animateLayoutChanges="true"
可以使控件在GONE等状态改变的时候有个过渡动画 更流畅。
然后我们为每张卡片的item设计布局，这里支持完全自定义，你可以随心所欲：
所以我就贴一张我这边的item效果图就行了
image.png
二.Adapter 适配器的创建
和RecycleView的适配器很相似
AdapterStackTest继承于RxAdapterStack<T> T是每个item显示的数据实体范形
以下是我的源码，可以直接拿来用，只需要修改范形数据JokeShowBean和ColorItemViewHolder中的数据展示方式
//继承于RxAdapterStack<T> T是每个item显示的数据实体范形
public class AdapterStackTest extends RxAdapterStack<JokeShowBean> {
public AdapterStackTest(Context context) {
super(context);
}
/**绑定每个位置的Card的View
* @param data 每个View内的数据内容
* @param position 位置
* @param holder 每个Card内的数据显示方式 holder （参考recycleview）
*/
@Override
public void bindView(JokeShowBean data, int position, RxCardStackView.ViewHolder holder) {
ColorItemViewHolder h = (ColorItemViewHolder) holder;
h.onBind(data, position);
}
@Override
protected RxCardStackView.ViewHolder onCreateView(ViewGroup parent, int viewType) {
View view = getLayoutInflater().inflate(R.layout.list_card_item, parent, false);
return new ColorItemViewHolder(view);
}
/**
* 为每个位置的card指定具体的布局文件
*/
@Override
public int getItemViewType(int position) {
return R.layout.list_card_item;
}
/**
* 数据的显示 holder
*/
static class ColorItemViewHolder extends RxCardStackView.ViewHolder {
View mLayout;
LinearLayout mContainerContent;
TextView mTextTitle;
TextView jokeContent;
ImageView jokeImage;
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);
jokeContent=view.findViewById(R.id.tv_text_content);
jokeImage=view.findViewById(R.id.img_show_pic);
}
/**
* @param b 每张卡片展开时要做什么事情 这里是显示一个button
*/
@Override
public void onItemExpand(boolean b) {
mContainerContent.setVisibility(b ? View.VISIBLE : View.GONE);
}
/**
* 填入卡片内容和颜色 图片等等
* @param data
* @param position
*/
public void onBind(JokeShowBean data, int position) {
mLayout.getBackground().setColorFilter(ContextCompat.getColor(getContext(), CARD_COLOR.get(position)), PorterDuff.Mode.SRC_IN);
mTextTitle.setText(String.valueOf(position+1));
jokeContent.setText(data.getContent());
if(data.isPic()){
Glide.with(getContext())
.asDrawable()//asDrawable()比默认的bitmap占用内存小
.load(data.getPic())//图片url
.thumbnail(Glide.with(itemView.getContext())
.load(R.drawable.loding))//加载中的占位图
.into(jokeImage);
}else{
jokeImage.setVisibility(View.GONE);
}
}
}
}
三.Activity中的使用方法，抛开业务，核心代码可能只有30行，认真看吧，还是那句话，这里并没有完整的发挥出RxCardStackView的所有功能，详细用法请参考GitHub上的源代码
//实现接口RxCardStackView.ItemExpendListener
public class JokeActivity extends BaseActivity<PicPresenter> implements PicContract.View,RxCardStackView.ItemExpendListener{
@BindView(R.id.stackview_main)
RxCardStackView mStackView;
@BindView(R.id.button_turn_the_page)
LinearLayout mButtonContainer;
private AdapterStackTest mTestStackAdapter;
@Override
public void setupActivityComponent(@NonNull AppComponent appComponent) {
DaggerPicComponent //如找不到该类,请编译一下项目
.builder()
.appComponent(appComponent)
.view(this)
.build()
.inject(this);
}
@Override
public int initView(@Nullable Bundle savedInstanceState) {
return R.layout.activity_joke;
}
@Override
public void initData(@Nullable Bundle savedInstanceState) {
RxTool.init(this);
//实现接口RxCardStackView.ItemExpendListener
mStackView.setItemExpendListener(this);//可以监听到每张卡片的展开
mTestStackAdapter = new AdapterStackTest(this);//实例化adapter
mStackView.setAdapter(mTestStackAdapter);//设置adapter
mPresenter.getPicJoke();//请求数据
}
public void onPreClick(View view) {
//上一张Card
mStackView.pre();
}
public void onNextClick(View view) {
//下一站Card
mStackView.next();
}
@Override
public void onItemExpend(boolean expend) {
//item展开的时候需要做什么
mButtonContainer.setVisibility(expend ? View.VISIBLE : View.GONE);
}
//请求成功之后展示数据
@Override
public void showJoke(List<JokeShowBean> data) {
//延迟0.2秒显示
RxTool.delayToDo(200, new OnSimpleListener() {
@Override
public void doSomething() {
mTestStackAdapter.updateData(data);
}
});
}
}
网友评论