In developmentDrawable xmlFile bloat problem

During development, it is often necessary to write a lot of Drawable XML files in order to achieve good UX design. For example: rounded Shape, gradient, Selector, etc. Due to the complexity of UX effects, the size and shape of UI elements are bound to vary greatly, so many Drawable XML files have to be written to implement the effects. In addition, when multiple developers are developing in parallel, other people will add the same Drawable XML file if there are no strong file naming rules. As a result, more and more XML files are added to the project, which not only increases the application package volume, but also is not conducive to subsequent reuse.

Common solution

1. The usual solution is to customize the View instead, with code to draw the corresponding effect. But can not guarantee the efficiency of the code implementation, and more commonly used View, one by one to achieve a larger custom View. 2. Agree on file naming to ensure that only one copy of the same Drawable XML exists, which can only avoid redundant Drawable XML and can not reduce the generation of necessary Drawable files. Moreover, it is not reliable to rely on people to follow the agreement without procedures to constrain it.

XWidgetThe solution

XWidget provides a rich “custom View” and basically includes the commonly used Drawable attribute. XWidget is also a custom View, but it serves only as a vector. The real drawing is the same as the Drawable XML we wrote, using custom properties to construct the corresponding GradientDrawable or StateListDrawable object and set it into the View. This implementation scheme not only ensures the performance of drawing, but also can be highly customized in the layout to achieve complex UI effects.

Supported controls

XButton, XConstraintLayout, XEditText, XFrameLayout, XImageView, XLinearLayout, XRelativeLayout, XTextView, XCheckBox, XView, XRadioButton …

All of the controls above support properties in the table below, which uses only XButtonCustom as an example.

Supported attribute names

The attribute name The sample
XButtonCustom_corner The rounded degree
XButtonCustom_corner_type Rounded corner type. Default is all. left_top,left_bottom,right_top,right_bottom
XButtonCustom_solid_color Background fill color, effective when gradient fill is not set
XButtonCustom_shadow_color Outer shadow color value
XButtonCustom_shadow_radius Outer shadow radius
XButtonCustom_shadow_dx The outer shadow is offset in the X direction
XButtonCustom_shadow_dy The outer shadow is offset in the y direction
XButtonCustom_solid_gradient Radial type, Linear, radial, sweep
XButtonCustom_gradient_start_color Gradient start color
XButtonCustom_gradient_center_color Gradient middle color
XButtonCustom_gradient_end_color Gradient end color
XButtonCustom_gradient_orientation Direction of gradient
XButtonCustom_gradient_radius The gradient Angle
XButtonCustom_stroke_color Stroke color
XButtonCustom_stroke_border Stroke width
XButtonCustom_blur_type The default value is Normal. outer,solid,inner
XButtonCustom_blur_radius Fuzzy radius
XButtonCustom_blur_color Fuzzy color
XButtonCustom_state Selector type, default none. Pressed, selected and checked. When the above state is selected, the properties of the state prefix fire
XButtonCustom_stated_corner State triggers rounded corners
XButtonCustom_corner_type State Specifies the type of rounded corners when triggered. The default is all. left_top,left_bottom,right_top,right_bottom
XButtonCustom_stated_solid_color State specifies the background fill color, effective when gradient fill is not set
XButtonCustom_stated_shadow_color Outer shadow color value
XButtonCustom_stated_shadow_radius Outer shadow radius
XButtonCustom_stated_shadow_dx The outer shadow is offset in the X direction
XButtonCustom_stated_shadow_dy The outer shadow is offset in the y direction
XButtonCustom_stated_blur_type The default value is Normal. outer,solid,inner
XButtonCustom_stated_blur_radius Fuzzy radius
XButtonCustom_stated_blur_color Fuzzy color
XButtonCustom_stated_solid_gradient Radial type, Linear, radial, sweep
XButtonCustom_stated_gradient_start_color Gradient start color
XButtonCustom_stated_gradient_center_color Gradient middle color
XButtonCustom_stated_gradient_end_color Gradient end color
XButtonCustom_stated_gradient_orientation Direction of gradient
XButtonCustom_stated_gradient_radius The gradient Angle
XButtonCustom_stated_stroke_color Stroke color
XButtonCustom_stated_stroke_border Stroke width
XButtonCustom_drawable Drawable that is normally displayed
XButtonCustom_stated_drawable A drawable displayed in a specific state, such as selector

The way the above fields are modified in the code, the supported modified fields are defined in the IDrawableEditTransition interface

/ / get IDrawableEditTransition XWidgetParser. GetDrawableEditTransition (v)? .beginNormalTransition ? .setCorner(10) ? .commit()Copy the code

The sample

integration

  1. Add it in project build.gradle

     allprojects {
     repositories {
         maven { url 'https://jitpack.io' }
     }
 }
Copy the code

  2. Add it to build.gradle of the module you want to use

    Implementation 'com. Making. Shilec: XWidget: 1.2.2'Copy the code

  3. Add confusion

    -keep public class com.scott.xwidget.parser.**{*; }Copy the code

extension

  1. Custom parsers

     XWidgetParser.addParser(XButton::class.java, XButtonParser2())
Copy the code

Introduction to plug-ins and annotation parsers

  1. useKapt 'com. Making. Shilec: XWidget: 1.2.2', can beXWidgetThe annotated View generates the Drawable parser, which is used to generate template code and can be extended by inheriting from template code.
  2. useapply plugin: "com.scott.xwidget-gradle-plugin", can be automatically generatedXWidgetThe attr property of the annotated View is defined in the generated file asres/values/xwidget_attrs.xml. To use a plugin, you need to configure the plugin’s build.gradle file in the root directoryThe classpath: 'com. Making. Shilec: XWidget: 1.2.2')