使用viewpage和动画来打造类是电影海报画廊展示效果
2016-11-23 10:16
567 查看
首先给大家看张效果图:
有点类是淘宝美团等app中电影海报展示的ui画面。这也是本篇博文最终实现效果。
这个是效果的主要类:
这里的main:
其中:
预加载设置为5的:
预加载设置为1的:
其中item布局是用的一个卡片布局方式:
总共依赖了:
其中:
viewpage的适配器这里就不贴出来了。很简单。
最后给出源码:http://download.csdn.net/detail/qq_17387361/9690575
有点类是淘宝美团等app中电影海报展示的ui画面。这也是本篇博文最终实现效果。
这个是效果的主要类:
package com.example.galleayhenrydemo; import android.support.v4.view.ViewPager; import android.view.View; /** * Created by leo on 16/5/7. */ public class ZoomOutPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.9f; private static final float MIN_ALPHA = 0.5f; private static float defaultScale = 0.9f; public void transformPage(View view, float position) { int pageWidth = view.getWidth(); int pageHeight = view.getHeight(); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0); view.setScaleX(defaultScale); view.setScaleY(defaultScale); } else if (position <= 1) { // [-1,1] // Modify the default slide transition to shrink the page as well float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); float vertMargin = pageHeight * (1 - scaleFactor) / 2; float horzMargin = pageWidth * (1 - scaleFactor) / 2; if (position < 0) { view.setTranslationX(horzMargin - vertMargin / 2); } else { view.setTranslationX(-horzMargin + vertMargin / 2); } // Scale the page down (between MIN_SCALE and 1) view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); // Fade the page relative to its size. view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA)); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0); view.setScaleX(defaultScale); view.setScaleY(defaultScale); } } }
这里的main:
public class MainActivity extends AppCompatActivity { private ViewPager viewPager; private PageAdapter adapter; private LoadingDialog loaddingDialog; private int img[] = {R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); } private void init() { loaddingDialog = new LoadingDialog(this); //初始化ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager); adapter = new PageAdapter(MainActivity.this, img); viewPager.setOffscreenPageLimit(5); viewPager.setPageTransformer(true, new ZoomOutPageTransformer()); viewPager.setAdapter(adapter); loaddingDialog.cancel(); } }
其中:
viewPager.setOffscreenPageLimit(5);这是设置viewpage预加载。为了更好提现这个属性,给大家2张效果图对比就知道了。
预加载设置为5的:
预加载设置为1的:
viewPager.setPageTransformer(true, new ZoomOutPageTransformer());这个setpageTransformer多用于设置viewpage的滑动效果。
其中item布局是用的一个卡片布局方式:
<android.support.v7.widget.CardView android:id="@+id/cv_card" android:layout_width="250dp" android:layout_height="match_parent" android:layout_margin="80dp" app:cardCornerRadius="3dp" app:cardElevation="2dp" app:cardPreventCornerOverlap="true" app:cardUseCompatPadding="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/iv_movie" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:scaleType="fitXY" android:src="@mipmap/ic_loading" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="#696969" /> <TextView android:id="@+id/tv_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="15dp" android:text="标题" android:textSize="18sp" /> </LinearLayout> </android.support.v7.widget.CardView>
总共依赖了:
compile 'com.wang.avi:library:1.0.5' compile 'com.android.support:appcompat-v7:22.2.0' compile 'com.android.support:cardview-v7:22.2.0' compile 'com.android.support:recyclerview-v7:23.1.0'
其中:
compile 'com.wang.avi:library:1.0.5'这个是网上的一个开源loadding动画库。大家有兴趣可以去github搜索一下。此博文可以忽视掉。
viewpage的适配器这里就不贴出来了。很简单。
最后给出源码:http://download.csdn.net/detail/qq_17387361/9690575
相关文章推荐
- 使用jbox2d物理引擎打造摩拜单车贴纸动画效果
- Android使用SVG矢量图打造酷炫动画效果
- 如何使用js实现电影海报画廊特效?
- android使用ViewPage实现Grally画廊的卡片式效果
- 使用C#实现WinForm窗体的动画效果
- 使用jQuery制作滑动动画效果的层
- 使用Silverlight实现 FLASH的动画效果
- js模拟动画之 商品展示效果
- 使用silverlight中的Storyboard实现动画效果
- mootools图片动画展示效果,图片导航
- jquery animate 动画效果使用说明
- 使用C#实现WinForm窗体的动画效果
- 使用Layer类和Sprite类实现手机游戏的动画效果
- AR 应用中使用 iPhone 4陀螺仪的效果展示
- 使用Geoserver和Google Earth打造三维GIS展示系统
- 【转载】详尽的视频格式效果对比(高、低码率;动画、电影)
- Core Animation教学:使用Transitions制作带动画效果的向导对话框
- 使用C#实现WinForm窗体的动画效果
- Photoshop 打造超酷的抽象风格光影海报效果