最近一段时间做项目,项目中学习到了很多姿(zhi)势(shi),我把一些我感觉有必要记录下来的东西 在之后会记录到博客里,今天将分享其中一个页面
11.png
22.png
看到UI之后第一反应是我草,怎么把这个卡片从中间切开,脑海中浮现出了各种计算.虽然我不会,慢慢的细想,没必要那么复杂,不就是隐藏显示么~ 于是开撸,我们先来画布局
主页面 没啥可说的 就一个RecycleView
再来看 item布局
还有一个include的代码 ,这个就是卡片展开时显示的布局
以上 所有的布局都搞完了,下面我们先把adapter 写完
public class ListDataAdapter extends RecyclerView.Adapter {
private Context context;
public itemOnExpandClickListener itemExpandOnClick;
public itemPackUpClickListener itemPackUpClickListener;
private List dataBeans;
private AnimationUtils animationUtils;
public void setJyMoreDataBeans(List dataBeans) {
this.dataBeans = dataBeans;
notifyDataSetChanged();
}
public void setItemPackUpClickListener(ListDataAdapter.itemPackUpClickListener itemPackUpClickListener) {
this.itemPackUpClickListener = itemPackUpClickListener;
}
public void setItemExpandOnClick(itemOnExpandClickListener itemExpandOnClick) {
this.itemExpandOnClick = itemExpandOnClick;
}
public ListDataAdapter(Context context) {
this.context = context;
animationUtils = new AnimationUtils();
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(context).inflate(R.layout.item_jy_more_layout, parent, false);
MyViewHolder holder = new MyViewHolder(view);
return holder;
}
@Override
public void onBindViewHolder(MyViewHolder holder, final int position) {
// GlideOptions glideOptions = new GlideOptions.Builder()
// .radius(0)
//
// .cornerType(GlideOptions.CornerType.TOP)
// .build();
// ImageUtil.display(context, jyMoreDataBeans.get(position).getGp_bg_img(), holder.iv_bg, glideOptions);
holder.tv_chinese_name.setText(dataBeans.get(position).getGp_name());
holder.tv_eg_name.setText(dataBeans.get(position).getGp_name_en());
holder.tv_request.setText(dataBeans.get(position).getRisk());
holder.tv_introduce.setText(dataBeans.get(position).getGp_intro());
holder.tv_expand_content.setText(dataBeans.get(position).getGp_gene_intro());
holder.ll_pack_up.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
itemPackUpClickListener.itemPackUpOnClick(position);
}
});
holder.iv_bg.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
itemExpandOnClick.itemExpandOnClick(position);
}
});
if (dataBeans.get(position).isExpand()) {//这里是判断是否显示
holder.iv_expand.setVisibility(View.GONE);
holder.iv_bg.setClickable(false);
} else {
holder.iv_bg.setClickable(true);
holder.iv_expand.setVisibility(View.VISIBLE);
}
}
@Override
public int getItemCount() {
return dataBeans == null ? 0 : dataBeans.size();
}
public class MyViewHolder extends RecyclerView.ViewHolder {
private ImageView iv_bg;
private TextView tv_chinese_name;
private TextView tv_eg_name;
private TextView tv_request;
private ImageView iv_expand;
private RelativeLayout rl_expand;
private LinearLayout ll_pack_up;
private RelativeLayout rl_content;
private TextView tv_introduce;
private TextView tv_expand_content;
public MyViewHolder(View itemView) {
super(itemView);
iv_bg = itemView.findViewById(R.id.iv_bg);
tv_chinese_name = itemView.findViewById(R.id.tv_chinese_name);
tv_eg_name = itemView.findViewById(R.id.tv_eg_name);
tv_request = itemView.findViewById(R.id.tv_request);
iv_expand = itemView.findViewById(R.id.iv_expand);
rl_expand = itemView.findViewById(R.id.rl_expand);
ll_pack_up = itemView.findViewById(R.id.ll_pack_up);
rl_content = itemView.findViewById(R.id.rl_content);
tv_introduce = itemView.findViewById(R.id.tv_introduce);
tv_expand_content = itemView.findViewById(R.id.tv_expand_content);
}
}
public interface itemOnExpandClickListener {
void itemExpandOnClick(int pos);
}
public interface itemPackUpClickListener {
void itemPackUpOnClick(int pos);
}
普通,非常普通的RecycleViewAdpter. Activity中这样赋值就可以了
private void initData() {
ListDataBean.DataBean listDataBean0 = new ListDataBean.DataBean(R.drawable.icon_yaotunbi, "test0", "测试0", "这里是测试这里是测试这里是测试这里是测试这里是测试这里是测试", "测试测试测试测试测试测试测试测试测试测试测试测试测试测试", "正常");
ListDataBean.DataBean listDataBean1 = new ListDataBean.DataBean(R.drawable.icon_yaotunbi, "test1", "测试1", "这里是测试这里是测试这里是测试这里是测试这里是测试这里是测试", "测试测试测试测试测试测试测试测试测试测试测试测试测试测试", "正常");
ListDataBean.DataBean listDataBean2 = new ListDataBean.DataBean(R.drawable.icon_yaotunbi, "test2", "测试2", "这里是测试这里是测试这里是测试这里是测试这里是测试这里是测试", "测试测试测试测试测试测试测试测试测试测试测试测试测试测试", "正常");
ListDataBean.DataBean listDataBean3 = new ListDataBean.DataBean(R.drawable.icon_yaotunbi, "test3", "测试3", "这里是测试这里是测试这里是测试这里是测试这里是测试这里是测试", "测试测试测试测试测试测试测试测试测试测试测试测试测试测试", "正常");
ListDataBean.DataBean listDataBean4 = new ListDataBean.DataBean(R.drawable.icon_yaotunbi, "test4", "测试4", "这里是测试这里是测试这里是测试这里是测试这里是测试这里是测试", "测试测试测试测试测试测试测试测试测试测试测试测试测试测试", "正常");
ListDataBean.DataBean listDataBean5 = new ListDataBean.DataBean(R.drawable.icon_yaotunbi, "test5", "测试5", "这里是测试这里是测试这里是测试这里是测试这里是测试这里是测试", "测试测试测试测试测试测试测试测试测试测试测试测试测试测试", "正常");
ListDataBean.DataBean listDataBean6 = new ListDataBean.DataBean(R.drawable.icon_yaotunbi, "test6", "测试6", "这里是测试这里是测试这里是测试这里是测试这里是测试这里是测试", "测试测试测试测试测试测试测试测试测试测试测试测试测试测试", "正常");
ListDataBean.DataBean listDataBean7 = new ListDataBean.DataBean(R.drawable.icon_yaotunbi, "test7", "测试7", "这里是测试这里是测试这里是测试这里是测试这里是测试这里是测试", "测试测试测试测试测试测试测试测试测试测试测试测试测试测试", "正常");
ListDataBean.DataBean listDataBean8 = new ListDataBean.DataBean(R.drawable.icon_yaotunbi, "test8", "测试8", "这里是测试这里是测试这里是测试这里是测试这里是测试这里是测试", "测试测试测试测试测试测试测试测试测试测试测试测试测试测试", "正常");
ListDataBean.DataBean listDataBean9 = new ListDataBean.DataBean(R.drawable.icon_yaotunbi, "test9", "测试9", "这里是测试这里是测试这里是测试这里是测试这里是测试这里是测试", "测试测试测试测试测试测试测试测试测试测试测试测试测试测试", "正常");
dataBeans.add(listDataBean0);
dataBeans.add(listDataBean1);
dataBeans.add(listDataBean2);
dataBeans.add(listDataBean3);
dataBeans.add(listDataBean4);
dataBeans.add(listDataBean5);
dataBeans.add(listDataBean6);
dataBeans.add(listDataBean7);
dataBeans.add(listDataBean8);
dataBeans.add(listDataBean9);
listDataAdapter.setJyMoreDataBeans(dataBeans);
rcy_more_data.setAdapter(listDataAdapter);
}
/**
* 列表展开点击事件
*
* @param pos
*/
@Override
public void itemExpandOnClick(int pos) {
dataBeans.get(pos).setExpand(true);
listDataAdapter.notifyItemChanged(pos);
}
/**
* 列表收起点击事件
*
* @param pos
*/
@Override
public void itemPackUpOnClick(int pos) {
dataBeans.get(pos).setExpand(false);
listDataAdapter.notifyItemChanged(pos);
}
到这里呢,已经可以完全的控制 显示和隐藏了.但是非常的生硬,效果图就不贴了,之前说到这个效果无非是显示和隐藏,但是怎么能让它丝滑流畅呢?加动画~加属性动画!
首先看UI 在展开卡片的同时,卡片中间的文字上移,在收起的时候还原文字位置
首先是文字上移的代码
//将文字置顶
public void changeTop(View view) {
ObjectAnimator translationX = new ObjectAnimator().ofFloat(view, "translationX", 0, 0);
ObjectAnimator translationY = new ObjectAnimator().ofFloat(view, "translationY", 0, -100f);
AnimatorSet animatorSet = new AnimatorSet(); //组合动画
animatorSet.playTogether(translationX, translationY); //设置动画
animatorSet.setDuration(300); //设置动画时间
animatorSet.start();
}
移动的距离这个需要根据实际情况来,这里我需要向上移动.所以只设置y轴坐标就行.
还原文字
public void changeCentent(View view) {
ObjectAnimator translationX = new ObjectAnimator().ofFloat(view, "translationX", 0, 0);
ObjectAnimator translationY = new ObjectAnimator().ofFloat(view, "translationY", 0, 0f);
AnimatorSet animatorSet = new AnimatorSet(); //组合动画
animatorSet.playTogether(translationX, translationY); //设置动画
animatorSet.setDuration(300); //设置动画时间
animatorSet.start();
}
让它恢复到默认位置就可以
卡片展开动画
public void animateOpen(View v, int mHiddenViewMeasuredHeight) {
v.setVisibility(View.VISIBLE);
ValueAnimator animator = createDropAnimator(v, 0, mHiddenViewMeasuredHeight);
animator.start();
}
卡片收起动画
public void animateClose(final View view) {
int origHeight = view.getHeight();
ValueAnimator animator = createDropAnimator(view, 620, 0);
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
view.setVisibility(View.GONE);
}
});
animator.start();
}
这里需要根据需求来定义展开的高度,和你在布局中的高度统一.
查不到就这样了…要说难不算难,但是需要你细心的去思考一些问题.
下载地址--------------->https://github.com/HelloSinger/ListDemo