2. 程式人生 > >2017年第一篇 仿攜程機票頁自動輪播和行程切換的動畫

2017年第一篇 仿攜程機票頁自動輪播和行程切換的動畫

阿新 • • 發佈：2019-01-19

因工作原因不知為何都時刻關注著國內的TMC相關的APP
新年剛過 來到公司沒什麼大的任務來做，就拿我們的競品app看了看，然後發現當中有一些不錯的效果！剛好我對動畫這點也不是很熟悉就自己琢磨了思考了下！準備仿一個差不多能實現效果的~
效果原圖如：這裡寫圖片描述

要的效果 就是上面的紅框中的！
一開始我想的是自定義TabLayout 不過想來自定義太麻煩了 ~我也不太會！簡單點的還可以這種複雜的效果就算了這裡寫圖片描述

不自定義 那就只能組合用基本控制元件咯，我的思路是這樣的：
1.自用RelativeLayout的特性用三層佈局進行疊加(佈局等會貼);
2.就是用屬性動畫進行下面一層控制元件內容的移動了
3.Viewpager的自動無限輪播
好了 上程式碼，首先是佈局的程式碼 比較簡單eg:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

  <android.support.v4.view.ViewPager

 
      android:id="@+id/mViewPager"
      android:layout_height="240dp"
      android:layout_width="match_parent"
      />

  <LinearLayout 
      android:layout_height="40dp"
      android:layout_width="match_parent"
      android:layout_marginTop="200dp"
      android:background="#30000000"
      android:orientation
 
="horizontal"
      >
      <TextView 
          android:id="@+id/mImageView"
          android:layout_height="match_parent"
          android:layout_width="0dp"
          android:layout_weight="0.333"
          android:background="#ffffff"
          />
       <TextView 
          android:id="@+id/mImageView1"
          android:layout_height="match_parent"
          android:layout_width="0dp"
          android:layout_weight="0.333"
          android:visibility="invisible"
          />
        <TextView 
          android:id="@+id/mImageView2"
          android:layout_height="match_parent"
          android:layout_width="0dp"
          android:layout_weight="0.333"
          android:visibility="invisible"
          />
  </LinearLayout>

    <RadioGroup 
        android:id="@+id/mRadioGroup"
        android:layout_height="40dp"
        android:layout_width="match_parent"
        android:layout_marginTop="200dp"
        android:orientation="horizontal"
        android:alpha="1"


        >
        <RadioButton 
            android:id="@+id/button1"
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:text="單程"
            android:button="@null"
            android:gravity="center"

            />
        <RadioButton 
            android:id="@+id/button2"
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:text="往返"
            android:button="@null"
             android:textColor="#ffffff"
             android:gravity="center"
            />
        <RadioButton 
            android:id="@+id/button3"
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:text="多程"
            android:button="@null"
             android:textColor="#ffffff"
             android:gravity="center"
            />
    </RadioGroup>
</RelativeLayout>

中間RadioGroup也可以用其實的佈局一樣實現 我這是為了圖簡單
然後就是Activity中的內容了，這裡的動畫我用了ValueAnimator，只要找準備移動的位置就可以了 剛好我這裡對應的三個RadioButton是等比分的 也就是對應下面的三個背景！所以只需要移動下面三個背景的不同位置就可以 了！
下面貼上三個RadioButton的點選事件的內容：

@Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch (v.getId()) {
        case R.id.button1:

            button3.setTextColor(Color.parseColor("#ffffff"));
            button2.setTextColor(Color.parseColor("#ffffff"));
            button1.setTextColor(Color.parseColor("#000000"));
            System.out.println(tag + "位置1");
            if (3 == tag) {// 當image1在第三個位置時
                ValueAnimator animator = ValueAnimator.ofFloat(image3.getRight() - image2.getLeft(), 0);
                animator.setTarget(image1);
                animator.setDuration(1000).start();
                animator.addUpdateListener(new AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        image1.setTranslationX((Float) animation.getAnimatedValue());

                    }
                });
            } else if (1 == tag) {

            } {
            ValueAnimator animator = ValueAnimator.ofFloat(image3.getRight() - image3.getLeft(), 0);
            animator.setTarget(image1);
            animator.setDuration(1000).start();
            animator.addUpdateListener(new AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    image1.setTranslationX((Float) animation.getAnimatedValue());

                }
            });
        }

            tag = 1;
            break;
        case R.id.button2:

            button2.setTextColor(Color.parseColor("#000000"));
            button3.setTextColor(Color.parseColor("#ffffff"));
            button1.setTextColor(Color.parseColor("#ffffff"));
            System.out.println(tag + "位置2");
            if (1 == tag) {// 當image1在第一個位置時
                ValueAnimator animator = ValueAnimator.ofFloat(0, image1.getRight() - image1.getLeft());
                animator.setTarget(image1);
                animator.setDuration(1000).start();
                animator.addUpdateListener(new AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        image1.setTranslationX((Float) animation.getAnimatedValue());

                    }
                });
            } else if (2 == tag) {

            } else {
                ValueAnimator animator = ValueAnimator.ofFloat(image3.getLeft(), image2.getLeft());
                animator.setTarget(image1);
                animator.setDuration(1000).start();
                animator.addUpdateListener(new AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        image1.setTranslationX((Float) animation.getAnimatedValue());

                    }
                });
            }
            tag = 2;
            break;
        case R.id.button3:

            button3.setTextColor(Color.parseColor("#000000"));
            button1.setTextColor(Color.parseColor("#ffffff"));
            button2.setTextColor(Color.parseColor("#ffffff"));

            if (1 == tag) {// 當image1在第一個位置時
                ValueAnimator animator1 = ValueAnimator.ofFloat(0, image3.getLeft());
                animator1.setTarget(image1);
                animator1.setDuration(1000).start();
                animator1.addUpdateListener(new AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        image1.setTranslationX((Float) animation.getAnimatedValue());

                    }
                });
            } else if (3 == tag) {

            } else {
                ValueAnimator animator1 = ValueAnimator.ofFloat(image1.getRight(), image3.getLeft());
                animator1.setTarget(image1);
                animator1.setDuration(1000).start();
                animator1.addUpdateListener(new AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        image1.setTranslationX((Float) animation.getAnimatedValue());

                    }
                });
            }
            tag = 3;
            break;
        default:
            break;
        }
    }
package com.example.menutabdemo.anim;

import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;

import com.example.menutabdemo.R;
import com.example.menutabdemo.R.drawable;
import com.example.menutabdemo.R.id;
import com.example.menutabdemo.R.layout;

import android.R.integer;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.animation.ValueAnimator.AnimatorUpdateListener;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.os.SystemClock;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.RadioButton;
import android.widget.TextView;

public class AnimValueActivity extends Activity implements OnClickListener {

