Android--仿一號店貨物詳情輪播圖動畫效果

還不是很完全，目前只能點中間圖片才能位移，圖片外的其他區域沒有。。（屬性動畫），對了，圖片載入用得是facebook的一款android圖片載入庫,感覺非常NB啊，完爆一切。 1、先看佈局 2、主界面代碼 3、viewpager的適配器代碼 4、facebook的載入圖片的控制項還不是很好，感興趣的 ...

還不是很完全，目前只能點中間圖片才能位移，圖片外的其他區域沒有。。（屬性動畫），對了，圖片載入用得是facebook的一款android圖片載入庫,感覺非常NB啊，完爆一切。

1、先看佈局

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3     xmlns:tools="http://schemas.android.com/tools"
  4     android:layout_width="match_parent"
  5     android:layout_height="match_parent"
  6     tools:context=".MainActivity">
  7 
  8     <ScrollView
  9         android:id="@+id/scrollView"
 10         android:layout_width="match_parent"
 11         android:layout_height="match_parent">
 12 
 13         <LinearLayout
 14             android:layout_width="match_parent"
 15             android:layout_height="wrap_content"
 16             android:background="#bfbfbf"
 17             android:orientation="vertical">
 18 
 19             <android.support.v4.view.ViewPager
 20                 android:id="@+id/viewPager"
 21                 android:layout_width="match_parent"
 22                 android:layout_height="300dp" />
 23 
 24             <LinearLayout
 25                 android:id="@+id/ll_bottom_container"
 26                 android:layout_width="match_parent"
 27                 android:layout_height="wrap_content"
 28                 android:background="#ffffff"
 29                 android:orientation="vertical">
 30 
 31 
 32                 <LinearLayout
 33                     android:layout_width="match_parent"
 34                     android:layout_height="60dp"
 35                     android:gravity="center">
 36 
 37                     <TextView
 38                         android:layout_width="wrap_content"
 39                         android:layout_height="wrap_content"
 40                         android:gravity="center"
 41                         android:text="Item 1"
 42                         android:textSize="16sp" />
 43                 </LinearLayout>
 44 
 45                 <LinearLayout
 46                     android:layout_width="match_parent"
 47                     android:layout_height="60dp"
 48                     android:gravity="center">
 49 
 50                     <TextView
 51                         android:layout_width="wrap_content"
 52                         android:layout_height="wrap_content"
 53                         android:gravity="center"
 54                         android:text="Item 1"
 55                         android:textSize="16sp" />
 56                 </LinearLayout>
 57 
 58                 <LinearLayout
 59                     android:layout_width="match_parent"
 60                     android:layout_height="60dp"
 61                     android:gravity="center">
 62 
 63                     <TextView
 64                         android:layout_width="wrap_content"
 65                         android:layout_height="wrap_content"
 66                         android:gravity="center"
 67                         android:text="Item 1"
 68                         android:textSize="16sp" />
 69                 </LinearLayout>
 70 
 71                 <LinearLayout
 72                     android:layout_width="match_parent"
 73                     android:layout_height="60dp"
 74                     android:gravity="center">
 75 
 76                     <TextView
 77                         android:layout_width="wrap_content"
 78                         android:layout_height="wrap_content"
 79                         android:gravity="center"
 80                         android:text="Item 1"
 81                         android:textSize="16sp" />
 82                 </LinearLayout>
 83 
 84                 <LinearLayout
 85                     android:layout_width="match_parent"
 86                     android:layout_height="60dp"
 87                     android:gravity="center">
 88 
 89                     <TextView
 90                         android:layout_width="wrap_content"
 91                         android:layout_height="wrap_content"
 92                         android:gravity="center"
 93                         android:text="Item 1"
 94                         android:textSize="16sp" />
 95                 </LinearLayout>
 96 
 97                 <LinearLayout
 98                     android:layout_width="match_parent"
 99                     android:layout_height="60dp"
