Android仿一號(hào)店貨物詳情輪播圖動(dòng)畫效果
更新時(shí)間：2017年06月22日 11:55:20 作者：灬布衣丶公爵丨
這篇文章主要為大家詳細(xì)介紹了Android-仿一號(hào)店貨物詳情輪播圖動(dòng)畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
還不是很完全，目前只能點(diǎn)中間圖片才能位移，圖片外的其他區(qū)域沒有。。（屬性動(dòng)畫），對(duì)了，圖片加載用得是facebook的一款android圖片加載庫(kù),感覺非常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>
<!-- 輔助作用，用于計(jì)算屏幕中間位置 -->
<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;//滾動(dòng)列表
private ViewPager viewPager_2;
private MyViewPagerAdapter myViewPagerAdapter;//適配器
private List<String> image_urls;
private int y; //記住位移了多少
private boolean isRunAnimation = false;//判斷當(dāng)前動(dòng)畫是否執(zhí)行完成
@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() {
//當(dāng)前頁(yè)的點(diǎn)擊事件
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();
}
});
}
//顯示動(dòng)畫
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) {
}
});
}
}
//關(guān)閉動(dòng)畫
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>
還不是很好，感興趣的可運(yùn)行下看看。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Android自定義控件實(shí)現(xiàn)簡(jiǎn)單的輪播圖控件
- Android開發(fā)在輪播圖片上加入點(diǎn)擊事件的方法
- Android實(shí)現(xiàn)基于ViewPager的無(wú)限循環(huán)自動(dòng)播放帶指示器的輪播圖CarouselFigureView控件
- Android如何使用RecyclerView打造首頁(yè)輪播圖
- Android實(shí)現(xiàn)輪播圖無(wú)限循環(huán)效果
- Android實(shí)現(xiàn)自定義輪播圖片控件示例
- Android下拉刷新與輪播圖滑動(dòng)沖突解決方案
- Android中用RxJava和ViewPager實(shí)現(xiàn)輪播圖
- 簡(jiǎn)單實(shí)現(xiàn)android輪播圖
- Android自定義控件實(shí)現(xiàn)優(yōu)雅的廣告輪播圖
相關(guān)文章
在App中TabBar形式交互是非常常見的，但是系統(tǒng)提供的的樣式大多數(shù)又不能滿足我們產(chǎn)品和UI的想法，本文記錄了在Flutter中如何實(shí)現(xiàn)自定義TabBar的一個(gè)思路和過(guò)程，需要的可以參考一下2022-04-04
Android編程實(shí)現(xiàn)圖片的顏色處理功能示例
這篇文章主要介紹了Android編程實(shí)現(xiàn)圖片的顏色處理功能,涉及Android拖動(dòng)條的使用及圖形顏色處理相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了Android字段驗(yàn)證的實(shí)例代碼的相關(guān)資料，代碼簡(jiǎn)單易懂，具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05
Flutter實(shí)現(xiàn)密碼強(qiáng)度校驗(yàn)結(jié)果的示例詳解
我們經(jīng)常在一些網(wǎng)站上看到這樣的密碼強(qiáng)度指示，使用三段線，分別用不同的顏色來(lái)表示弱密碼、中等強(qiáng)度密碼和強(qiáng)密碼，本篇我們就用?Flutter?來(lái)實(shí)現(xiàn)這樣一個(gè)密碼強(qiáng)度校驗(yàn)示例，希望對(duì)大家有所幫助2023-08-08
android實(shí)現(xiàn)圓形漸變進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)圓形漸變進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
Android中WebView實(shí)現(xiàn)點(diǎn)擊超鏈接啟動(dòng)QQ的方法
這篇文章主要給大家介紹了在Android中WebView如何實(shí)現(xiàn)點(diǎn)擊超鏈接啟動(dòng)QQ的方法，文中給出了詳細(xì)的示例代碼，相信對(duì)大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04
Android 圖片特效處理的方法實(shí)例，需要的朋友可以參考一下2013-03-03
android播放視頻時(shí)在立體聲與單聲道之間切換無(wú)變化原因分析及解決
使用第三方視頻播放器，有立體聲與單聲道之間切換，發(fā)現(xiàn)切換后無(wú)作用，原因是由于在HAL層默認(rèn)沒有處理上層發(fā)的stereo 轉(zhuǎn)mono的命令，具體的解決方法如下2013-06-06
Chronometer是一個(gè)簡(jiǎn)單的計(jì)時(shí)器，這篇文章主要介紹了android Chronometer控件簡(jiǎn)單使用，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-09-09
Android直播系統(tǒng)平臺(tái)搭建之圖片實(shí)現(xiàn)陰影效果的方法小結(jié)
這篇文章主要介紹了Android直播系統(tǒng)平臺(tái)搭建， 圖片實(shí)現(xiàn)陰影效果的若干種方法,本文給大家?guī)?lái)三種方法，每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-08-08