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

于 2021-06-01 05:40:56 发布
阅读量202 收藏
点赞数
文章标签： android 商品详情轮播

还不是很完全，目前只能点中间图片才能位移，图片外的其他区域没有。。(属性动画)，对了，图片加载用得是facebook的一款android图片加载库,感觉非常NB啊，完爆一切。

1、先看布局

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

android:id="@+id/scrollView"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="#bfbfbf"

android:orientation="vertical">

android:id="@+id/viewPager"

android:layout_width="match_parent"

android:layout_height="300dp" />

android:id="@+id/ll_bottom_container"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="#ffffff"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="60dp"

android:gravity="center">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="Item 1"

android:textSize="16sp" />

android:layout_width="match_parent"

android:layout_height="60dp"

android:gravity="center">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="Item 1"

android:textSize="16sp" />

android:layout_width="match_parent"

android:layout_height="60dp"

android:gravity="center">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="Item 1"

android:textSize="16sp" />

android:layout_width="match_parent"

android:layout_height="60dp"

android:gravity="center">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="Item 1"

android:textSize="16sp" />

android:layout_width="match_parent"

android:layout_height="60dp"

android:gravity="center">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="Item 1"

android:textSize="16sp" />

android:layout_width="match_parent"

android:layout_height="60dp"

android:gravity="center">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="Item 1"

android:textSize="16sp" />

android:layout_width="match_parent"

android:layout_height="60dp"

android:gravity="center">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="Item 1"

android:textSize="16sp" />

android:layout_width="match_parent"

android:layout_height="60dp"

android:gravity="center">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="Item 1"

android:textSize="16sp" />

android:layout_width="match_parent"

android:layout_height="60dp"

android:gravity="center">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="Item 1"

android:textSize="16sp" />

android:layout_width="match_parent"

android:layout_height="60dp"

android:gravity="center">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="Item 1"

android:textSize="16sp" />

android:layout_width="match_parent"

android:layout_height="60dp"

android:gravity="center">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="Item 1"

android:textSize="16sp" />

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">

android:id="@+id/viewPager_2"

android:layout_width="match_parent"

android:layout_height="300dp" />

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 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 myData;