100                     android:gravity="center">
101 
102                     <TextView
103                         android:layout_width="wrap_content"
104                         android:layout_height="wrap_content"
105                         android:gravity="center"
106                         android:text="Item 1"
107                         android:textSize="16sp" />
108                 </LinearLayout>
109 
110                 <LinearLayout
111                     android:layout_width="match_parent"
112                     android:layout_height="60dp"
113                     android:gravity="center">
114 
115                     <TextView
116                         android:layout_width="wrap_content"
117                         android:layout_height="wrap_content"
118                         android:gravity="center"
119                         android:text="Item 1"
120                         android:textSize="16sp" />
121                 </LinearLayout>
122 
123                 <LinearLayout
124                     android:layout_width="match_parent"
125                     android:layout_height="60dp"
126                     android:gravity="center">
127 
128                     <TextView
129                         android:layout_width="wrap_content"
130                         android:layout_height="wrap_content"
131                         android:gravity="center"
132                         android:text="Item 1"
133                         android:textSize="16sp" />
134                 </LinearLayout>
135 
136                 <LinearLayout
137                     android:layout_width="match_parent"
138                     android:layout_height="60dp"
139                     android:gravity="center">
140 
141                     <TextView
142                         android:layout_width="wrap_content"
143                         android:layout_height="wrap_content"
144                         android:gravity="center"
145                         android:text="Item 1"
146                         android:textSize="16sp" />
147                 </LinearLayout>
148 
149                 <LinearLayout
150                     android:layout_width="match_parent"
151                     android:layout_height="60dp"
152                     android:gravity="center">
153 
154                     <TextView
155                         android:layout_width="wrap_content"
156                         android:layout_height="wrap_content"
157                         android:gravity="center"
158                         android:text="Item 1"
159                         android:textSize="16sp" />
160                 </LinearLayout>
161 
162                 <LinearLayout
163                     android:layout_width="match_parent"
164                     android:layout_height="60dp"
165                     android:gravity="center">
166 
167                     <TextView
168                         android:layout_width="wrap_content"
169                         android:layout_height="wrap_content"
170                         android:gravity="center"
171                         android:text="Item 1"
172                         android:textSize="16sp" />
173                 </LinearLayout>
174             </LinearLayout>
175 
176         </LinearLayout>
177     </ScrollView>
178 
179     <!-- 輔助作用，用於計算屏幕中間位置 -->
180     <LinearLayout
181         android:id="@+id/ll_container_scroll"
182         android:layout_width="match_parent"
183         android:layout_height="match_parent"
184         android:background="#bfbfbf"
185         android:gravity="center"
186         android:orientation="horizontal"
187         android:visibility="invisible">
188         <!-- 必須和上面顯示的viewpager一樣高 -->
189         <android.support.v4.view.ViewPager
190             android:id="@+id/viewPager_2"
191             android:layout_width="match_parent"
192             android:layout_height="300dp" />
193 
194     </LinearLayout>
195 
196 </RelativeLayout>

