Android--仿一号店货物详情轮播图动画效果
还不是很完全,目前只能点中间图片才能位移,图片外的其他区域没有。。(属性动画),对了,图片加载用得是facebook的一款android图片加载库,感觉非常NB啊,完爆一切。
1、先看布局
1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:tools="http://schemas.android.com/tools" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent" 6 tools:context=".MainActivity"> 7 8 <ScrollView 9 android:id="@+id/scrollView" 10 android:layout_width="match_parent" 11 android:layout_height="match_parent"> 12 13 <LinearLayout 14 android:layout_width="match_parent" 15 android:layout_height="wrap_content" 16 android:background="#bfbfbf" 17 android:orientation="vertical"> 18 19 <android.support.v4.view.ViewPager 20 android:id="@+id/viewPager" 21 android:layout_width="match_parent" 22 android:layout_height="300dp" /> 23 24 <LinearLayout 25 android:id="@+id/ll_bottom_container" 26 android:layout_width="match_parent" 27 android:layout_height="wrap_content" 28 android:background="#ffffff" 29 android:orientation="vertical"> 30 31 32 <LinearLayout 33 android:layout_width="match_parent" 34 android:layout_height="60dp" 35 android:gravity="center"> 36 37 <TextView 38 android:layout_width="wrap_content" 39 android:layout_height="wrap_content" 40 android:gravity="center" 41 android:text="Item 1" 42 android:textSize="16sp" /> 43 </LinearLayout> 44 45 <LinearLayout 46 android:layout_width="match_parent" 47 android:layout_height="60dp" 48 android:gravity="center"> 49 50 <TextView 51 android:layout_width="wrap_content" 52 android:layout_height="wrap_content" 53 android:gravity="center" 54 android:text="Item 1" 55 android:textSize="16sp" /> 56 </LinearLayout> 57 58 <LinearLayout 59 android:layout_width="match_parent" 60 android:layout_height="60dp" 61 android:gravity="center"> 62 63 <TextView 64 android:layout_width="wrap_content" 65 android:layout_height="wrap_content" 66 android:gravity="center" 67 android:text="Item 1" 68 android:textSize="16sp" /> 69 </LinearLayout> 70 71 <LinearLayout 72 android:layout_width="match_parent" 73 android:layout_height="60dp" 74 android:gravity="center"> 75 76 <TextView 77 android:layout_width="wrap_content" 78 android:layout_height="wrap_content" 79 android:gravity="center" 80 android:text="Item 1" 81 android:textSize="16sp" /> 82 </LinearLayout> 83 84 <LinearLayout 85 android:layout_width="match_parent" 86 android:layout_height="60dp" 87 android:gravity="center"> 88 89 <TextView 90 android:layout_width="wrap_content" 91 android:layout_height="wrap_content" 92 android:gravity="center" 93 android:text="Item 1" 94 android:textSize="16sp" /> 95 </LinearLayout> 96 97 <LinearLayout 98 android:layout_width="match_parent" 99 android:layout_height="60dp" 100 android:gravity="center"> 101 102 <TextView 103 android:layout_width="wrap_content" 104 android:layout_height="wrap_content" 105 android:gravity="center" 106 android:text="Item 1" 107 android:textSize="16sp" /> 108 </LinearLayout> 109 110 <LinearLayout 111 android:layout_width="match_parent" 112 android:layout_height="60dp" 113 android:gravity="center"> 114 115 <TextView 116 android:layout_width="wrap_content" 117 android:layout_height="wrap_content" 118 android:gravity="center" 119 android:text="Item 1" 120 android:textSize="16sp" /> 121 </LinearLayout> 122 123 <LinearLayout 124 android:layout_width="match_parent" 125 android:layout_height="60dp" 126 android:gravity="center"> 127 128 <TextView 129 android:layout_width="wrap_content" 130 android:layout_height="wrap_content" 131 android:gravity="center" 132 android:text="Item 1" 133 android:textSize="16sp" /> 134 </LinearLayout> 135 136 <LinearLayout 137 android:layout_width="match_parent" 138 android:layout_height="60dp" 139 android:gravity="center"> 140 141 <TextView 142 android:layout_width="wrap_content" 143 android:layout_height="wrap_content" 144 android:gravity="center" 145 android:text="Item 1" 146 android:textSize="16sp" /> 147 </LinearLayout> 148 149 <LinearLayout 150 android:layout_width="match_parent" 151 android:layout_height="60dp" 152 android:gravity="center"> 153 154 <TextView 155 android:layout_width="wrap_content" 156 android:layout_height="wrap_content" 157 android:gravity="center" 158 android:text="Item 1" 159 android:textSize="16sp" /> 160 </LinearLayout> 161 162 <LinearLayout 163 android:layout_width="match_parent" 164 android:layout_height="60dp" 165 android:gravity="center"> 166 167 <TextView 168 android:layout_width="wrap_content" 169 android:layout_height="wrap_content" 170 android:gravity="center" 171 android:text="Item 1" 172 android:textSize="16sp" /> 173 </LinearLayout> 174 </LinearLayout> 175 176 </LinearLayout> 177 </ScrollView> 178 179 <!-- 辅助作用,用于计算屏幕中间位置 --> 180 <LinearLayout 181 android:id="@+id/ll_container_scroll" 182 android:layout_width="match_parent" 183 android:layout_height="match_parent" 184 android:background="#bfbfbf" 185 android:gravity="center" 186 android:orientation="horizontal" 187 android:visibility="invisible"> 188 <!-- 必须和上面显示的viewpager一样高 --> 189 <android.support.v4.view.ViewPager 190 android:id="@+id/viewPager_2" 191 android:layout_width="match_parent" 192 android:layout_height="300dp" /> 193 194 </LinearLayout> 195 196 </RelativeLayout>
2、主界面代码
1 package com.newair.frescotextdemo; 2 3 import android.animation.Animator; 4 import android.support.v4.view.ViewPager; 5 import android.support.v7.app.AppCompatActivity; 6 import android.os.Bundle; 7 import android.view.View; 8 import android.widget.LinearLayout; 9 import android.widget.ScrollView; 10 import android.widget.Toast; 11 12 import java.util.ArrayList; 13 import java.util.List; 14 15 import adapter.MyViewPagerAdapter; 16 import utils.ScreenUtils; 17 18 public class MainActivity extends AppCompatActivity { 19 20 21 private ScrollView scrollView; 22 private LinearLayout ll_container_scroll;//scrollview第一层容器 23 private LinearLayout ll_bottom_container;//底部容器 24 private ViewPager viewPager;//滚动列表 25 private ViewPager viewPager_2; 26 private MyViewPagerAdapter myViewPagerAdapter;//适配器 27 private List<String> image_urls; 28 29 private int y; //记住位移了多少 30 31 private boolean isRunAnimation = false;//判断当前动画是否执行完成 32 33 @Override 34 protected void onCreate(Bundle savedInstanceState) { 35 super.onCreate(savedInstanceState); 36 setContentView(R.layout.activity_main); 37 38 initView(); 39 initData(); 40 initEvent(); 41 42 } 43 44 private void initView() { 45 scrollView = (ScrollView) findViewById(R.id.scrollView); 46 ll_container_scroll = (LinearLayout) findViewById(R.id.ll_container_scroll); 47 ll_bottom_container = (LinearLayout) findViewById(R.id.ll_bottom_container); 48 viewPager = (ViewPager) findViewById(R.id.viewPager); 49 viewPager_2 = (ViewPager) findViewById(R.id.viewPager_2); 50 } 51 52 private void initData() { 53 image_urls = new ArrayList<>(); 54 image_urls.add("http://pic31.nipic.com/20130624/8821914_104949466000_2.jpg"); 55 image_urls.add("http://pic39.nipic.com/20140307/2531170_213037883000_2.jpg"); 56 image_urls.add("http://pic10.nipic.com/20101020/3650425_202918301404_2.jpg"); 57 image_urls.add("http://pic4.nipic.com/20091104/3178344_085047585414_2.jpg"); 58 image_urls.add("http://pic4.nipic.com/20091101/3672704_160309066949_2.jpg"); 59 myViewPagerAdapter = new MyViewPagerAdapter(this, image_urls); 60 viewPager.setAdapter(myViewPagerAdapter); 61 viewPager_2.setAdapter(myViewPagerAdapter); 62 } 63 64 private void initEvent() { 65 //当前页的点击事件 66 myViewPagerAdapter.setOnCurrentPositionClickListener(new MyViewPagerAdapter.OnCurrentViewClick() { 67 @Override 68 public void onCurrentPositionClick(int position) { 69 70 if (viewPager.getTag() == null || ((Integer) viewPager.getTag()) == 1) { 71 showAnimation(); 72 } else { 73 hideAnimation(); 74 } 75 } 76 }); 77 ll_bottom_container.setOnClickListener(new View.OnClickListener() { 78 @Override 79 public void onClick(View v) { 80 hideAnimation(); 81 } 82 }); 83 } 84 85 //显示动画 86 public void showAnimation() { 87 if (!isRunAnimation) { 88 isRunAnimation = true; 89 int scrollY = scrollView.getScrollY(); 90 y = scrollY + ((ll_container_scroll.getMeasuredHeight() / 2) - (viewPager.getMeasuredHeight() / 2)); 91 viewPager.animate() 92 .x(0f) 93 .y(y * 1f) 94 .setDuration(500) 95 .setListener(new Animator.AnimatorListener() { 96 @Override 97 public void onAnimationStart(Animator animation) { 98 ll_bottom_container.setVisibility(View.INVISIBLE); 99 } 100 101 @Override 102 public void onAnimationEnd(Animator animation) { 103 isRunAnimation = false; 104 viewPager.setTag(2); 105 y = 0; 106 ll_container_scroll.setVisibility(View.VISIBLE); 107 viewPager_2.setCurrentItem(viewPager.getCurrentItem(),false); 108 } 109 110 @Override 111 public void onAnimationCancel(Animator animation) { 112 113 } 114 115 @Override 116 public void onAnimationRepeat(Animator animation) { 117 118 } 119 }); 120 } 121 122 } 123 124 //关闭动画 125 public void hideAnimation() { 126 127 if (!isRunAnimation) { 128 viewPager.animate() 129 .x(0f) 130 .y(-y * 1f) 131 .setDuration(500) 132 .setListener(new Animator.AnimatorListener() { 133 @Override 134 public void onAnimationStart(Animator animation) { 135 ll_container_scroll.setVisibility(View.INVISIBLE); 136 viewPager.setCurrentItem(viewPager_2.getCurrentItem(),false); 137 } 138 139 @Override 140 public void onAnimationEnd(Animator animation) { 141 isRunAnimation = false; 142 viewPager.setTag(1); 143 y = 0; 144 ll_bottom_container.setVisibility(View.VISIBLE); 145 } 146 147 @Override 148 public void onAnimationCancel(Animator animation) { 149 150 } 151 152 @Override 153 public void onAnimationRepeat(Animator animation) { 154 155 } 156 }); 157 } 158 } 159 160 161 }
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>
还不是很好,感兴趣的可运行下看看。。。
新人学习中,也不太会总结,有做的不对的地方希望各位大神指出,谢谢。