Android仿一號店貨物詳情輪播圖動畫效果
還不是很完全,目前只能點中間圖片才能位移,圖片外的其他區(qū)域沒有。。(屬性動畫),對了,圖片加載用得是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;//判斷當(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)前頁的點擊事件 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) { } }); } } //關(guān)閉動畫 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>
還不是很好,感興趣的可運行下看看。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android自定義控件實現(xiàn)簡單的輪播圖控件
- Android開發(fā)在輪播圖片上加入點擊事件的方法
- Android實現(xiàn)基于ViewPager的無限循環(huán)自動播放帶指示器的輪播圖CarouselFigureView控件
- Android如何使用RecyclerView打造首頁輪播圖
- Android實現(xiàn)輪播圖無限循環(huán)效果
- Android實現(xiàn)自定義輪播圖片控件示例
- Android下拉刷新與輪播圖滑動沖突解決方案
- Android中用RxJava和ViewPager實現(xiàn)輪播圖
- 簡單實現(xiàn)android輪播圖
- Android自定義控件實現(xiàn)優(yōu)雅的廣告輪播圖
相關(guān)文章
Android?RecyclerView實現(xiàn)九宮格效果
這篇文章主要為大家詳細(xì)介紹了Android?RecyclerView實現(xiàn)九宮格效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-06-06詳解Android中提示對話框(ProgressDialog和DatePickerDialog和TimePickerDi
這篇文章主要介紹了詳解Android中提示對話框(ProgressDialog和DatePickerDialog和TimePickerDialog&PopupWindow)的相關(guān)資料,需要的朋友可以參考下2016-01-01Android編程下拉菜單spinner用法小結(jié)(附2則示例)
這篇文章主要介紹了Android編程下拉菜單spinner用法,結(jié)合實例較為詳細(xì)的總結(jié)分析了下拉菜單Spinner的具體實現(xiàn)步驟與相關(guān)技巧,并附帶兩個示例分析其具體用法,需要的朋友可以參考下2015-12-12Flutter Android應(yīng)用啟動白屏的解決方案
任何一個app基本都會設(shè)計一個啟動頁,今天我們就來看看怎么在flutter項目中設(shè)置啟動頁,這篇文章主要給大家介紹了關(guān)于Flutter Android應(yīng)用啟動白屏解決的相關(guān)資料,需要的朋友可以參考下2021-11-11Android開發(fā)學(xué)習(xí)筆記之通過API接口將LaTex數(shù)學(xué)函數(shù)表達(dá)式轉(zhuǎn)化為圖片形式
這篇文章主要介紹了Android開發(fā)學(xué)習(xí)筆記之通過API接口將LaTex數(shù)學(xué)函數(shù)表達(dá)式轉(zhuǎn)化為圖片形式的相關(guān)資料,需要的朋友可以參考下2015-11-11