溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Android仿一號(hào)店貨物詳情輪播圖動(dòng)畫效果

發(fā)布時(shí)間：2020-10-21 19:50:08 來(lái)源：腳本之家 閱讀：139 作者：灬布衣丶公爵丨 欄目：移動(dòng)開發(fā)

還不是很完全，目前只能點(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("https://cache.yisu.com/upload/information/20200623/125/129349.gif");
    image_urls.add("https://cache.yisu.com/upload/information/20200623/125/129350.gif");
    image_urls.add("https://cache.yisu.com/upload/information/20200623/125/129351.gif");
    image_urls.add("https://cache.yisu.com/upload/information/20200623/125/129352.gif");
    image_urls.add("https://cache.yisu.com/upload/information/20200623/125/129353.gif");
    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í)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手