Android仿一号店货物详情轮播图动画效果

还不是很完全，目前只能点中间图片才能位移，图片外的其他区域没有。。（属性动画），对了，图片加载用得是facebook的一款android图片加载库,感觉非常nb啊，完爆一切。

1、先看布局

<?xml version="1.0" encoding="utf-8"?>
<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=".mainactivity">

  <scrollview
    android:id="@+id/scrollview"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <linearlayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#bfbfbf"
      android:orientation="vertical">

      <android.support.v4.view.viewpager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="300dp" />

      <linearlayout
        android:id="@+id/ll_bottom_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:orientation="vertical">


        <linearlayout
          android:layout_width="match_parent"
          android:layout_height="60dp"
          android:gravity="center">

          <textview
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="item 1"
            android:textsize="16sp" />
        </linearlayout>

        <linearlayout
          android:layout_width="match_parent"
          android:layout_height="60dp"
          android:gravity="center">

          <textview
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="item 1"
            android:textsize="16sp" />
        </linearlayout>

        <linearlayout
          android:layout_width="match_parent"
          android:layout_height="60dp"
          android:gravity="center">

          <textview
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="item 1"
            android:textsize="16sp" />
        </linearlayout>

        <linearlayout
          android:layout_width="match_parent"
          android:layout_height="60dp"
          android:gravity="center">

          <textview
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="item 1"
            android:textsize="16sp" />
        </linearlayout>

        <linearlayout
          android:layout_width="match_parent"
          android:layout_height="60dp"
          android:gravity="center">

          <textview
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="item 1"
            android:textsize="16sp" />
        </linearlayout>

        <linearlayout
          android:layout_width="match_parent"
          android:layout_height="60dp"
          android:gravity="center">

          <textview
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="item 1"
            android:textsize="16sp" />
        </linearlayout>

        <linearlayout
          android:layout_width="match_parent"
          android:layout_height="60dp"
          android:gravity="center">

          <textview
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="item 1"
            android:textsize="16sp" />
        </linearlayout>

        <linearlayout
          android:layout_width="match_parent"
          android:layout_height="60dp"
          android:gravity="center">

          <textview
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="item 1"
            android:textsize="16sp" />
        </linearlayout>

        <linearlayout
          android:layout_width="match_parent"
          android:layout_height="60dp"
          android:gravity="center">

          <textview
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="item 1"
            android:textsize="16sp" />
        </linearlayout>

        <linearlayout
          android:layout_width="match_parent"
          android:layout_height="60dp"
          android:gravity="center">

          <textview
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="item 1"
            android:textsize="16sp" />
        </linearlayout>

        <linearlayout
          android:layout_width="match_parent"
          android:layout_height="60dp"
          android:gravity="center">

          <textview
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="item 1"
            android:textsize="16sp" />
        </linearlayout>
      </linearlayout>

    </linearlayout>
  </scrollview>

  <!-- 辅助作用，用于计算屏幕中间位置 -->
  <linearlayout
    android:id="@+id/ll_container_scroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#bfbfbf"
    android:gravity="center"
    android:orientation="horizontal"
    android:visibility="invisible">
    <!-- 必须和上面显示的viewpager一样高 -->
    <android.support.v4.view.viewpager
      android:id="@+id/viewpager_2"
      android:layout_width="match_parent"
      android:layout_height="300dp" />

  </linearlayout>

</relativelayout>

2、主界面代码

package com.newair.frescotextdemo;

import android.animation.animator;
import android.support.v4.view.viewpager;
import android.support.v7.app.appcompatactivity;
import android.os.bundle;
import android.view.view;
import android.widget.linearlayout;
import android.widget.scrollview;
import android.widget.toast;

import java.util.arraylist;
import java.util.list;

import adapter.myviewpageradapter;
import utils.screenutils;

public class mainactivity extends appcompatactivity {