    private ViewPager mViewPager;
    private RadioButton button1;
    private RadioButton button2;
    private RadioButton button3;
    private TextView image1;
    private TextView image2;
    private TextView image3;
    /**
     * 輪播圖自動輪播訊息
     */
    public static final int AUTOBANNER_CODE = 0X1001;
    private Timer timer = new Timer();
    /**
     * 自動輪播任務
     */
    private BannerTimerTask mBannerTimerTask;
    /**
     * 使用者當前是否點選輪播圖
     */
    private boolean mIsUserTouched = false;
    /**
     * 當前輪播圖位置
     */
    private int mBannerPosition;
    int tag = 1;
    int images[] = { R.drawable.one, R.drawable.two, R.drawable.three };
    ImageView imageView;
    public static final int FAKE_BANNER_SIZE = 10000;
    List<Integer> myList = new ArrayList<Integer>();
    Handler handler = new Handler() {
        public void handleMessage(Message msg) {
            // 當用戶點選時,不進行輪播
            if (!mIsUserTouched) {
                // 獲取當前的位置
                mBannerPosition = mViewPager.getCurrentItem();
                // 更換輪播圖
                mBannerPosition = (mBannerPosition + 1) % FAKE_BANNER_SIZE;
                mViewPager.setCurrentItem(mBannerPosition);
            }
        };
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_anim_value);
        mViewPager = (ViewPager) findViewById(R.id.mViewPager);
        button1 = (RadioButton) findViewById(R.id.button1);
        button2 = (RadioButton) findViewById(R.id.button2);
        button3 = (RadioButton) findViewById(R.id.button3);
        image1 = (TextView) findViewById(R.id.mImageView);
        image2 = (TextView) findViewById(R.id.mImageView1);
        image3 = (TextView) findViewById(R.id.mImageView2);
        button1.setOnClickListener(this);
        button2.setOnClickListener(this);
        button3.setOnClickListener(this);
        initData();
        mViewPager.setAdapter(new myPagerAdapter());
        //設定viewpager輪播的起始位置
        mViewPager.setCurrentItem(myList.size() * 100);
        startBannerTimer();
    }
    /**
     * 初始化資料
     *  
     * void 
     * @throws
     * @author jingxiang
     * @date 2017年2月9日 上午11:36:27
     */
    private void initData() {
        myList.add(R.drawable.one);
        myList.add(R.drawable.two);
        myList.add(R.drawable.three);
    }

    /**
     * 開始輪播
     *  
     * void 
     * @throws
     * @author jingxiang
     * @date 2017年2月9日 上午11:36:44
     */
    private void startBannerTimer() {
        if (timer == null) {
            timer = new Timer();
        }
        if (mBannerTimerTask != null) {
            mBannerTimerTask.cancel();
        }
        mBannerTimerTask = new BannerTimerTask(handler);
        if (timer != null && mBannerTimerTask != null) {
            // 迴圈5秒執行
            timer.schedule(mBannerTimerTask, 5000, 3000);
        }
    }
    /**
     * viewpager介面卡
    *@ClassName：myPagerAdapter
    *@authur：lijia [email protected]
    *@date：2017年2月9日 上午11:37:05   
    *
     */
    class myPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            //設定pager項
            return FAKE_BANNER_SIZE;
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            // TODO Auto-generated method stub
            return arg0 == arg1;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            // TODO Auto-generated method stub
            container.removeView((View) object);
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            // TODO Auto-generated method stub
            View view = LayoutInflater.from(AnimValueActivity.this).inflate(R.layout.item, container, false);
            ImageView imageView = (ImageView) view.findViewById(R.id.item);
            imageView.setScaleType(ScaleType.CENTER_CROP);
            //獲取當前顯示位置
            position %= myList.size();
            imageView.setImageResource(myList.get(position));
            container.addView(view);
            return view;
        }

    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch (v.getId()) {
        case R.id.button1:

            button3.setTextColor(Color.parseColor("#ffffff"));
            button2.setTextColor(Color.parseColor("#ffffff"));
            button1.setTextColor(Color.parseColor("#000000"));
            System.out.println(tag + "位置1");
            if (3 == tag) {// 當image1在第三個位置時
                ValueAnimator animator = ValueAnimator.ofFloat(image3.getRight() - image2.getLeft(), 0);
                animator.setTarget(image1);
                animator.setDuration(1000).start();
                animator.addUpdateListener(new AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        image1.setTranslationX((Float) animation.getAnimatedValue());

                    }
                });
            } else if (1 == tag) {

            } {
            ValueAnimator animator = ValueAnimator.ofFloat(image3.getRight() - image3.getLeft(), 0);
            animator.setTarget(image1);
            animator.setDuration(1000).start();
            animator.addUpdateListener(new AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    image1.setTranslationX((Float) animation.getAnimatedValue());

                }
            });
        }

            tag = 1;
            break;
        case R.id.button2:

            button2.setTextColor(Color.parseColor("#000000"));
            button3.setTextColor(Color.parseColor("#ffffff"));
            button1.setTextColor(Color.parseColor("#ffffff"));
            System.out.println(tag + "位置2");
            if (1 == tag) {// 當image1在第一個位置時
                ValueAnimator animator = ValueAnimator.ofFloat(0, image1.getRight() - image1.getLeft());
                animator.setTarget(image1);
                animator.setDuration(1000).start();
                animator.addUpdateListener(new AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        image1.setTranslationX((Float) animation.getAnimatedValue());

                    }
                });
            } else if (2 == tag) {

            } else {
                ValueAnimator animator = ValueAnimator.ofFloat(image3.getLeft(), image2.getLeft());
                animator.setTarget(image1);
                animator.setDuration(1000).start();
                animator.addUpdateListener(new AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        image1.setTranslationX((Float) animation.getAnimatedValue());

                    }
                });
            }
            tag = 2;
            break;
        case R.id.button3:

            button3.setTextColor(Color.parseColor("#000000"));
            button1.setTextColor(Color.parseColor("#ffffff"));
            button2.setTextColor(Color.parseColor("#ffffff"));

            if (1 == tag) {// 當image1在第一個位置時
                ValueAnimator animator1 = ValueAnimator.ofFloat(0, image3.getLeft());
                animator1.setTarget(image1);
                animator1.setDuration(1000).start();
                animator1.addUpdateListener(new AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        image1.setTranslationX((Float) animation.getAnimatedValue());

                    }
                });
            } else if (3 == tag) {

            } else {
                ValueAnimator animator1 = ValueAnimator.ofFloat(image1.getRight(), image3.getLeft());
                animator1.setTarget(image1);
                animator1.setDuration(1000).start();
                animator1.addUpdateListener(new AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        image1.setTranslationX((Float) animation.getAnimatedValue());

                    }
                });
            }
            tag = 3;
            break;
        default:
            break;
        }
    }
}

