当前位置：移动技术网 > 移动技术>移动开发>Android > Android仿一号店货物详情轮播图动画效果

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

2019年07月24日 | 移动技术网移动技术 | 我要评论

还不是很完全，目前只能点中间图片才能位移，图片外的其他区域没有。。（属性动画），对了，图片加载用得是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 studio基本布局

什么是布局？就是把界面中的控件按照某种规律摆放到指定的位置布局的二种实现代码xml配置文件：res/layout... [阅读全文]
笔记7

一.常见对话框1.普通对话框2.单选对话框3.多选对话框4.消息提示框5.自定义对话框二. 智慧园区登陆界面的案... [阅读全文]
集成AndFix热修复

补丁文件的生成使用apkpatch命令生成apatch包bug版本打包生成old.apk 修复后的版本再打包生成... [阅读全文]
荐打造一个通用、可配置、多句柄的数据上报 SDK

一个 App 一般会存在很多场景去上传 App 中产生的数据，比如 APM、埋点统计、开发者自定义的数据等等。所... [阅读全文]
Progressbar及日志

LogCat是Android中的命令行工具，用于获取程序从启动到关闭的日志信息。Log类所输出的日志内容分为五个... [阅读全文]
ViewController LifeCycle

we will focused on the differences between viewDidLoad, ... [阅读全文]
《第一行代码》第二章、探究活动

2.1图中若勾选Generate Layout File将自动为活动创建一个对应的布局文件，若勾选Launche... [阅读全文]
android studio布局文件详解

详解如下<?xml version="1.0" encoding="utf-8"?><andr... [阅读全文]
笔记4

一.文本框（TextView）(a) 宽度，高度（match_parent，warp_content，自己设置）... [阅读全文]
Android UI布局线性布局

Linear Layout (线性布局)线性布局是Android布局中最简单的布局，也是最常用，最实用的布局。a... [阅读全文]

网友评论


验证码：

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

2019年07月24日 | 移动技术网移动技术 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论