  private scrollview scrollview;
  private linearlayout ll_container_scroll;//scrollview第一层容器
  private linearlayout ll_bottom_container;//底部容器
  private viewpager viewpager;//滚动列表
  private viewpager viewpager_2;
  private myviewpageradapter myviewpageradapter;//适配器
  private list<string> image_urls;

  private int y; //记住位移了多少

  private boolean isrunanimation = false;//判断当前动画是否执行完成

  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);

    initview();
    initdata();
    initevent();

  }

  private void initview() {
    scrollview = (scrollview) findviewbyid(r.id.scrollview);
    ll_container_scroll = (linearlayout) findviewbyid(r.id.ll_container_scroll);
    ll_bottom_container = (linearlayout) findviewbyid(r.id.ll_bottom_container);
    viewpager = (viewpager) findviewbyid(r.id.viewpager);
    viewpager_2 = (viewpager) findviewbyid(r.id.viewpager_2);
  }

  private void initdata() {
    image_urls = new arraylist<>();
    image_urls.add("http://pic31.nipic.com/20130624/8821914_104949466000_2.jpg");
    image_urls.add("http://pic39.nipic.com/20140307/2531170_213037883000_2.jpg");
    image_urls.add("http://pic10.nipic.com/20101020/3650425_202918301404_2.jpg");
    image_urls.add("http://pic4.nipic.com/20091104/3178344_085047585414_2.jpg");
    image_urls.add("http://pic4.nipic.com/20091101/3672704_160309066949_2.jpg");
    myviewpageradapter = new myviewpageradapter(this, image_urls);
    viewpager.setadapter(myviewpageradapter);
    viewpager_2.setadapter(myviewpageradapter);
  }

  private void initevent() {
    //当前页的点击事件
    myviewpageradapter.setoncurrentpositionclicklistener(new myviewpageradapter.oncurrentviewclick() {
      @override
      public void oncurrentpositionclick(int position) {

        if (viewpager.gettag() == null || ((integer) viewpager.gettag()) == 1) {
          showanimation();
        } else {
          hideanimation();
        }
      }
    });
    ll_bottom_container.setonclicklistener(new view.onclicklistener() {
      @override
      public void onclick(view v) {
        hideanimation();
      }
    });
  }

  //显示动画
  public void showanimation() {
    if (!isrunanimation) {
      isrunanimation = true;
      int scrolly = scrollview.getscrolly();
      y = scrolly + ((ll_container_scroll.getmeasuredheight() / 2) - (viewpager.getmeasuredheight() / 2));
      viewpager.animate()
          .x(0f)
          .y(y * 1f)
          .setduration(500)
          .setlistener(new animator.animatorlistener() {
            @override
            public void onanimationstart(animator animation) {
              ll_bottom_container.setvisibility(view.invisible);
            }

            @override
            public void onanimationend(animator animation) {
              isrunanimation = false;
              viewpager.settag(2);
              y = 0;
              ll_container_scroll.setvisibility(view.visible);
              viewpager_2.setcurrentitem(viewpager.getcurrentitem(),false);
            }

            @override
            public void onanimationcancel(animator animation) {

            }

            @override
            public void onanimationrepeat(animator animation) {

            }
          });
    }

  }

  //关闭动画
  public void hideanimation() {

    if (!isrunanimation) {
      viewpager.animate()
          .x(0f)
          .y(-y * 1f)
          .setduration(500)
          .setlistener(new animator.animatorlistener() {
            @override
            public void onanimationstart(animator animation) {
              ll_container_scroll.setvisibility(view.invisible);
              viewpager.setcurrentitem(viewpager_2.getcurrentitem(),false);
            }

            @override
            public void onanimationend(animator animation) {
              isrunanimation = false;
              viewpager.settag(1);
              y = 0;
              ll_bottom_container.setvisibility(view.visible);
            }

            @override
            public void onanimationcancel(animator animation) {

            }

            @override
            public void onanimationrepeat(animator animation) {

            }
          });
    }
  }


}

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>

还不是很好，感兴趣的可运行下看看。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。