使用viewpage和动画来打造类是电影海报画廊展示效果
来源:互联网 发布:fastjson解析json数组 编辑:程序博客网 时间:2024/06/09 22:22
首先给大家看张效果图:
有点类是淘宝美团等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
0 0
- 使用viewpage和动画来打造类是电影海报画廊展示效果
- 如何使用js实现电影海报画廊特效?
- android使用ViewPage实现Grally画廊的卡片式效果
- Android 用Gallery和ImageSwicher实现画廊效果,展示图片+完整源代码
- viewpager 实现画廊效果,带动画!
- Qt动画效果展示
- Qt动画效果展示
- Qt动画效果展示
- Qt动画效果展示
- Qt动画效果展示
- ViewPage引导页面,添加动画效果
- 让viewpage切换无动画效果
- 使用动画效果来替代ProgressDialog
- Android使用SVG矢量图打造酷炫动画效果
- Hack5-用TextSwitcher和ImageSwitcher打造漂亮的动画效果
- 使用Geoserver和Google Earth打造三维GIS展示系统
- 使用Geoserver和Google Earth打造三维GIS展示系统
- android使用ViewPager实现画廊效果
- 66. Plus One
- get请求与post请求
- wordpress
- 常用排序方法介绍
- Servlet的中文问题
- 使用viewpage和动画来打造类是电影海报画廊展示效果
- scrapy 高级
- 重定向
- 补间动画的XML设置使用
- Servlet请求资源路径
- 图像特征提取与匹配之SIFT算法
- servlet的生命周期
- Servlet转发
- 转发与重定向的区别