public MyViewPagerAdapter(Context context, List 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的加载图片的控件

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">

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

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

weixin_39673947
关注
android京东首页轮播代码,仿京东商品详情轮播图
weixin_36443053的博客
05-26 448
好久没有更新啦,今天来搞一个京东的轮播:直接上效果8月-16-2016 09-38-10.gif8月-16-2016 09-37-17.gif如果想真实体验可以去京东APP体验一下.描述一下效果,向左滑动时,右边的图片从底下出来 而且是一半的位置同理向右滑动也是 .那么怎么实现呢先搞一个collectionview 做一个不同的轮播,然后在视图的最上层放一个imageview 上面呈现当前的图片,...
Android广告轮播+大图相册用于商品详情
12-15
该广告轮播可快速设置指示器位置、可见、轮播、滑动。同时可设置广告轮播高度。大图相册可以查看当前位置大图同时可以双击放大缩小旋转。我主要是根据项目需求商品详情页做出的dome。我博客有写怎么快速使用：http://blog.csdn.net/yanxuxu123/article/details/53641876
Android 实现图片轮播(仿淘宝首页商品轮播展示)
Y_sunny_U的博客
08-16 2327
一 引用依赖 // 图片轮播图 implementation 'com.github.dongjunkun:BannerLayout:1.0.6' 二 创建图片加载工具类 public class GlideImageLoader implements BannerLayout.ImageLoader { @Override public void...
Android轮播图控件的实现详解(附GitHub开源链接)
DonKingLiang的专栏
03-13 7860
轮播图在Android开发中是非常常见的控件，一般App的首页广告和电商类App的商品详情图片都会用轮播图来实现。可是Android源生的控件中却没有能直接拿来使用的轮播图控件，所以一般的轮播图效果都需要我们自己去实现。今天我就给大家介绍一个我自己写的轮播图控件：CustomBanner。有需要的同学可以直接访问我的GitHub使用该控件。下面我将为大家详细介绍CustomBanner控件的实现思路
android 轮播图 github,Android轮播图控件的实现详解(附GitHub开源链接)
weixin_30702441的博客
05-27 259
轮播图在Android开发中是非常常见的控件，一般App的首页广告和电商类App的商品详情图片都会用轮播图来实现。可是Android源生的控件中却没有能直接拿来使用的轮播图控件，所以一般的轮播图效果都需要我们自己去实现。今天我就给大家介绍一个我自己写的轮播图控件：CustomBanner。有需要的同学可以直接访问我的GitHub使用该控件。下面我将为大家详细介绍CustomBanner控件的实现思...
Android仿一号店货物详情轮播图动画效果
08-30
总的来说，实现Android仿一号店货物详情轮播图动画效果，需要结合使用ViewPager、属性动画、图片加载库以及触摸事件处理。通过这些技术的组合，我们可以创建出具有平滑过渡和用户友好的轮播图组件。同时，还要注意...
Android实现图片轮播效果的两种方法
09-03
在Android应用开发中，图片轮播效果是一种常见的用户体验设计，用于展示多个图片或者广告信息。在本文中，我们将探讨两种实现Android图片轮播效果的方法。这两种方法都可以为用户带来流畅且吸引人的视觉体验。 首先...
Android实现ViewPage轮播图效果
08-27
本篇文章将详细讲解如何利用`ViewPager`组件在Android中实现轮播图效果。 首先，我们需要了解`ViewPager`。`ViewPager`是Android SDK中的一个视图容器，它允许用户通过水平滑动来浏览多个页面。在这个场景中，我们...
详解android 视频图片混合轮播实现
08-26
主要介绍了android 视频图片混合轮播实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
仿京东淘宝商品详情页中视频和图片的轮播功能
05-22
该项目是视频和图片的轮播功能，完美解决轮播的问题。
Android使用ViewPager加载图片和轮播视频
08-31
主要为大家详细介绍了Android使用ViewPager加载图片和轮播视频，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android 炫酷轮播图,超炫酷轮播图
weixin_31975737的博客
05-29 459
var box = document.querySelector('#box');var slide = document.querySelector('.slide');var arraw = document.querySelector('.arraw');var lis = document.querySelectorAll('li');var json = [ // 包含了5张图片里面所...
Android 广告轮播图(最简单的实现)
u014714188的博客
11-21 3449
本篇文章主要介绍的是图片的轮播图实现。我们先来看看最后的实现效果。 抱歉，这里最后的GIF图是通过视频转换来的。最后的效果图有了，那么接下来就开始具体的实现。 首先，添加依赖 //图片轮播框架 implementation 'com.youth.banner:banner:1.4.10' //glide，比较好的版本，Matisse版本，配合glide3.7.0，因为后面的gli...
android图片视频图片封装,详解android 视频图片混合轮播实现
weixin_39551554的博客
05-25 297
循环添加视频view 图片viewfor (int i = 0 ;iif (beansArrayList.get(i).getType()==1){videoPlayer = new NiceVideoPlayer(this);controller = new TxVideoPlayerController(this);videoPlayer.setController(controller);...
Android之轻量级自定义垂直跑马灯（仿京东、淘宝 广告轮播）、自定义画板
递归安卓
07-02 1865
前言：       此贴在于功能，粘贴可用、阅读可懂，代码优化和UI请按照需求自行定义。GIF：实现思路：    垂直跑马灯，定时轮播，继承ViewFlipper实现。此贴没有对ViewFlipper进行详细的源码解析，如有需求请自行查阅。Begin: ...1、创建XMarqueeView类继承自ViewFlipperpublic class XMarqueeView extends ViewF...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值