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 ...
随机推荐
- 使用ServiceStack改造我们的项目
ServiceStack是一个NET环境下的开源框架集合 包括轻量级的Orm框架,数据库访问,Json处理,Redis驱动等多个模块,我们可以按需选择使用 serviceStack.Ormlite s ...
- Deep Learning (中文版&英文版)
Bengio Yoshua,Ian J. Goodfellow 和 Aaron Courville共同撰写的<深度学习>(Deep Learning)是一本为了帮助学生及从业者入门机器学习 ...
- Storm官方提供的trident单词计数的例子
上代码: public class TridentWordCount { public static class Split extends BaseFunction { @Override publ ...
- c++中char类型字符串拼接以及int类型转换为char类型 && 创建文件夹
如下所示: #include <iostream> #include <windows.h> #include <cstring> using namespace ...
- electron打包成桌面应用程序的详细介绍
1.前提条件 a. 安装了node b.安装了electron c.你知道自己写的东西(js,css,html等等)放在那个文件夹(假设这个文件夹命名为 app,下面会用到)中 2.安装electro ...
- JavaScript -- Window-Resize
-----036-Window-Resize.html----- <!DOCTYPE html> <html> <head> <meta http-equiv ...
- 插入排序:直接插入排序&希尔排序
一.直接插入排序 1. 思想 直接排序法, 可以分为两个部分, 一部分是有序的, 一部分是无序的. 从这个图上, 应该是能看清楚直接插入排序的思想了. 将无序部分的第一个与有序部分进行比较. 从有序部 ...
- Mysql字符串转换为整型
使用Convert(字段名, 类型)方法 SELECT CONVERT(filedName, UNSIGNED INTEGER) ;
- Spring注解 @Configuration
Spring注解 @Configuration 一.@Configuration的作用 二.@Configuration的Spring容器启动方式 三.不加@Configuration的@Bean的解 ...
- 设计模式学习--面向对象的5条设计原则之开放封闭原则--OCP
一.OCP简介(OCP--Open-Closed Principle):Software entities(classes,modules,functions,etc.) should be open ...