1. 程式人生 > >Android 仿鐵友火車票首頁的城市切換動畫

Android 仿鐵友火車票首頁的城市切換動畫

新年就要來了,你的火車票買到了嗎?下面來看看大家眼熟的介面:


一個可以切換城市按鈕的簡單的實現,歡迎大家來指導,說出你的更好的方案和效果,QQ:1223235200

下面來看程式碼:

1.MainActivity.java

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.example.administrator.pingyidhapplication.fragment.BeiJingFragment;
import com.example.administrator.pingyidhapplication.fragment.SuZhouFragment;

import java.io.EOFException;
import java.util.Timer;
import java.util.TimerTask;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private TextView tvBeijing,tvSuzhou,tvZhong;
    private LinearLayout linearLayout;
    private ObjectAnimator animator;
    private ObjectAnimator animator2;
    private ObjectAnimator animator1;
    int king = 0;
    private FrameLayout flt;
    private android.support.v4.app.FragmentTransaction ft;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();

        initData();
    }

    private void initData() {
        BeiJingFragment bj = new BeiJingFragment();//獲取詳情Fragment的例項
        ft = getSupportFragmentManager().beginTransaction();//獲取FragmentTransaction 例項
        ft.replace(R.id.flt, bj); //使用DetailsFragment 的例項

        ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
        ft.commit();//提交

        linearLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                king++;
                if(king%2==0){
                    Toast.makeText(MainActivity.this,"KING",Toast.LENGTH_SHORT).show();
                    //平移動畫
                    animator = ObjectAnimator.ofFloat(tvBeijing, "translationX", 0,500,0,0);
                    animator.setDuration(1000);
                    animator.start();
                    animator1 = ObjectAnimator.ofFloat(tvSuzhou, "translationX", 0,-500,0,0);
                    animator1.setDuration(1000);
                    animator1.start();


                    tvBeijing.setText("北京南");
                    tvSuzhou.setText("宿州東"); //執行

                    BeiJingFragment bj = new BeiJingFragment();//獲取詳情Fragment的例項
                    android.support.v4.app.FragmentTransaction ft = getSupportFragmentManager().beginTransaction();//獲取FragmentTransaction 例項
                    ft.replace(R.id.flt, bj); //使用DetailsFragment 的例項

                    ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
                    ft.commit();//提交

                    // 1.建立Timer物件
//                    Timer timer = new Timer();
//                    // 3.建立TimerTask物件
//                    TimerTask timerTask = new TimerTask() {
//                        @Override
//                        public void run() {
//                            // TODO Auto-generated method stub
//
//                            tvBeijing.setText("北京南");
//                            tvSuzhou.setText("宿州東"); //執行
//                        }
//                    };
//                    // 2.使用timer.schedule()方法呼叫timerTask,定時10秒後執行run
//                    timer.schedule(timerTask, 0, 1000);

                }else {
                    Toast.makeText(MainActivity.this,"ooo",Toast.LENGTH_SHORT).show();
                    //平移動畫
                    animator = ObjectAnimator.ofFloat(tvBeijing, "translationX", 0,500,0,0);
//                    animator.addListener(new AnimatorListenerAdapter() {//便利類,只要實現需要的方法
//                        @Override
//                        public void onAnimationEnd(Animator animation) {
//                           //在動畫結束後顯示一個Toast
//                            tvBeijing.setText("宿州東");
//                        }
//                    });
                    animator.setDuration(1000);
                    animator.start();
                    animator1 = ObjectAnimator.ofFloat(tvSuzhou, "translationX", 0,-500,0,0);
//                    animator1.addListener(new AnimatorListenerAdapter() {//便利類,只要實現需要的方法
//                        @Override
//                        public void onAnimationEnd(Animator animation) {
//                            //在動畫結束後顯示一個Toast
//                            tvSuzhou.setText("北京南");
//                            tvBeijing.setText("宿州東");
//                        }
//                    });
                    animator1.setDuration(1000);
                    animator1.start();
                    tvSuzhou.setText("北京南");
                    tvBeijing.setText("宿州東");

                    SuZhouFragment sz = new SuZhouFragment();//獲取詳情Fragment的例項
                    android.support.v4.app.FragmentTransaction ft = getSupportFragmentManager().beginTransaction();//獲取FragmentTransaction 例項
                    ft.replace(R.id.flt, sz); //使用DetailsFragment 的例項

                    ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
                    ft.commit();//提交


//                    tvBeijing.setText("宿州東");
//                    tvSuzhou.setText("北京南"); //執行
//                    // 1.建立Timer物件
//                    Timer timer = new Timer();
//                    // 3.建立TimerTask物件
//                    TimerTask timerTask = new TimerTask() {
//                        @Override
//                        public void run() {
//                            // TODO Auto-generated method stub
//                            tvBeijing.setText("宿州東");
//                            tvSuzhou.setText("北京南"); //執行
//                        }
//                    };
//                    // 2.使用timer.schedule()方法呼叫timerTask,定時10秒後執行run
//                    timer.schedule(timerTask, 0, 1000);

                }
                //旋轉
                animator2 = ObjectAnimator.ofFloat(tvZhong, "rotation", 0,180,360);
                animator2.setDuration(1000);
                animator2.start();
            }
        });

    }

    private void init() {
        tvBeijing = (TextView) findViewById(R.id.tv_beijing);
        tvSuzhou = (TextView) findViewById(R.id.tv_suzhou);
        tvZhong = (TextView) findViewById(R.id.tv_zhong);
        linearLayout = (LinearLayout) findViewById(R.id.linearLayout);
        flt = (FrameLayout) findViewById(R.id.flt);

        //獲取FragmentTransaction 例項
        ft = getSupportFragmentManager().beginTransaction();
//        tvBeijing.setOnClickListener(this);
//        tvSuzhou.setOnClickListener(this);
//        tvZhong.setOnClickListener(this);
//        linearLayout.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.tv_beijing:
//                tvBeijing.setText("宿州東");
                    break;
            case R.id.linearLayout:

                break;
            case R.id.tv_suzhou:
//                tvSuzhou.setText("北京南");
                break;
            default:
                break;
        }
    }

