Scaling UI

Transcript

1. Scaling UI James Barr Uber
2. Platform UI
3. UI Issues & Considerations
4. Design System
5. Before & After <color name="ub__black">#000000</color> <color name="ub__uber_black_100">#09091A</color> <color name="ub__uber_black_95">#151525</color> <color name="ub__uber_black_90">#222231</color> <color name="ub__uber_black_80">#3A3A48</color> <color name="ub__uber_black_60">#6B6B76</color> <color name="ub__uber_black_40">#9D9DA3</color> <color name="ub__white">#FFFFFF</color> <color name="ub__uber_white_120">#B2B2BA</color> <color name="ub__uber_white_100">#C0C0C8</color> <color name="ub__uber_white_80">#CDCDD3</color> <color name="ub__uber_white_60">#D9D9DE</color> <color name="ub__uber_white_40">#E6E6E9</color> <color name="ub__uber_white_20">#F2F2F4</color> <color name="ub__uber_white_10">#F9F9F9</color> <color name="ub__uber_blue_120">#1EACC7</color> <color name="ub__uber_blue_100">#1FBAD6</color> <color name="ub__uber_blue_100_semi_transparent">#661FBAD6</color> <color name="ub__uber_blue_80">#4CC8DE</color> <color name="ub__uber_blue_60">#79D6E6</color> <color name="ub__uber_blue_40">#A5E3EF</color> <color name="ub__uber_blue_20">#D2F1F7</color> ...
7. Design System Guardrails
8. Lint
9. Lint class ColorResourceUsageDetector : ResourceXmlDetector() { override fun visitAttribute(context: XmlContext, attr: Attr) { if (attr.name in COLOR_ATTRIBUTES { if (attr.value.startsWith(PREFIX_COLOR_RES) && attr.value !in WHITELISTED_COLORS) { when { isInResFolder(LAYOUT) && !isColorSelector(attr.value) -> reportError() isInVectorDrawable(attribute) -> reportError() isInResFolder(context, DRAWABLE) && !hasQualifiedVersion(QUALIFIER_V21) && !isColorSelector(context, attributeVal) -> reportError() } } else if (attr.value.startsWith(PREFIX_THEME_ATTR) && isInResFolder(DRAWABLE) && !isInVectorDrawable(attribute) && !isQualifiedVersion(context)) { reportError() } } } }
10. Custom Fonts
11. Font Updates 1. Add new font asset 2. Update font name -- <string name="font_path">fonts/Roboto.ttf</string> ++ <string name="font_path">fonts/GoogleSans.ttf</string> 3. ✅ ? src/main/res/value/strings-fonts.xml
12. Calligraphy
13. Calligraphy Wrapped
14. ViewPump View inflation with a pre/post- processing API github.com/InflationX/ViewPump
15. ViewPump override fun onCreateView( name: String, context: Context, attrs: AttributeSet): View { return ViewPump.get().inflate(InflateRequest.builder() .name(name) .context(context) .attrs(attrs) .fallbackViewCreator(mViewCreator) .build()).view() } ViewPumpLayoutInflater.java
16. ViewPump override fun onCreateView( name: String, context: Context, attrs: AttributeSet): View { return ViewPump.get().inflate(InflateRequest.builder() .name(name) .context(context) .attrs(attrs) .fallbackViewCreator(mViewCreator) .build()).view() } ViewPumpLayoutInflater.java
17. ViewPump Interceptors class TextUpdatingInterceptor() : Interceptor { override fun intercept(chain: Chain): InflateResult { val result: InflateResult = chain.proceed(chain.request()) val view: View = result.view() if (view is TextView) { // You also have access to result.context and result.attrs view.text = "[Prefix] ${view.text}" } return result } }
18. Calligraphy class CalligraphyInterceptor( val calligraphy: Calligraphy) : Interceptor { override fun intercept(chain: Chain): InflateResult { val result: InflateResult = chain.proceed(chain.request()) return result.toBuilder() .view( calligraphy.onViewCreated( result.view(), result.context(), result.attrs())) .build() } }
19. Configuring ViewPump ViewPump.init(ViewPump.builder() .addInterceptor(CalligraphyInterceptor(CalligraphyConfig.Builder().build())) .addInterceptor(AccessibilityEncouragingInterceptor()) .addInterceptor(TextUpdatingInterceptor()) .addInterceptor(AppCompatInterceptor()) .build())
20. Reimplement AppCompat class AppCompatInterceptor : Interceptor { override fun intercept(chain: Interceptor.Chain): InflateResult { val request = chain.request() val viewNameToInflate = viewNameToInflate(request.name()) return chain.proceed(request.toBuilder().name(viewNameToInflate).build()) } fun viewNameToInflate(requestedViewName: String) = when (requestedViewName) { "Button" -> AppCompatButton::class.java.name "EditText" -> AppCompatEditText::class.java.name "ImageView" -> AppCompatImageView::class.java.name "TextView" -> AppCompatTextView::class.java.name else -> requestedViewName } }
21. Reimplement AppCompat class AppCompatInterceptor : Interceptor { override fun intercept(chain: Interceptor.Chain): InflateResult { val request = chain.request() val viewNameToInflate = viewNameToInflate(request.name()) return chain.proceed(request.toBuilder().name(viewNameToInflate).build()) } fun viewNameToInflate(requestedViewName: String) = when (requestedViewName) { "Button" -> AppCompatButton::class.java.name "EditText" -> AppCompatEditText::class.java.name "ImageView" -> AppCompatImageView::class.java.name "TextView" -> AppCompatTextView::class.java.name else -> requestedViewName } }
22. Hide Unaccessible Views class AccessibilityEncouragingInterceptor : Interceptor { override fun intercept(chain: Interceptor.Chain): InflateResult { val result = chain.proceed(chain.request()) result.view()?.let { if (it.isClickable && it.contentDescription.isNullOrEmpty()) { it.visibility = View.INVISIBLE } } return result } }
23. Other Example Usages • Geocities-ify an app • Draw over views under some conditions • Backport functionality for new attrs • Dynamic string reloading • Track recently inflated views & add data to crash reports
24. Platform UI Widgets
25. Artist A build tool that codegens a base set of Android Views github.com/uber/artist
26. Artist Traits (functionality) + Stencils (definitions) ↓ Views
27. Artist Trait @AutoService(Trait::class) class VisibilityTrait : Trait { override fun generateFor( type: TypeSpec.Builder, initMethod: MethodSpec.Builder, rClass: ClassName, baseType: String) { arrayOf("visible", "invisible", "gone").forEach { type.addMethod(createVisibilityConvenienceMethod(it)) } } ... }
28. Artist Trait @AutoService(Trait::class) class VisibilityTrait : Trait { ... fun createVisibilityConvenienceMethod(type: String): MethodSpec { return MethodSpec.methodBuilder("is${type.capitalize()}") .addModifiers(Modifier.PUBLIC) .returns(TypeName.BOOLEAN) .addStatement( "return getVisibility() == \$T.${type.toUpperCase()}", TypeNames.Android.View) .build() } }
29. Artist Stencil class TextViewStencil : ViewStencil( extendedType = "android.support.v7.widget.AppCompatTextView", constructorCount = 3, defaultAttrRes = "textViewStyle", addedTraits = VisibilityTrait::class.java )
30. Artist Generated View public class MyTextView extends AppCompatTextView { public MyTextView(Context context) { this(context, null); } public MyTextView(Context context, AttributeSet attrs) { this(context, attrs, R.attr.textViewStyle); } public MyTextView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context, attrs, defStyleAttr, 0); } // protected init method - provided in every stencil public boolean isVisible() { return getVisibility() == View.VISIBLE; } public boolean isGone() { return getVisibility() == View.GONE; } public boolean isInvisible() { return getVisibility() == View.INVISIBLE; } }
31. @AutoService(ViewStencilProvider.class) class SampleViewStencilProvider : ViewStencilProvider { override fun stencils() = setOf( ViewStencil("android.support.v7.widget.AppCompatButton", 3, "buttonStyle"), ViewStencil("android.support.v7.widget.AppCompatEditText", 3, "android.R.attr.editTextStyle", TextInputTrait.class), ViewStencil("android.widget.LinearLayout", 3), ViewStencil("android.support.v7.widget.AppCompatImageView", 3), ViewStencil("android.support.v4.widget.NestedScrollView", 3, ScrollableTrait.class), ViewStencil("android.support.v7.widget.AppCompatTextView", 3, "android.R.attr.textViewStyle") ) override fun globalTraits() = setOf( VisibilityTrait.class::java, ForegroundTrait.class::java, ViewTrait.class::java ) }
32. Artist Use Cases • Make Rx APIs 1st class citizens: myView.clicks() • Add built-in analytics to taps and impressions • Make a bugfix to MyTextView and all other usages will receive it • Easily change all of your parent classes from AppCompatWidget to MaterialWidget
33. Wrapping Up • Collaborate with Design to create a system that works • Use semantic names for colors & styles flexibility across apps • Enforce your design system with Lint & ErrorProne • Use ViewPump to post-process inflated views • Use Artist to easily maintain your base set of views
34. Scaling UI James Barr • uber.github.io • We're Hiring @jbarr21