华而朴实的卡片动画

最近一段时间做项目,项目中学习到了很多姿(zhi)势(shi),我把一些我感觉有必要记录下来的东西 在之后会记录到博客里,今天将分享其中一个页面


看到UI之后第一反应是我草,怎么把这个卡片从中间切开,脑海中浮现出了各种计算.虽然我不会,慢慢的细想,没必要那么复杂,不就是隐藏显示么~ 于是开撸,我们先来画布局
主页面 没啥可说的 就一个RecycleView

<RelativeLayout 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:background="@color/color_061358"
    tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rcy_more_data"
        android:layout_width="match_parent"
        android:layout_height="1622px"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="68px" />

</RelativeLayout>

再来看 item布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <RelativeLayout
        android:layout_width="746px"
        android:layout_height="300px"
        android:layout_centerHorizontal="true">

        <ImageView
            android:id="@+id/iv_bg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/icon_yaotunbi" />

        <RelativeLayout
            android:id="@+id/rl_content"
            android:layout_width="match_parent"
            android:layout_height="80px"
            android:layout_marginTop="120px">

            <TextView
                android:id="@+id/tv_chinese_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="60px"
                android:text=""
                android:textColor="@color/color_fafafa"
                android:textSize="36px" />

            <TextView
                android:id="@+id/tv_eg_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/tv_chinese_name"
                android:layout_marginLeft="60px"
                android:text=""
                android:textColor="@color/color_fafafa"
                android:textSize="20px" />


            <TextView
                android:id="@+id/tv_request"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="90px"
                android:text=""
                android:textColor="@color/color_fafafa"
                android:textSize="52px"
                android:textStyle="bold" />
        </RelativeLayout>

        <ImageView
            android:id="@+id/iv_expand"
            android:layout_width="32px"
            android:layout_height="32px"
            android:layout_alignParentRight="true"
            android:layout_marginTop="24px"
            android:layout_marginRight="24px"
            android:background="@drawable/icon_expand" />
    </RelativeLayout>

    <include layout="@layout/item_jy_expand_layout" />
</RelativeLayout>

还有一个include的代码 ,这个就是卡片展开时显示的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl_expand"
    android:layout_width="746px"
    android:layout_height="450px"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="120px"
    android:background="@drawable/jy_item_expand_bg"
    android:visibility="gone">


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="580px"
        android:layout_above="@id/ll_pack_up">

        <TextView
            android:id="@+id/tv_introduce"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="60px"
            android:layout_marginTop="34px"
            android:layout_marginRight="60px"
            android:text="不饱和脂肪酸是构成体内脂肪的一种脂肪酸，人体不可缺少的脂肪酸。不饱和脂肪酸根据双键个数的不同，分为单不饱和脂肪酸和多不饱和脂肪酸二种。"
            android:textColor="@color/color_888888"
            android:textSize="20px" />

        <TextView
            android:id="@+id/tv_expand_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/tv_introduce"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="60px"
            android:layout_marginTop="26px"
            android:layout_marginRight="60px"
            android:text="环境因素和遗传因素都对肥胖的产生起到重要作用，遗传因素尤其增加了人体对于肥胖的易感性。FTO（fat-mass and obesity-associated gene）基因是一个在不同人群得到广泛验证的肥胖易感基因，该基因单核甘酸突变与肥胖密切相关。研究表明FTO基因在脑、脂肪组织、胰腺和下丘脑等组织中广泛表达。FTO基因编码的蛋白在能量代谢过程中发挥作用。近年来多项研究陆续报道了肥胖人群和FTO基因突变的关联性分析，因而发现对于特定突变位点不同基因型个体在肥胖人群和正常人群中的分布存在明显差异，携带某些特定的基因型的人群为先天性的易胖体质。"
            android:textColor="@color/color_888888"
            android:textSize="20px" />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/ll_pack_up"
        android:layout_width="100px"
        android:layout_height="80px"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="收起"
            android:textColor="@color/color_2283e2"
            android:textSize="20px" />

        <ImageView
            android:layout_width="18px"
            android:layout_height="10px"
            android:layout_gravity="center"
            android:layout_marginLeft="9px"
            android:background="@drawable/icon_stroke" />
    </LinearLayout>

</RelativeLayout>

以上 所有的布局都搞完了,下面我们先把adapter 写完

public class ListDataAdapter extends RecyclerView.Adapter<ListDataAdapter.MyViewHolder> {

    private Context context;
    public itemOnExpandClickListener itemExpandOnClick;
    public itemPackUpClickListener itemPackUpClickListener;
    private List<ListDataBean.DataBean> dataBeans;
    private AnimationUtils animationUtils;


    public void setJyMoreDataBeans(List<ListDataBean.DataBean> 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();
    }

这里需要根据需求来定义展开的高度,和你在布局中的高度统一.

差不多就这样了…要说难不算难,但是需要你细心的去思考一些问题.

下载地址--------------->github点我传送