//    @Override
//    protected void onDestroy() {
//        super.onDestroy();
//        if(animator!=null||animator1!=null){
//            animator.cancel();
//            animator1.cancel();
//        }
//
//    }
}
2.activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
    tools:context="com.example.administrator.pingyidhapplication.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="match_parent"
            android:layout_marginTop="10dp"
            android:orientation="horizontal"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_height="50dp"
            >
            <TextView
                android:id="@+id/tv_beijing"
                android:layout_gravity="center"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="北京南"
                />
            <TextView
                android:id="@+id/tv_zhong"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_gravity="center"
                android:gravity="center_horizontal"
                android:layout_height="wrap_content"
                android:text=" = = "
                />
            <TextView
                android:id="@+id/tv_suzhou"
                android:gravity="right"
                android:layout_gravity="center"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="宿州東"
                />

        </LinearLayout>

        <FrameLayout
            android:id="@+id/flt"
            android:layout_width="match_parent"
            android:layout_height="300dp"></FrameLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="wrap_content">
            <Button
                android:layout_width="match_parent"
                android:text="JUP"
                android:layout_marginLeft="65dp"
                android:layout_marginRight="65dp"
                android:layout_marginTop="10dp"
                android:background="@drawable/background_rectangle_circle_orange"
                android:layout_height="wrap_content" />
            <TextView
                android:id="@+id/tv_publish_news"
                android:layout_width="match_parent"
                android:layout_height="38dp"
                android:layout_marginLeft="65dp"
                android:layout_marginRight="65dp"
                android:layout_marginTop="10dp"
                android:background="@drawable/background_rectangle_circle_orange"
                android:gravity="center"
                android:textSize="15dp"
                android:text="釋出新聞"
                android:textColor="@color/colorAccent" />
            <Button
                android:id="@+id/btn_login"
                android:layout_width="match_parent"
                android:layout_height="35dp"
                android:layout_marginLeft="65dp"
                android:layout_marginRight="65dp"
                android:layout_marginTop="10dp"
                android:background="@drawable/next"
                android:text="登入"
                android:textColor="@android:color/white"/>
        </LinearLayout>


    </LinearLayout>


