華而樸實的卡片動畫

最近一段時間做項目,項目中學(xué)習(xí)到了很多姿(zhi)勢(shi),我把一些我感覺有必要記錄下來的東西在之后會記錄到博客里,今天將分享其中一個頁面

11.png

22.png

看到UI之后第一反應(yīng)是我草,怎么把這個卡片從中間切開,腦海中浮現(xiàn)出了各種計算.雖然我不會,慢慢的細想,沒必要那么復(fù)雜,不就是隱藏顯示么~ 于是開擼,我們先來畫布局
主頁面沒啥可說的就一個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="不飽和脂肪酸是構(gòu)成體內(nèi)脂肪的一種脂肪酸，人體不可缺少的脂肪酸恬口。不飽和脂肪酸根據(jù)雙鍵個數(shù)的不同铐懊，分為單不飽和脂肪酸和多不飽和脂肪酸二種。"
            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="環(huán)境因素和遺傳因素都對肥胖的產(chǎn)生起到重要作用，遺傳因素尤其增加了人體對于肥胖的易感性杂瘸。FTO（fat-mass and obesity-associated gene）基因是一個在不同人群得到廣泛驗證的肥胖易感基因，該基因單核甘酸突變與肥胖密切相關(guān)。研究表明FTO基因在腦仪媒、脂肪組織、胰腺和下丘腦等組織中廣泛表達谢鹊。FTO基因編碼的蛋白在能量代謝過程中發(fā)揮作用算吩。近年來多項研究陸續(xù)報道了肥胖人群和FTO基因突變的關(guān)聯(lián)性分析，因而發(fā)現(xiàn)對于特定突變位點不同基因型個體在肥胖人群和正常人群中的分布存在明顯差異佃扼，攜帶某些特定的基因型的人群為先天性的易胖體質(zhì)偎巢。"
            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);
    }

到這里呢,已經(jīng)可以完全的控制顯示和隱藏了.但是非常的生硬,效果圖就不貼了,之前說到這個效果無非是顯示和隱藏,但是怎么能讓它絲滑流暢呢?加動畫~加屬性動畫!
首先看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); //設(shè)置動畫
        animatorSet.setDuration(300);  //設(shè)置動畫時間
        animatorSet.start();
    }

移動的距離這個需要根據(jù)實際情況來,這里我需要向上移動.所以只設(shè)置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); //設(shè)置動畫
        animatorSet.setDuration(300);  //設(shè)置動畫時間
        animatorSet.start();
    }

讓它恢復(fù)到默認位置就可以
卡片展開動畫

 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();
    }

這里需要根據(jù)需求來定義展開的高度,和你在布局中的高度統(tǒng)一.
查不到就這樣了…要說難不算難,但是需要你細心的去思考一些問題.
下載地址--------------->https://github.com/HelloSinger/ListDemo

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市兼耀，隨后出現(xiàn)的幾起案子压昼，更是在濱河造成了極大的恐慌，老刑警劉巖翠订，帶你破解...
沈念sama閱讀 212,542評論 6贊 493
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件巢音，死亡現(xiàn)場離奇詭異，居然都是意外死亡尽超，警方通過查閱死者的電腦和手機官撼，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,596評論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來似谁，“玉大人傲绣，你說我怎么就攤上這事」ぃ” “怎么了秃诵？”我有些...
開封第一講書人閱讀 158,021評論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長塞琼。經(jīng)常有香客問我菠净，道長，這世上最難降的妖魔是什么彪杉？我笑而不...
開封第一講書人閱讀 56,682評論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任毅往，我火速辦了婚禮，結(jié)果婚禮上派近，老公的妹妹穿的比我還像新娘攀唯。我一直安慰自己，他們只是感情好渴丸，可當(dāng)我...
茶點故事閱讀 65,792評論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布侯嘀。她就那樣靜靜地躺著另凌，像睡著了一般。火紅的嫁衣襯著肌膚如雪戒幔。梳的紋絲不亂的頭發(fā)上吠谢，一...
開封第一講書人閱讀 49,985評論 1贊 291
城市分裂傳說
那天，我揣著相機與錄音诗茎，去河邊找鬼囊卜。笑死，一個胖子當(dāng)著我的面吹牛错沃，可吹牛的內(nèi)容都是我干的栅组。我是一名探鬼主播，決...
沈念sama閱讀 39,107評論 3贊 410
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼枢析，長吁一口氣：“原來是場噩夢啊……” “哼玉掸！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起醒叁，我...
開封第一講書人閱讀 37,845評論 0贊 268
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤司浪，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后把沼，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體啊易，經(jīng)...
沈念sama閱讀 44,299評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,612評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年饮睬，在試婚紗的時候發(fā)現(xiàn)自己被綠了租谈。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,747評論 1贊 341
活死人
序言：一個原本活蹦亂跳的男人離奇死亡捆愁，死狀恐怖割去，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情昼丑，我是刑警寧澤呻逆，帶...
沈念sama閱讀 34,441評論 4贊 333
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站菩帝，受9級特大地震影響咖城，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜呼奢，卻給世界環(huán)境...
茶點故事閱讀 40,072評論 3贊 317
男人毒藥：我在死后第九天來索命
文/蒙蒙一宜雀、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧控妻，春花似錦州袒、人聲如沸揭绑。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,828評論 0贊 21
一樁弒父案郎哭，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至菇存，卻和暖如春夸研，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背依鸥。一陣腳步聲響...
開封第一講書人閱讀 32,069評論 1贊 267
情欲美人皮
我被黑心中介騙來泰國打工亥至，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人贱迟。一個月前我還...
沈念sama閱讀 46,545評論 2贊 362
代替公主和親
正文我出身青樓姐扮，卻偏偏與公主長得像，于是被迫代替她去往敵國和親衣吠。傳聞我的和親對象是個殘疾皇子茶敏，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 43,658評論 2贊 350

華而樸實的卡片動畫

推薦閱讀更多精彩內(nèi)容