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>

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

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

(0)

相关推荐

  • Android实现自定义轮播图片控件示例

    要完成一个轮播图片,首先想到的应该是使用ViewPager来实现.ViewPager已经有了滑动的功能,我们只要让它自己滚动.再加上下方的小圆点就行了.所以我们本次的自定义控件就是由ViewPager和LinearLayout叠加起来组成的. 直接先上效果图: 创建一个自定义的ViewPager 先上完整的代码 package com.kcode.autoscrollviewpager.view; import android.content.Context; import android.os

  • Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件

    最近用到需要无限轮播自动播放的轮播轮播图,网上感觉都有这样那样的问题,于是自己写了一个通用的控件CarouselFigureView. 特点: 1.可以轮播view可以自己定义,不一定是要是ImageView2.指示器默认显示,但是可以隐藏3.可以设置指示器的颜色.间距.大小 4.有基础的可以自己修改代码改变指示器位置,这个应该不难5.可以自己开启和关闭自动轮播,开启轮播的时候可以设置轮播时间间隔,默认3000毫秒 我们先来看看效果图: 然后来看看使用代码 xml代码 <?xml version

  • Android实现轮播图无限循环效果

    本文实例为大家分享了Android轮播图无限循环的具体代码,供大家参考,具体内容如下 实现无限循环 在getCount()方法中,返回一个很大的值,Integer.MAX_VALUE 在instantiateItem()方法中,获取当前View的索引时,进行取于操作,传递进来的int position是个非常大的数,对他进行求余数 在destroyItem()方法中,同样 在onPageSelected()监听方法中,对传递进来的索引进行取于 反向的无限循环 调用ViewPager对象的setC

  • Android开发在轮播图片上加入点击事件的方法

    这是我加在里面的代码,用Switch(position) 来获取当前图片,在相应的图片上加入点击事件, case  0:, case 1: 时代码如下,当点击第一张图片时,想实现case 0里面的代码,但是直接直接报错,退出,当点击第二张实现case 1中的代码时却是没问题,我想知道到底哪里不对啊. 对了,这些代码是在Fragemnt内写的,点击图片时是要从一个Fragment转到一个Activity,求大神指教

  • Android自定义控件实现优雅的广告轮播图

    前言 今天给大家带来一个新的控件–轮播图,网上已经有很多这类的博客来讲解如何实现的,那么我的这个有哪些特点呢?或是说有哪些不同呢? 满足了轮播图的基本要求,循环滑动,在最后一张切到第一张时可以平稳的过渡 简洁简洁简洁 扩展性强 如何使用 下面我们先展示两种效果图 1 默认效果 代码实现 //布局代码 <com.landptf.view.BannerM android:id="@+id/bm_banner" android:layout_width="match_pare

  • Android中用RxJava和ViewPager实现轮播图

    前言 很多人要实现轮播图都会想到使用ViewPager + Handler来完成轮播图的效果.但是在RxJava快速发展的情况下,已经可以使用RxJava来代替Handler完成这样任务了. 下面我们就来介绍如何实现RxJava+ViewPager的轮播图. 效果图如下 ViewPager的操作 说到ViwePager应该大家都不陌生,它可以结合普通的View也可以结合Fragment一起使用.在此我也就不对它的使用方法进行过多的介绍了.直接开始介绍轮播的方法. 常见的轮播操作 private

  • Android自定义控件实现简单的轮播图控件

    最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码.于是自己封装了一下.本篇轮播图实现原理原文出处:循环广告位组件的实现,这里只是做了下封装成一个控件,不必每次重复写代码了. 效果图: 实现分析 轮播图的功能就是实现左右滑动的广告.图片信息展示,那我们就用ViewPager来实现,由于考虑到用户体验,我们还需要在下面加一个指示器来标示滑动到了第几张轮播图.指示器我们可以用一个线性布局来根据要展示的轮播图

  • Android下拉刷新与轮播图滑动冲突解决方案

    最近在开发中遇到了这样一个问题,在下拉刷新组件中包含了一个轮播图组件,当左右滑动的图片时很容易触发下拉刷新,如下图所示: 如图中红色箭头所示方向切换轮播图,很容易触发下拉刷新.网上查了很多方法,发现都不能很好的解决,于是自己研究了下. 我选用的第三方控件 1.下拉刷新我选用的是chanven的CommonPullToRefresh(系统自带的SwipeRefreshLayout也应该是一样的道理); 2.轮播图选用的是daimajia的AndroidImageSlider(用ViewPager也

  • 简单实现android轮播图

    轮播图是很常用的一个效果 核心功能已经实现 没有什么特殊需求 自己没事研究的 所以封装的不太好 一些地方还比较糙 为想要研究轮播图的同学提供个参考 目前测试图片为mipmap中的图片 没有写从网络加载图片 可自行根据需求在getShowView()方法中修改 1.定时切换 通过handle延时发送通知改变界面 然后在切换viewpage的界面之后 再次发送此延时通知 就ok咯 还可以通过timer定时器实现 2.无限轮播效果 如果我们只是在自动轮播到最后一页 然后进行判断让切换到第一页 这样是可

  • Android如何使用RecyclerView打造首页轮播图

    先看看效果图: 停在中间自动翻页 序言:最近接到一个任务,做一个类似上面自动翻页的功能.可以看到,这一屏中有三张图片显示出来了,有两张没有显示完全,看到设计图的时候第一反应是可以用viewpager来实现,但是任务却跟你开了一个天大的玩笑,要求是以最左边的图片为基准,也就是说,左边的图片也得显示完全,就像下图所示,后来仔细想想viewpager好像没有这样的功能,也有可能是我不知道,我也没有找到这样的文章或者信息,希望知道的简友私戳交流一下,感激不尽,好了,言归正传 停在左边 在开始之前呢,首先

随机推荐