首页 > 系统 > Android > 正文

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

2019-12-12 02:37:30
字体:
来源:转载
供稿:网友

还不是很完全,目前只能点中间图片才能位移,图片外的其他区域没有。。(属性动画),对了,图片加载用得是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>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表