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 ...
随机推荐
- MySQL查询表结构命令
参考网址:https://www.cnblogs.com/zhangyuhang3/p/6873895.html 一.简单描述表结构,字段类型 desc tabl_name; desc tabl_na ...
- iconfont 批量把图标加入购物车的方法
在浏览器中按 f12 打开[开发人员工具],找到[console(控制台)],输入以下代码,再按回车,稍等片刻即可把全部图标加入购物车 var ll = document.getElementsByC ...
- Docker概念学习系列之Docker核心概念之镜像Image
不多说,直接上干货! 说明: Docker 运行容器之前需要本地存在对应的镜像,如果镜像不存在,Docker 会尝试先从默认镜像仓库下载(默认使用Docker Hub公共注册服务器中的仓库),用户 ...
- JavaScript -- TextArea
-----054-TextArea.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...
- Chapter 2 Open Book——13
"People in this town," he muttered. "Dr. Cullen is a brilliant surgeon who could prob ...
- Chapter 2 Open Book——26
"Oh." He let it drop. I looked away awkwardly. 哦,他让它走了.我笨拙的看向别处. “哦.”他不再纠缠于这个问题.我笨拙地移开视线. ...
- docker（二）部署docker容器虚拟化平台
yum安装方法参考:https://www.cnblogs.com/yufeng218/p/8370670.html https://www.cnblogs.com/straycats/p/84112 ...
- Nginx图片防盗链【实战】
访问我的博客 前言 博主目前在一家原创小说网站公司工作,由于站内的作品全部是原创,于是乎不可避免地会被一些盗版网站爬取盗版,对于防盗版一直没有很好的对策,让公司很是苦恼. 最近去一些盗版网站上搜索我们 ...
- Iptables之recent模块小结
Iptables的recent模块用于限制一段时间内的连接数, 是谨防大量请求攻击的必杀绝技! 善加利用该模块可充分保证服务器安全. recent常用参数--name 设定列表名称,即设置跟 ...
- Restful API 设计参考原则
在项目中,需要为后台服务撰写API.刚开始接触的时候,并没有考虑太多,就想提供URL,服务端通过该URL进行查询.创建.更新等操作即可.但再对相关规范进行了解后,才发现,API的设计并没有那么简单,远 ...