图片怎么展示比较好看

简介: 昨晚看了一下ViewPager的切换动画,简单地做了一个Paste_Image.png大多数人写的,在缓慢拖动的时候,左右两边的视图会突然消失,我觉得不好,自己写了一个比较细腻的动画001.

昨晚看了一下ViewPager的切换动画,简单地做了一个

Paste_Image.png

大多数人写的,在缓慢拖动的时候,左右两边的视图会突然消失,我觉得不好,自己写了一个比较细腻的动画

001.gif

ZoomOutPageTransformer

<pre>
package org.alex.view.pagetransformer;

import android.support.v4.view.ViewPager;
import android.view.View;

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.85f;
private static final float MIN_ALPHA = 0.5f;

/\*\*
 \* 我们假设手机屏幕分三个区域,
 \* 当前展示的, position = 0;
 \* 左边的,position = -1;左边左边 position < -1
 \* 右边的,position = 1;右边的右边 position > 1
 \* 每次滑动,ViewPager 所有的子视图  都会回调 transformPage 方法
 \* 假设三个子视图 是 left   center   right
 \*/
@Override
public void transformPage(View view, float position) {
    int viewWidth = view.getWidth();
    int viewHeight = view.getHeight();

    if (position < -2F) {
        /\*left 的左边看不到的,所有的视图\*/
        view.setAlpha(0);
    } else if ((position >= -2F) && (position <= 2F)) {

        /\*三个需要操作的子视图\*/
        float positionAbs = Math.abs(position);
        float scaleFactor = Math.max(MIN_SCALE, 1 - positionAbs);
        float marginVertical = viewHeight \* (1 - scaleFactor) / 2;
        float marginHorizontal = viewWidth \* (1 - scaleFactor) / 2;
        if (position < 0) {
            view.setTranslationX(marginHorizontal - marginVertical / 2 + viewWidth \* 0.125F \* positionAbs);
        } else {
            view.setTranslationX(-marginHorizontal + marginVertical / 2 - viewWidth \* 0.125F \* positionAbs);
        }
        view.setScaleX(scaleFactor - 0.125F);
        view.setScaleY(scaleFactor - 0.125F);

        view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) \* (1 - MIN_ALPHA));
    } else {
        /\*right 的右边看不到的,所有的视图\*/
        view.setAlpha(0);
    }
}

}
</pre>

app中展示图片,是很正常的需求了,经常遇到讨厌的问题,无论怎么展示,都感觉不是那么的完美。
参考资料
http://www.cnblogs.com/itchq/p/3938506.html
https://github.com/sanchi3/CircularCoverView
http://www.cnblogs.com/mysearchblog/p/5926288.html

Paste_Image.png
Paste_Image.png

例如这两张图,然而安卓的分辨率是众多的,那么问题来了,怎么去适配,能让每个手机都能看到全图,就比较好了。第一层是高宽比的相对布局,第二层是一个高宽比的image控件,第三层是一个镂空的圆角遮罩。

GIF.gif

总结成一句话,保持宽度固定,高度 = scaleY * 宽度,然后将图片平铺在ImageView上,
源码在这里 RoundMaskView

目录
相关文章
|
8月前
|
前端开发 JavaScript
无缝滚动图片——源码
无缝滚动图片——源码
Echarts实战案例代码(23):富文本实现坐标轴文字和图片排版的解决方案
Echarts实战案例代码(23):富文本实现坐标轴文字和图片排版的解决方案
226 0
|
移动开发 小程序
(简单详细)uniapp实现自定义海报内容并生成海报二维码图片(可拖拽,可调节大小)
(简单详细)uniapp实现自定义海报内容并生成海报二维码图片(可拖拽,可调节大小)
1126 0
(简单详细)uniapp实现自定义海报内容并生成海报二维码图片(可拖拽,可调节大小)
爬取图片,以及对图片筛选,以及切换系统背景图片
爬取图片,以及对图片筛选,以及切换系统背景图片
|
6月前
仿照微信朋友圈中点击图片出现大图浏览效果
仿照微信朋友圈中点击图片出现大图浏览效果
78 0
|
8月前
好看的网站自适应图片文字广告位代码
上边是图片广告位,下边是文字广告位,都是自适应的。 图片觉得不直观的可以去网站看看 代码从网上扒的,自己也修改了一下,更美观、也更适应网站。 一个好的广告位不仅不会拉低网站的颜值,还会增加广告主选择你的机会
183 2
好看的网站自适应图片文字广告位代码
|
8月前
|
PHP
网站三合一缩略图片介绍展示源码
网站三合一缩略图片介绍展示源码
147 3
网站三合一缩略图片介绍展示源码
|
8月前
|
JavaScript 容器
富文本的图片添加点击放大功能
思路:富文本加载后,dom出全部img元素,然后各自单独添加点击事件
286 3
|
8月前
|
前端开发
蓝色时间轴个人博客网页模板代码
这是一个有关看雪时间轴的css3+html5 网站静态的个人博客网页模板
49 0