Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Android - Bitmapは怖くない

Android - Bitmapは怖くない

Bitmapってどういうことが出来るか
・Picasso, GlideでのTransformationについて
・Frescoとは?
・GPUImage for Android

Daichi Furiya (Wasabeef)

April 25, 2015
Tweet

More Decks by Daichi Furiya (Wasabeef)

Other Decks in Programming

Transcript

  1. Bitmap͸ා͘ͳ͍
    Wasabeef

    View Slide

  2. About Me
    wasabeef
    CyberAgent, Inc.

    View Slide

  3. Ͳ͏ߟ͑ͯ΋Bitmap͸ා͍Ͱ͢

    View Slide

  4. OutOfMemoryError…

    View Slide

  5. About Bitmap

    View Slide

  6. Bitmap
    • ը૾Λѻ͏جຊతͳAPI
    • BitmapFactoryͰΦϒδΣΫτੜ੒͢Δ
    • OutOfMemoryΛى͜͢ݪҼʹͳΓ΍͍͢

    View Slide

  7. Supported Image Formats
    Format Encoder Decoder Details File Type
    JPEG ! ! Base+Progressive .jpg
    GIF ! .gif
    PNG ! ! .png
    BMP ! .bmp
    WebP
    !#
    4.0+
    !#
    4.0+
    .webp

    View Slide

  8. About BitmapFactory.Options

    View Slide

  9. inJustDecodeBounds
    • Bitmapͷϝλ৘ใ͚ͩऔಘ
    • ͋Β͔͡Ίը૾αΠζ͚ͩऔಘ͢Δ৔߹ͳͲ

    View Slide

  10. inSampleSize
    • σϑΥϧτ͸1
    • 2ʹઃఆ͢Δͱ1/2αΠζ
    • 4ʹઃఆ͢Δͱ1/4αΠζ
    • BitmapʹFilter͔͚Δ࣌ʹͱͯ΋༗ޮ

    View Slide

  11. inPreferredConfig
    • BitmapΛಡΈࠐΉFormatΛࢦఆ͢Δ
    • σϑΥϧτ͸ Bitmap.Config.ARGB_8888

    View Slide

  12. About Bitmap.Config

    View Slide

  13. ARGB_8888
    • 32bit
    • Alpha, Red, Green, Blue ֤8bit
    • Default

    View Slide

  14. ARGB_4444
    • 16bit
    • Alpha, Red, Green, Blue ֤4bit
    • Deprecated in API 13

    View Slide

  15. RGB_565
    • 16bit
    • Alpha஋͕ͳ͍ը૾ʹ͸༗ޮ
    • ৔߹ʹΑͬͯ͸ARGB_8888ͷ൒෼ۙ͘

    View Slide

  16. ALPHA_8
    • 8bit
    • Alpha஋ͷΈͷ৔߹ʹ༗ޮ

    View Slide

  17. Open Source

    View Slide

  18. Open Source
    • Universal Image Loader
    • Picasso
    • Glide
    • Fresco
    • Volley

    View Slide

  19. Picasso by Square

    View Slide

  20. Picasso
    • Image Library
    • Transformation
    • Cache
    • Save the world

    View Slide

  21. Picasso
    Picasso.with(this)
    .load(“http://i.imgur.com/4rBHm4Q.jpg”)
    .transform(new CircleTransform())
    .into(imageView);

    View Slide

  22. Picasso
    .fit()

    View Slide

  23. Picasso
    .centerCrop()

    View Slide

  24. Picasso
    .resize(800,800).centerInside()

    View Slide

  25. Glide by
    Bump (sjudd)

    View Slide

  26. Glide
    • Picasso like
    • Video, Gif support
    • Sampling support
    • BitmapPool
    • Thumbnail change the world

    View Slide

  27. Glide
    Glide.with(this)
    .load(“http://i.imgur.com/4rBHm4Q.jpg”)
    .transform(new CircleTransform())
    .into(imageView);
    #

    View Slide

  28. .fitCenter()
    Glide

    View Slide

  29. .centerCrop()
    Glide

    View Slide

  30. .override(800, 800)
    Glide

    View Slide

  31. Picasso and Glide
    Transform

    View Slide

  32. Transform
    ը૾ΛಡΈࠐΜͰImageViewʹ
    දࣔ͢Δલʹը૾Λมܗͤ͞Δ

    View Slide

  33. RoundedCorners

    View Slide

  34. CropCircle

    View Slide

  35. BitmapShader

    View Slide

  36. BitmapShader
    public static Bitmap shader(Bitmap src) {
    int width = src.getWidth();
    int height = src.getHeight();
    #
    bitmap = Bitmap.createBitmap(width, height, config);
    #
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    BitmapShader shader = new BitmapShader(
    src, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
    #
    paint.setShader(shader);
    RectF rectF =
    new RectF(margin, margin, width - margin, height - margin);
    canvas.drawRoundRect(recfF, radius, radius, paint);
    #
    return bitmap;
    }

    View Slide

  37. Blur

    View Slide

  38. RenderScript

    View Slide

  39. RenderScript
    ScriptIntrinsicBlur
    public static Bitmap blur(Bitmap src) {
    int width = src.getWidth();
    int height = src.getHeight();
    #
    bitmap = Bitmap.createBitmap(width, height, config);
    RenderScript rs = RenderScript.create(mContext);
    Allocation alloc = Allocation.createFromBitmap(rs, src);
    ScriptIntrinsicBlur blur =
    ScriptIntrinsicBlur.create(rs, alloc.getElement());
    blur.setInput(alloc);
    blur.setRadius(mRadius);
    blur.forEach(alloc);
    alloc.copyTo(bitmap);
    source.recycle();
    #
    return bitmap;
    }

    View Slide

  40. ColorFilter

    View Slide

  41. ColorFilter

    View Slide

  42. ColorFilter
    public static Bitmap color(Bitmap src, int color) {
    int width = src.getWidth();
    int height = src.getHeight();
    #
    bitmap = Bitmap.createBitmap(width, height, config);
    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    PorterDuffColorFilter filter =
    new PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP);
    paint.setColorFilter(filter);
    canvas.drawBitmap(src, 0, 0, paint);
    #
    return bitmap;
    }

    View Slide

  43. Open Source

    View Slide

  44. Transform
    • picasso-transformations
    • glide-transformations
    wasabeef

    View Slide

  45. GPUImage for Android
    CyberAgent, Inc.

    View Slide

  46. GPUImage for Android
    • iOSͷGPUImageΛݩʹAndroidʹҠ২
    • ImageViewʹରͯ͠FilterΛ͔͚ΕΔ
    • Filterͷछྨ͸໿70ݸ
    • PhotoshopͷACVʹରԠ
    • API 8 (2.2+)

    View Slide

  47. GPUImage for Android
    @Override
    public void onCreate(final Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity);
    #
    Uri imageUri = Uri.parse(“http://i.imgur.com/4rBHm4Q.jpg”);
    mGPUImage = new GPUImage(this);
    mGPUImage.setImage(imageUri);
    mGPUImage.setFilter(new GPUImageToonFilter());
    #
    mGPUImage.saveToPictures(mGPUImage, “sample.jpg”, null);
    }

    View Slide

  48. Fresco by Facebook

    View Slide

  49. Fresco
    • streaming of progressive JPEGs
    • Gif, WebP support
    • Loading customization

    View Slide

  50. Fresco
    android:id="@+id/my_image_view"
    android:layout_width="200dp"
    android:layout_height="200dp"
    fresco:fadeDuration="300"
    fresco:actualImageScaleType="focusCrop"
    fresco:placeholderImage="@color/wait_color"
    fresco:placeholderImageScaleType="fitCenter"
    fresco:failureImage="@drawable/error"
    fresco:failureImageScaleType="centerInside"
    fresco:retryImage="@drawable/retrying"
    fresco:retryImageScaleType="centerCrop"
    fresco:progressBarImage="@drawable/progress_bar"
    fresco:progressBarImageScaleType="centerInside"
    fresco:progressBarAutoRotateInterval="1000"
    fresco:backgroundImage="@color/blue"
    fresco:overlayImage="@drawable/watermark"
    fresco:pressedStateOverlayImage="@color/red"
    fresco:roundAsCircle="false"
    fresco:roundedCornerRadius="1dp"
    fresco:roundTopLeft="true"
    fresco:roundTopRight="false"
    fresco:roundBottomLeft="false"
    fresco:roundBottomRight="true"
    fresco:roundWithOverlayColor="@color/corner_color"
    fresco:roundingBorderWidth="2dp"
    fresco:roundingBorderColor=“@color/border_color"/>

    View Slide

  51. OutOfMemoryError

    View Slide

  52. ࠷ޙͷखஈ

    View Slide

  53. android:largeHeap=“true"

    View Slide

  54. largeHeap == true?
    • Google+
    • Amazon Kindle
    • Facebook
    • Hulu
    • Tumblr
    • Youtube
    • Ameba Ownd

    View Slide

  55. Wasabeef

    View Slide

  56. Thanks.

    View Slide