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>

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

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

# Android  # 轮播图  # Android自定义控件实现简单的轮播图控件  # Android开发在轮播图片上加入点击事件的方法  # Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigur  # Android如何使用RecyclerView打造首页轮播图  # Android实现轮播图无限循环效果  # Android实现自定义轮播图片控件示例  # Android下拉刷新与轮播图滑动冲突解决方案  # Android中用RxJava和ViewPager实现轮播图  # 简单实现android轮播图  # Android自定义控件实现优雅的广告轮播图  # 加载  # 很好  # 不是很  # 感兴趣  # 先看  # 用得  # 大家多多  # 第一层  # 对了  # 当前页  # package  # newair  # java  # frescotextdemo  # app  # AppCompatActivity  # import  # animation  # Animator  # Item 

相关文章： 免费视频制作网站,更新又快又好的免费电影网站？  定制建站方案优化指南：企业官网开发与建站费用解析  网站制作员失业,怎样查看自己网站的注册者？  整蛊网站制作软件,手机不停的收到各种网站的验证码短信,是手机病毒还是人为恶搞?有这种手机病毒吗？  宝塔新建站点为何无法访问？如何排查？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  ,网站推广常用方法？  南阳网站制作公司推荐,小学电子版试卷去哪里找资源好？  昆明网站制作哪家好,昆明公租房申请网上登录入口？  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  建站之星安装后如何自定义网站颜色与字体？  b2c电商网站制作流程,b2c水平综合的电商平台？  如何在建站之星网店版论坛获取技术支持？  网站建设制作需要多少钱费用,自己做一个网站要多少钱，模板一般多少钱？  建站之星如何快速生成多端适配网站？  C++中的Pimpl idiom是什么，有什么好处？（隐藏实现）  Dapper的Execute方法的返回值是什么意思 Dapper Execute返回值详解  武清网站制作公司,天津武清个人营业执照注销查询系统网站？  ,在苏州找工作，上哪个网站比较好？  如何用VPS主机快速搭建个人网站？  如何选择适配移动端的WAP自助建站平台？  香港服务器租用每月最低只需15元？  建站之星导航配置指南：自助建站与SEO优化全解析  宝塔面板如何快速创建新站点？  如何快速上传自定义模板至建站之星？  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  制作证书网站有哪些,全国城建培训中心证书查询官网？  如何规划企业建站流程的关键步骤？  如何挑选优质建站一级代理提升网站排名？  如何在Windows环境下新建FTP站点并设置权限？  无锡制作网站公司有哪些,无锡优八网络科技有限公司介绍？  SQL查询语句优化的实用方法总结  招贴海报怎么做,什么是海报招贴？  已有域名和空间如何搭建网站？  如何通过wdcp面板快速创建网站？  英语简历制作免费网站推荐,如何将简历翻译成英文？  c# await 一个已经完成的Task会发生什么  天津个人网站制作公司,天津网约车驾驶员从业资格证官网？  我的世界制作壁纸网站下载,手机怎么换我的世界壁纸？  大同网页,大同瑞慈医院官网？  建站之星安装模板失败：服务器环境不兼容？  内部网站制作流程,如何建立公司内部网站？  Swift中swift中的switch 语句  如何访问已购建站主机并解决登录问题？  ,怎么用自己头像做动态表情包？  如何快速搭建响应式可视化网站？  专业商城网站制作公司有哪些,pi商城官网是哪个？  网站制作多少钱一个,建一个论坛网站大约需要多少钱？  广州美橙建站如何快速搭建多端合一网站？  C++时间戳转换成日期时间的步骤和示例代码