BannerTimerTask 程式碼：

package com.example.menutabdemo.anim;

import java.util.TimerTask;

import android.os.Handler;

public class BannerTimerTask extends TimerTask{
      Handler handler;

        public BannerTimerTask(Handler handler) {
            super();
            this.handler = handler;
        }
    @Override
    public void run() {
        // TODO Auto-generated method stub
        handler.sendEmptyMessage(AnimValueActivity.AUTOBANNER_CODE);
    }

}

文章至此結束，原諒我這個喜歡省時省力的傢伙這裡寫圖片描述

相關推薦

2017年第一篇 仿攜程機票頁自動輪播和行程切換的動畫

因工作原因不知為何都時刻關注著國內的TMC相關的APP 新年剛過 來到公司沒什麼大的任務來做，就拿我們的競品app看了看，然後發現當中有一些不錯的效果！剛好我對動畫這點也不是很熟悉就自己琢磨了思考了下！準備仿一個差不多能實現效果的~ 效果原圖如： 要的效果

2017年第一篇：關於EKF2的討論（總有你想要的）

一、開篇         首先，自我介紹一下，我叫summer，很久很久很久沒有更新blog了，這一段時間確實是太忙了，         然後，很多人應該都知道summer開PX4培訓班了吧，在此非常感謝大家的捧場。         接著，也接觸了很多神一樣的人物，交流一些

Android真正仿攜程首頁view實現

package com.example.asiatravel.ctriphomescaleview.view; import android.animation.AnimatorSet; import android.animation.ObjectAnimator; import android.cont

傳感器這五大技術在2017年突破加速IOT進程

傳感器模塊　　2017年，各類有關傳感器獲得新突破的訊息，其中有新型生物傳感器實現即時檢測，智能手機搭載小型化分子光譜傳感器以及芬蘭成功研發世界首款高光譜移動傳感器等喜訊。傳感器是實現自動檢測和自動控制的首要環節，突破一芬蘭成功研發世界首款高光譜移動傳感器芬蘭VTT國家技術研究中心通過將iPhone攝像機轉換

Elasticsearch 學習之攜程機票ElasticSearch集群運維馴服記(強烈推薦)

使用情況 strong 簡單 而且 第一個 並不是 5.x ber als 轉自： https://mp.weixin.qq.com/s/wmSTyIGCVhItVNPHcH7nsA 一、整體架構 為什麽采用ES作為搜索引擎呢？在做任何事情的時候，不要一上來就急

乾貨 | 攜程機票大資料架構最佳實踐

本文轉載自 攜程技術中心（ctriptech） 公眾號，本文PPT請點選下面 閱讀原文 獲取 作

攜程機票大資料架構最佳實踐

本文根據許鵬老師在〖DAMS 2017中國資料資產管理峰會〗現場演講內容整理而成。 講師介紹 許鵬，攜程機票大資料基礎平臺Leader，負責平臺的構建和運維。深度掌握各種大資料開源產品，如Spark、Presto及Elasticsearch。著有《Apache Spark原始碼剖析》一書。 主題簡

攜程機票ElasticSearch叢集運維馴服記

講師介紹 許鵬，攜程機票大資料基礎平臺Leader，負責平臺的構建和運維。深度掌握各種大資料開源產品，如Spark、Presto及Elasticsearch。著有《Apache Spark原始碼剖析》一書。 今天跟大家分享的是攜程機票ElasticSearch叢集的規劃和具體設定，內容相對細緻，同

