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自己定义控件之轮播图控件
背景 近期要做一个轮播图的效果.网上看了几篇文章.基本上都能找到实现,效果还挺不错,可是在写的时候感觉每次都要单独去又一次在Activity里写一堆代码.于是自己封装了一下.这里仅仅是做了下封装成一个 ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 使用JS实现轮播图的效果
其中的一些css样式代码就省略了,下面只把结构层html.行为层js的代码展示出来 ,看代码说事. 一.简单的轮播图 <div class="box" id="bo ...
- jquery里面的attr和css来设置轮播图竟然效果不一致
/*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document: ...
- js实现轮播图动画
在网页浏览中,可以看到轮播图是无处不在的,这是一个前端工程最基本的技巧.首先看看几个网页的呈现的效果. QQ音乐: 网易云音乐: 天猫: 接下来将从简到难总结几种实现轮播图的方法. 1.样式一:鼠标滑 ...
- jQuery实现简易轮播图的效果
(图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...
- JavaScript实现简单轮播图动画
运行效果: 源代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&quo ...
- 利用bootstrap的carousel.js实现轮播图动画
前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...
- js代码跑马灯效果-----轮播图字效果！
文字元素: <p id="yc-msg">你有本事来打我呀!</p> js执行代码: function ycMsg() { // 获取 标签 var pOb ...
随机推荐
- 课程一(Neural Networks and Deep Learning)，第四周（Deep Neural Networks）—— 0.学习目标
Understand the key computations underlying deep learning, use them to build and train deep neural ne ...
- WebStorm project 打开多个项目的方法
File ---> Setting ---> Project:xxx ---> Sirectories 点击右侧 + Add content root,选择目录后即可显示该项目. ...
- Metasploit数据库问题汇总
数据库在metaspoit中是相当重要的,当做一个大型渗透测试项目的时候,收集到的信息是相当大的,当和你的同伴一起协同作战的时候,你们可能 在不同的地方,所以数据共享很重要了!而且Metasploit ...
- Spring Cloud Eureka 实现服务注册与发现
微服务 是一种架构模式,跟具体的语言实现无关,微服务架构将业务逻辑分散到了各个服务当中,服务间通过网络层进行通信共同协作:这样一个应用就可以划分为多个服务单独来维护发布.构建一个可靠微服务系统是需要具 ...
- Git学习系列之Debian或Ubuntu上安装Git详细步骤（图文详解）
前言 最早Git是在Linux上开发的,很长一段时间内,Git也只能在Linux和Unix系统上跑.不过,慢慢地有人把它移植到了Windows上.现在,Git可以在Linux.Unix.Mac和Win ...
- Vue + Element UI 实现权限管理系统 前端篇（二）：Vue + Element 案例
导入项目 打开 Visual Studio Code,File --> add Folder to Workspace,导入我们的项目. 安装 Element 安装依赖 Element 是国内饿 ...
- bigdata-02-hadoop2.8.4-resourceHA安装
1, 电脑环境准备 1), 关闭selinux vim /etc/selinux/config SELINUX=disabled 2), 时间同步 yum -y install chrony 修改时间 ...
- solr(一) : 整合 tomcat
前面 lucene 初探 都是为了solr打基础的. 虽然lucene 的filter 没有涉及, 但是打基础, 差不多够用了. 一. solr 和 lucene 的区别 这里我就用自己的理解来说了, ...
- MVC返回文件
上一篇 介绍了Action 返回View, 顺便也看到了返回Json的处理, 这一篇并不看文件返回的源码, 此篇是为了应用. 1. Response返回文件 在MVC的项目中, 还是能看到很多同事, ...
- Netty——高级内置解码器、编码器、ByteBuf
netty通讯需要对数据进行编码,解码,于是我们需要用到netty的编码器.解码器 netty 提供的解码器 DelimiterBasedFrameDecoder 解决TCP的粘包解码器 Stri ...