Monday, 22 June 2015

Define and render UI specs on top of your Android UI


A simple way to define and render UI specs on top of your Android UI.


Enclose the target UI with a DesignSpecFrameLayout, usually the root of your view hierarchy. Get the associated DesignSpec instance with getDesignSpec and then you can:
  • Toggle baseline grid visibility with setBaselineGridVisible(boolean).
  • Change baseline grid cell width with setBaselineGridCellSize(int).
  • Change baseline grid color with setBaselineGridColor(int).
  • Toggle keylines visibility with setKeylinesVisible(boolean).
  • Change keylines color with setKeylinesColor(int).
  • Add keylines with addKeyline(int, From).
  • Toggle spacing markers visibility with setSpacingsVisible(boolean).
  • Change spacing markers color with setSpacingsColor(int).
  • Add spacing marker with addSpacing(int, int, From).
You can also specify the design spec in a raw JSON resource like:
    "baselineGridVisible": true,
    "baselineGridCellSize": 8,
    "keylines": [
        { "offset": 16,
          "from": "LEFT" },
        { "offset": 72,
          "from": "LEFT" },
        { "offset": 16,
          "from": "RIGHT" }
    "spacings": [
        { "offset": 0,
          "size": 16,
          "from": "LEFT" },
        { "offset": 56,
          "size": 16,
          "from": "LEFT" },
        { "offset": 0,
          "size": 16,
          "from": "RIGHT" }
Because DesignSpec is a Drawable, you can simply add it to a ViewOverlay if you're running your app on API level >= 18:
DesignSpec designSpec = DesignSpec.fromResource(someView, R.raw.some_spec);

No comments:

Post a Comment