RecyclerView打造價格日曆（仿攜程）

網上找的開源日曆控制元件，基本是左右切換月份的模式，但我們想要的日曆是上下滑動列表式，類似於攜程App。於是，花點時間手動擼一個吧！2018-07-03： 1、增加了往返程選擇模式 2、資料初始化耗時操作放子執行緒執行，介面跳轉無延時卡頓。- 上個效果圖：  - 主要類說明：

2019年第一篇

快遞 什麽 機會 信心 電梯 系統 自己 壓力 身邊 　　第一篇不談技術，聊聊感想，發發牢騷，寫寫段子。 　　前段時間海外出差一個月之後覺得壓力巨大，滿臉爆豆，毅然決然的裸辭掉了發展前途很好（也是走之前跟各級領導談話中感受到的）的工作。走之前約了之前在深圳認識的朋友吃了頓潮

2014新浪校招筆試題：取水果(17年第一篇讓人懵逼的面試題)

前言 2017 年，我還是會堅持每週一篇面試題，當然我每週看的面試題肯定是不止一篇的，我是在這周看過的面試題中，選擇一題自己認為較好的來寫。因為每一篇都寫，不現實，寫一篇部落格，需要的時間也是挺長的，所以選擇較好較大眾化的題目。 一、題目

錯過等一年的 【2018攜程技術峰會】，11月23日上海

作為網際網路旅遊OTA行業的領頭羊，和華東最知名的網際網路企業，攜程希望能夠扛起技術這面大旗，營

微信小程序UI------實現攜程首頁頂部的界面（彈性布局）

app clas 點擊下載 技術 使用 css .html 攻略 enter 今天寫了一個攜程界面的UI，利用H5的彈性盒子來實現，學過H5彈性盒子的，來看是比較方便的，因為CSS代碼都差不多。 可以看看這篇博客 快速使用CSS 彈性盒子 效果圖如下： 　　 主要是攜程首頁

【2017年10月最新深度學習方面的邊緣檢測論文和程式碼】【CASENet:深度類別感知語義邊緣檢測】

 【CASENet:深度類別感知語義邊緣檢測】《CASENet: Deep Category-Aware Semantic Edge Detection》Z Yu, C Feng, M Liu, S Ramalingam [CMU & Mitsubishi Elec

仿京東的首頁+mvp+輪播圖

————首先寫一下Bean類 public class MessageBean<T> { private String msg; private String code; private T data; public Strin

圖片自動輪播（仿淘寶？？）

先上效果圖（給美宅瘋狂打call~） 是不是你們要找的效果，是的話就繼續往下看hahaha 上重點（敲黑板）！！！ js <script> $(function () { var containl

android 實現廣告圖片自動輪播帶文字，可從最後一張滑到第一張，而不是回到第一張。

   之前做了個專案，要實現首頁頂部廣告輪播，於是去網上找了許多資料進行修改，實現到是實現了，但是最後一張滑到第一張的時候是從右到左快速回去。是的，是回去。客戶表示不滿意啊。咋辦，沒辦法客戶是大爺嘛，那就繼續改唄。於是做出了現在的這個。以下進入正文。先上效果圖 以上三張圖

仿狗東載入效果—支援載入成功和載入失敗動畫效果和顏色自定義的view

  最近在爬坑自定義View，看到狗東支付時有一個支付成功後的動畫效果。   遂決定自己也擼一個，加入了自己的一些想法，把實現的思路分享一下。 特點： 載入的view元素顏色支援自定義 載入成功和載入失敗會有一個動畫效果 先上效果圖

2017年的第一篇部落格

     早上來到公司，開啟部落格，看到一篇部落格 http://blog.csdn.net/laoyang360/article/details/53843771  三執行緒序員的年中告白 我有感而發，為什麼呢？沒錯 ，我不是三線的，我是四線城市的，現在的我每天早上8點上

hihocoder1489 Legendary Items （微軟2017年預科生計劃在線編程筆試）

using item 坐標軸 max 註意 tail 代碼 .cn 成了 http://hihocoder.com/problemset/problem/1489 筆試題第一道，雖然說第一道都很水，但是我感覺這題不算特別水把。。這道題我就卡住了我記得，tle，最