Adaptive Design

Android
- Shadow
- Path Tracing
- Palette

Transcript

1. Adaptive Design #3 CyberAgent, Inc. ߱໼ େ஍
2. About Me Daichi Furiya @wasabeef_jp wasabeef http://wasabeef.jp
3. Shadows
4. • Viewͷܗʹ߹͏Α͏ʹShadowΛഎܠʹམͱ͢! In the shape of its outline! ! • ਖ਼౤Ө! Use scaleX/scaleY when perspective scaling desired! ! • translationX,Yͱಉ༷ʹ؆୯ͳΞχϝʔγϣϯ! view.animate().translationZ(value) Shadows!
5. public boolean onTouchEvent(MotionEvent event) { ! switch (event.getAction()) { case MotionEvent.ACTION_DOWN: animate().setDuration(100).scaleX(1.2f).scaleY(1.2f).translationZ(20); return true; ! case MotionEvent.ACTION_CANCEL: case MotionEvent.ACTION_UP: animate().setDuration(100).scaleX(1).scaleY(1).translationZ(0); return true; } } Shadows! How to use them
6. Umbra Penumbra
7. Shadows! Tip • 3Dճస࣌ͷShadow͸೉͍͠! rotateX, rotateY! ! • ଞViewͱͷ઀৮࣌ͷShadowҙࣝ͢Δ! ! • ElevationΛద੾ͳߴ͞ʹઃఆ͞Ε͍ͯΔ͜ͱ
8. • define animations between view states! ! • Raise pressed items! ! • State list animators! ! • Simply animate the elevation Animation Shadows
9. <ImageButton! android:layout_width=“40dp”! android:layout_height=“40dp“! android:background="@drawable/info_background"! android:src="@drawable/ic_star"! android:elevation="4dp"! android:stateListAnimator="@anim/button_raise" /> Animation Shadows
10. <selector>! <item! android:state_enabled="true"! android:state_pressed="true">! <objectAnimator! android:duration="@android:integer/config_shortAnimTime"! android:propertyName="translationZ"! android:valueTo="@dimen/button_press_elevation"! android:valueType="floatType" />! </item>! <item>! <objectAnimator! android:duration="@android:integer/config_shortAnimTime"! android:propertyName="translationZ"! android:valueTo="@dimen/button_elevation"! android:valueType="floatType" />! </item>! </selector> Animation Shadows
11. StateListAnimator anim = ! AnimatorInflater.loadStateListAnimator(! context, R.anim.button_raise);! ! v.setStateListAnimator(anim); Animation Shadows
12. Path Tracing
13. Path Tracing • Works from ! API level 1 to API level 21! PathMeasure.getSegment(…)! ! • Easier with property animations
14. Path path = makePath();! Path renderPath = new Path();! ! // Measure the path! PathMeasure measure = new PathMeasure(path, false);! float length = measure.getLength();! ! // Get a path segment! measure.getSegment(! 0.0f, fraction * length, renderPath, true);! ! // For Android <= 4.4! renderPath.rLineTo(0.0f, 0.0f);! canvas.drawPath(renderPath, paint); Path Tracing
15. public void tracePath() {! ! ValueAnimator animator = ValueAnimator.ofFloat(1.0f, 0.0f);! ! animator.addUpdateListener(new AnimatorUpdateListener() {! @Override! public void onAnimationUpdate(ValueAnimator valueAnimator) {! ! measure.getSegment(0.0f, mPathLength *! (Float) valueAnimator.getAnimatedValue(), renderPath, true);! ! invalidate();! ! }! });! animator.start();! } Path Tracing
16. Colors
18. Palette! • android-support-v7-palette! ! ! • Bitmap͔ΒPaletteΛGenerate͢Δ! 6 named colors
19. private void colorize(Bitmap photo) {! // You can also use async versions! Palette p = Palette.generate(photo);! ! TextView titleView = ! (TextView) findViewById(R.id.title);! titleView.setTextColor(p.getVibrantColor().getRgb());! } Dynamic Palette! android.support.v7.graphics.Palette
20. Material Design ≒ Adaptive Design
21. Thanks.