还不是很完全，目前只能点中间图片才能位移，图片外的其他区域没有。。（属性动画），对了，图片加载用得是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>
还不是很好，感兴趣的可运行下看看。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。