2、主界面代碼

  1 package com.newair.frescotextdemo;
  2 
  3 import android.animation.Animator;
  4 import android.support.v4.view.ViewPager;
  5 import android.support.v7.app.AppCompatActivity;
  6 import android.os.Bundle;
  7 import android.view.View;
  8 import android.widget.LinearLayout;
  9 import android.widget.ScrollView;
 10 import android.widget.Toast;
 11 
 12 import java.util.ArrayList;
 13 import java.util.List;
 14 
 15 import adapter.MyViewPagerAdapter;
 16 import utils.ScreenUtils;
 17 
 18 public class MainActivity extends AppCompatActivity {
 19 
 20 
 21     private ScrollView scrollView;
 22     private LinearLayout ll_container_scroll;//scrollview第一層容器
 23     private LinearLayout ll_bottom_container;//底部容器
 24     private ViewPager viewPager;//滾動列表
 25     private ViewPager viewPager_2;
 26     private MyViewPagerAdapter myViewPagerAdapter;//適配器
 27     private List<String> image_urls;
 28 
 29     private int y;  //記住位移了多少
 30 
 31     private boolean isRunAnimation = false;//判斷當前動畫是否執行完成
 32 
 33     @Override
 34     protected void onCreate(Bundle savedInstanceState) {
 35         super.onCreate(savedInstanceState);
 36         setContentView(R.layout.activity_main);
 37 
 38         initView();
 39         initData();
 40         initEvent();
 41 
 42     }
 43 
 44     private void initView() {
 45         scrollView = (ScrollView) findViewById(R.id.scrollView);
 46         ll_container_scroll = (LinearLayout) findViewById(R.id.ll_container_scroll);
 47         ll_bottom_container = (LinearLayout) findViewById(R.id.ll_bottom_container);
 48         viewPager = (ViewPager) findViewById(R.id.viewPager);
 49         viewPager_2 = (ViewPager) findViewById(R.id.viewPager_2);
 50     }
 51 
 52     private void initData() {
 53         image_urls = new ArrayList<>();
 54         image_urls.add("http://pic31.nipic.com/20130624/8821914_104949466000_2.jpg");
 55         image_urls.add("http://pic39.nipic.com/20140307/2531170_213037883000_2.jpg");
 56         image_urls.add("http://pic10.nipic.com/20101020/3650425_202918301404_2.jpg");
 57         image_urls.add("http://pic4.nipic.com/20091104/3178344_085047585414_2.jpg");
 58         image_urls.add("http://pic4.nipic.com/20091101/3672704_160309066949_2.jpg");
 59         myViewPagerAdapter = new MyViewPagerAdapter(this, image_urls);
 60         viewPager.setAdapter(myViewPagerAdapter);
 61         viewPager_2.setAdapter(myViewPagerAdapter);
 62     }
 63 
 64     private void initEvent() {
 65         //當前頁的點擊事件
 66         myViewPagerAdapter.setOnCurrentPositionClickListener(new MyViewPagerAdapter.OnCurrentViewClick() {
 67             @Override
 68             public void onCurrentPositionClick(int position) {
 69 
 70                 if (viewPager.getTag() == null || ((Integer) viewPager.getTag()) == 1) {
 71                     showAnimation();
 72                 } else {
 73                     hideAnimation();
 74                 }
 75             }
 76         });
 77         ll_bottom_container.setOnClickListener(new View.OnClickListener() {
 78             @Override
 79             public void onClick(View v) {
 80                 hideAnimation();
 81             }
 82         });
 83     }
 84 
 85     //顯示動畫
 86     public void showAnimation() {
 87         if (!isRunAnimation) {
 88             isRunAnimation = true;
 89             int scrollY = scrollView.getScrollY();
 90             y = scrollY + ((ll_container_scroll.getMeasuredHeight() / 2) - (viewPager.getMeasuredHeight() / 2));
 91             viewPager.animate()
 92                     .x(0f)
 93                     .y(y * 1f)
 94                     .setDuration(500)
 95                     .setListener(new Animator.AnimatorListener() {
 96                         @Override
 97                         public void onAnimationStart(Animator animation) {
 98                             ll_bottom_container.setVisibility(View.INVISIBLE);
 99                         }
100 
101                         @Override
102                         public void onAnimationEnd(Animator animation) {
103                             isRunAnimation = false;
104                             viewPager.setTag(2);
105                             y = 0;
106                             ll_container_scroll.setVisibility(View.VISIBLE);
107                             viewPager_2.setCurrentItem(viewPager.getCurrentItem(),false);
108                         }
109 
110                         @Override
111                         public void onAnimationCancel(Animator animation) {
112 
113                         }
114 
115                         @Override
116                         public void onAnimationRepeat(Animator animation) {
117 
118                         }
119                     });
120         }
121 
122     }
123 
124     //關閉動畫
125     public void hideAnimation() {
126 
127         if (!isRunAnimation) {
128             viewPager.animate()
129                     .x(0f)
130                     .y(-y * 1f)
131                     .setDuration(500)
132                     .setListener(new Animator.AnimatorListener() {
133                         @Override
134                         public void onAnimationStart(Animator animation) {
135                             ll_container_scroll.setVisibility(View.INVISIBLE);
136                             viewPager.setCurrentItem(viewPager_2.getCurrentItem(),false);
137                         }
138 
139                         @Override
140                         public void onAnimationEnd(Animator animation) {
141                             isRunAnimation = false;
142                             viewPager.setTag(1);
143                             y = 0;
144                             ll_bottom_container.setVisibility(View.VISIBLE);
145                         }
146 
147                         @Override
148                         public void onAnimationCancel(Animator animation) {
149 
150                         }
151 
152                         @Override
153                         public void onAnimationRepeat(Animator animation) {
154 
155                         }
156                     });
157         }
158     }
159 
160 
161 }

3、viewpager的適配器代碼

package adapter;

import android.content.Context;
import android.net.Uri;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.facebook.drawee.view.SimpleDraweeView;
import com.newair.frescotextdemo.R;

import java.util.List;

/**
 * Created by ouhimehime on 16/4/28.
 * ---------ViewPager適配器----------
 */
public class MyViewPagerAdapter extends PagerAdapter {


    public interface OnCurrentViewClick {
        void onCurrentPositionClick(int position);
    }

    private OnCurrentViewClick onCurrentViewClick;

    public void setOnCurrentPositionClickListener(OnCurrentViewClick onCurrentViewClick) {
        this.onCurrentViewClick = onCurrentViewClick;
    }



    private Context context;
    private List<String> myData;

    public MyViewPagerAdapter(Context context, List<String> myData) {
        this.context = context;
        this.myData = myData;
    }

    @Override
    public int getCount() {
        return myData.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, final int position) {
        SimpleDraweeView simpleDraweeView = (SimpleDraweeView) LayoutInflater.from(context).inflate(R.layout.image_view, null);
        Uri uri = Uri.parse(myData.get(position));
        simpleDraweeView.setImageURI(uri);
        container.addView(simpleDraweeView);
        simpleDraweeView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onCurrentViewClick.onCurrentPositionClick(position);
            }
        });

        return simpleDraweeView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((SimpleDraweeView) object);
    }


}

4、facebook的載入圖片的控制項

<?xml version="1.0" encoding="utf-8"?>
<com.facebook.drawee.view.SimpleDraweeView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    fresco:actualImageScaleType="centerCrop"
    fresco:fadeDuration="300"
    fresco:placeholderImage="@mipmap/ic_launcher">

</com.facebook.drawee.view.SimpleDraweeView>

還不是很好，感興趣的可運行下看看。。。