</ScrollView>

3.兩個Fragment就不寫了,直接寫圓角 background_rectangle_circle_orange.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    android:shape="rectangle">
    <!-- 填充顏色 -->
    <solid android:color="@android:color/white"></solid>

    <!-- 線的寬度,顏色灰色 -->
    <stroke android:width="1px" android:color="@color/colorAccent"></stroke>

    <!-- 矩形的圓角半徑 -->
    <corners android:radius="3dp" />
</shape>

next.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="5dp"/>
    <solid android:color="@color/colorAccent"/>
    <size android:height="40dp"
        android:width="160dp"/>
</shape>
4.fragment的佈局,fragment_bei_jing.xml:
<FrameLayout 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="com.example.administrator.pingyidhapplication.fragment.BeiJingFragment">

    <!-- TODO: Update blank fragment layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:background="@drawable/background_rectangle_circle_orange"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="@string/beijing_fragment" />
    </LinearLayout>


</FrameLayout>

希望大家有更好的建議說出來,讓我參考


相關推薦

Android 仿火車票城市切換動畫

新年就要來了,你的火車票買到了嗎?下面來看看大家眼熟的介面: 一個可以切換城市按鈕的簡單的實現,歡迎大家來指導,說出你的更好的方案和效果,QQ:1223235200 下面來看程式碼: 1.MainActivity.java import android.animatio

Android 仿網易雲來回滑那種效果

思路:中間ViewPager 畫廊,底部背景ImageView 高斯模糊   過程很曲折:參考了很多 比如網易雲音樂播放器頁面 也有類似效果 底部做成ViewPager 也可以 但是切換動畫 pagertransform 很難弄到合適的 所以最後決定還是ImageVi

Android--仿愛奇藝 輪播圖

前因 近期開啟愛奇藝的時候,突然發現它首頁的輪播圖跟以前不一樣了,左右兩個圖都能顯示一部分,且有滑動時縮放的效果,一直不知咋樣實現,然後在鴻洋的微信公眾號中看到了一篇仿魅族Banner效果的文章,最後在參考中放出了連結,然後就參考了這篇文章,就在此做個記錄。廢

Android控制元件GridView之仿支付寶錢包帶有分割線的GridView九宮格的完美實現

部落格時間:2015-02-04 15:03 今天我們來模仿一下支付寶錢包首頁中帶有分割線的GridView,俗稱九宮格。先上圖,是你想要的效果麼?如果是請繼續往下看。                                               

練習html,scc,js仿制百度

inf bottom onclick relative web name borde user scrip 1.練習目的 練習使用html,scc,js 完成界面樣式,用ul標簽實現文本框下拉,通過js完成添加列表內容等功能 2.效果 3.程序代碼 <!DOCTYP

仿各大商城---使用分型別的RecyclerView來實現

**正所謂,一入商城深似海~ 商城類的App,確實是有許多東西值得學習,但是隻要略微斟酌一下,你又會發現,它們之間存在著許多不謀而合的相似,也就是所謂的雷同~既然如此,讓我們也來接下地氣,先從一個簡單的首頁做起吧~** 源部落格http://blog.csdn.net/cjm

Android (github開源專案1)輪播圖控制元件----banner

前段時間因為公司原因再加上自己比較懶,已經很久沒有更新部落格了。最近閒置下來,為大家帶來一些我在我專案中使用到的一些比較好用的github上面的開源控制元件。今天就為大家帶來首頁banner的控制元件

css+html5仿寫淘寶

問題定義 為了鍛鍊自己原生的能力,我決定仿寫一下淘寶的首頁。一下記錄,仿寫的全部步驟。按照軟體工程的方法來實現。(ps,純為學習,沒有什麼不良居心~~) 可行性研究 技術採用原生js+html5+css3實現。完全可行 時間可行性 兩

Android 仿淘寶商品詳情下拉足跡Demo

DropDownMultiPager 仿淘寶等商品詳情頁下拉足跡效果SimpleDemo 可colne之後看MainActivity的呼叫,方便二次開發 依賴 compile 'com.nin

Android 仿支付寶搜尋結果,字串部分文字顯示高亮

最近收到一個需求就是,搜尋的關鍵詞,在搜尋結果頁的搜尋條目上高亮顯示。類似於支付寶搜尋結果頁的效果。 先來看一下效果如下圖: 經過一番思慮之後,感覺還是比較簡單的,直接上程式碼 /** * 字串高亮顯示部分文字 * @param textView

仿支付寶錢包帶有分割線的GridView九宮格的完美實現

我們來模仿一下支付寶錢包首頁中帶有分割線的GridView,俗稱九宮格。先上圖,是你想要的效果麼?如果是請繼續往下看。 我們都知道ListView設定分割線是非常容易的,設定ListView的分割線顏色和寬度,只需要在佈局中定義android:divide

【商城開發三】Android 仿淘寶商品詳情下拉足跡修改版

開發商城的快有半個月了,需要做到詳情頁下拉足跡的效果,網上找了找沒找到,找到一個差不多還有點問題,然後在基礎上進行了二次開發 感謝http://blog.csdn.net/yaphetzhao/article/details/53736471  YaphetZhao的部落格

Android使用TabHost實現在tab再次點選tab時,重新整理資料或者recyclerView回到頂部的需求

類似今日頭條,實現這麼一個需求:“在首頁tab時再次點選首頁tab,首頁列表重新整理資料或者列表回到頂部,而從其他tab切換過來時不需要首頁重新整理資料或者列表回到頂部”。1,監聽tab切換private String texts[] = {"首頁", "發現","頻道",

仿半糖App的實現

在這個專案中,學習本地json檔案的獲取、collectionView和tabvleView的使用、KVO的使用等知識點 可以實現的效果是可以左右滑動也可以上下滑動,當在搜尋框中輸入文字點選return鍵時調到搜尋介面,也可以點選其中的某一個cell跳到清單介

flex佈局練習,仿手機淘寶

看了大神的flex教程,決定寫個假手淘開心一下!我肯定三下五除二就能寫完的!對!沒錯!~~~ 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 結果半夜都還沒睡。。。。。

仿美團錢包CollapsingToolbarLayout監聽滑動隱藏效果(公司專案)

先看下效果圖 我們先看下佈局檔案: <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="h

flutter 導航切換 不過載 不重新整理 不銷燬widget

假如用了Navigator 跳出當前頁面,就會發生dispose事件,所以要想保留住頁面,就必須wiget載入在當前頁面 使用到的方法 Scaffold 疊加Widget 第二個使用Offstage隱藏 其他視窗  導航欄切換的時候 只顯示一個 首屏建立只包含底部導航欄widget 

flutter 導航切換 不過載 不重新整理 不銷燬widget

假如用了Navigator 跳出當前頁面,就會發生dispose事件,所以要想保留住頁面,就必須wiget載入在當前頁面 使用到的方法 Scaffold 疊加Widget 第二個使用Offstage隱藏 其他視窗  導航欄切換的時候 只顯示一個 首屏建立只包含底部導航欄widg

仿淘寶購買詳情購買縮小動畫

偶爾一個時候,我們產品的詳情頁面也做的和淘寶神識,為了加強 的體驗,我們加了一些動畫,下面說說淘寶詳情的縮放詳情頁的動畫怎麼做的吧。 先上兩張圖, 其實也就是幾個縮放的動畫 下面是核心程式碼 // 主頁縮放動畫 private Animation mScalIn

vue實現導航切換不同路由的方式(二)【使用vuex實現的】

stat from -c outer sed 效果圖 const line :after 1 <nav> 2 <!-- 導航欄 --> 3 <div class="indexN