MAML Tutorial (MIUI Theme)

7/25/2019 MAML Tutorial (MIUI Theme)

1/27

MAML Tutorials

From MIUI Theme Wiki

Table of Contents

1 MORE & MAML Overview2 MAML Variety lock screen application in the3 MAML applications dynamically changeable wallpaper and icons4 wallpaper element5 variables6 variable array7 global variables8 expression9 text

10hours11Date12Photos13digital pictures14picture mask15elements in animation16Group17Slider18buttons19Music Player20volume control21Content Provider22Trigger & Command23Dynamic Frame Rate24sensor call

MORE & MAML Overview

MAML engine scripting language

MIUI Application Markup Language for MORE (MIUI MORE engine application markuplanguage)

MORE rendering engine

Markup Oriented Rendering Engine (the rendering engine based markup language)


2/27

Outline

Initially Variety lock screen for use with a specific syntax description xml lockscreen. Later continuous enhancements, and gradually evolved into a near universalinterface description language and graphics rendering engine, at a certain demand fordeveloping user interface styles. Can be easily changed by replacing the skin

interface style, animation or interactive mode.

MAML Android interface description language and similar xml. The difference is thatAndroid is a static interface description, changes to the interface elements dependjava code. MAML describe static interface + dynamic attributes, UI timeline constantlrefreshed by a certain frame rate, UI updated in real time based on the calculationresults show variable expression of element attributes. MAML language and runtimeengines have been independent from the lock screen as MIUI built into a commonframework, in addition to displaying the date and time, but also supports the querycriteria Content Provider to obtain a variety of information such as weather. Display

pictures of various elements such as text, a variety of animations, slide interactiveinterface controls such as clicking, suitable for implementing the present informationor simple interaction interface. Such as clocks, weather widget, alarm clock ringinginterface.

Framework supports dynamic frame rate, according to a fixed frame rate does not haveto stop rendering, animation and updated without stopping at the right time renderingonly this time with minimal resources, for slowly changing animation rendering using low frame rate, high dynamic animation begins Immediately after the adjustment torender high frame rate at full speed. The basic frame rate at full speed in fullscreen rendering can reach 60. Rational use can both cool and not much power.

What types of interface development engine applies MORE

1. The display of information, such as images, text (not suitable for a large segment of text list information and is not suita2. The need to have a wealth of interface animation and interactive animation.

3. relatively simple interaction, drag, click on (but not limited to drag click through xml code can interact partially similar4. The information display mode can not be achieved using standard controls, or interaction can not be achieved, the need for s

5. Replace the skin need to be flexible style, animation and interactive interface and even some interactive animations are av

Some simple tools such as application, no input interface hoping to replace theoperating mode (eg incoming calls interface) and desktop gadget can consider using,also can be used as a framework to achieve a similar animated e-card interface thatsupports interactive, As the application of eggs (such as a birthday SMS eggs)


3/27

MIUI theme modules using MORE

Variety lock screen com.android.internal.policy.impl.AwesomeLockScreenDesktop Clock com.miui.home.launcher.gadget.AwesomeClockFrame Gadget com.miui.home.launcher.gadget.PhotoFrameAlarm bells interface com.android.deskclock.AlarmAlertFullScreenFreedom dynamic desktop widgets com.miui.home.launcher.gadget.AwesomeGadgetVariety wallpaper com.miui.home.launcher.MiWallpaper (based SurfaceView)Dynamic IconWeather Gadget com.miui.home.launcher.gadget.Weather_2x4_custom (v4)

MAML Variety lock screen application in

Variety lock screen theme lockscreen bag / directory under the advance, manifest.xmlfile is described in the script

...

frameRate: Specifies the frame rate, if the animation is slow, you can specifythe value of smaller, energy saving. The default is 30.displayDesktop: The default is false, perspective to the desktop features, ifthere is no lock screen wallpaper or lock screen wallpaper can be removed ortransparent can see the desktop or the application launcher in front of the lock

screen. You can achieve the perfect WP7, Meego, Ali cloud and other unlockinterface.showSysWallpaper: The default is false, whether to display the lock screenwallpaper. If you do not specify after opening the lock screen wallpaper, will be used as a lock screen wallpaper wallpaper.screenWidth: set the screen width criteria. If specified as 720, the location ofall the elements of the lock screen layouts are written by 720p, 480p phone willautomatically scaled.

MAML applications dynamically changeable

wallpaper and icons

Variety Wallpaper

Variety wallpaper in the theme package miwallpaper catalog description file ismanifest.xml. Consistent with the root node represents Variety lock screen:


4/27

...

width: width represents amazing wallpaper. height: represents the height

Also, if you want to achieve the effect of finger sliding elements follow, need thehelp of # wallpaper_offset_pixel_x, # wallpaper_offset_x

wallpaper_offset_pixel_x: the number of pixels offset (0 to -1 * screen width)wallpaper_offset_x: Offset percentage (0 to 1.0)

Relationship between the two: #wallpaper_offset_x * screen width = -1 * #wallpaper_offset_pixel_x

Slide: In the first screen, wallpaper_offset_pixel_x = 0, wallpaper_offset_x = 0; slithe last screen, wallpaper_offset_pixel_x = -1 * screen width, wallpaper_offset_x =1.0

To adapt to different resolution models, we recommend using #wallpaper_offset_x. Theproposed design approach:

1. Wallpaper cut dual wide (screen width refers screenWidth)2. Wallpaper position: x = "- # wallpaper_offset_x * screen width"3. Need to follow the sliding element positioning: x = "- # wallpaper_offset_x *

Wide screen wallpaper + relative position"

Dynamic Icon

Under the theme of dynamic icons pack icons \ fancy_icons \ directory, each dynamicicon is a folder, the folder name is the corresponding app package name. For example,the icon is a dynamic calendar called "com.android.calendar" folder, which containsthe description file manifest.xml


5/27

Currently supported tag: Battery, DateTime.Day, DateTime.Hour, DateTime.Minute,DateTime.Second

If a gadget does not require electricity or time variable, you need to useuseVariableUpdater = "none", specifies the time variable and so do the update.

If a gadget display system power and change per hour depending on the time displaybackground images: useVariableUpdater = "Battery, DateTime.Hour"

If you need to refresh several times per second, and can be used directly frameRate

Wallpaper element

Wallpaper wallpaper element reference system settings, in addition to other things yocan not specify the source images and Image elements identical, animations, and otherproperties can be controlled. Without this element does not display wallpaper. Therecan be multiple. Examples:

Variable

variable

name variable nameexpression corresponding variable or constant expression Note: If you define a

string constant need more single quotes: expression = "'my string'"type = number / string variable or a string variable to define default values:numberconst = true variable is calculated only once at initialization time, he wouldnot be recalculated, can improve efficiency. If the variable value will changeduring the lock-screen operation, const set to false Default: falsethreshold threshold trigger, when the change variable value exceeds the setthreshold, can trigger some commands. For example:

The code represents the value of # time3 every change of 1, it will execute allcommands inside

persist default false, variable persistence. After designated ture, if not regiven the value of the other variable, then the value would have been saved,


6/27

after re-lock or unlock regardless reapply themes are not restored

Variable array

variable array

...

...

Item array element definition

expression elements corresponding expressionIf the element is a constant value, the value is specified by a constant value

// Define a two-second rotation time date display format DateTime every element.// Array elements can be used to display different values based on numeric variables string


7/27

unlocker:

Offset unlocker.move_x unlocking member in the x-directionOffset unlocker.move_y unlocking member in the y-directionunlocker.move_dist unlocking member moves fromunlocker.state unlocking member state: 0 normal, 1 pressed, 2 reached

touch:

touch_x current x coordinate of the touch pointtouch_yThe initial x coordinate of the screen when pressed touch_begin_xtouch_begin_ytouch_begin_time time the screen is pressed

time:

time the current time, longtime_sys system time in millisecondsyear Yearmonth month (ranging from 0 to 11,0 for January, 1 for February, and so on)date dateday_of_week week (1 for Sunday, 2 for Monday, and so on)hour12 current hour (12-hour)hour24 24 hour clockminute minutesecond secondampm afternoon 0: am 1: pmtime_format 0: 12h 1: 24h

Lunar calendar

year_lunar Lunar Yearyear_lunar1864 used to calculate the attributionmonth_lunar lunar month starting from 1 meterAre Run month_lunar_leap 0/1 monthsdate_lunar lunar dates starting from 1 meter

battery:

battery_level current amount of power, 1 to 100Normal charging battery_state 0 1 2 3 low battery is fully charged

screen:

screen_width screen widthscreen_height screen heightraw_screen_width physical width (this indicates that the current screen


8/27

resolution of the device, not the root of the impact screenWidth)raw_screen_height physical height

image:

image.actual_w actual width of the pictureimage.actual_h

image.bmp_width width of image files (not crop, zoom effects, only to find thespecified picture according src, and detects the width of the document)image.bmp_height

music:

music_control.music_state 0 1 Play Pause

others:

sms_unread_count number of unread messagescall_missed_count missed phone numbernext_alarm_time an alarm clock next timeintercept_sys_touch whether intercepted after a touch event, to avoid beingcaught Other View, for example, in a free desktop widget can prevent the desktopto enter the edit mode to scroll and touch operation on the widgetframe_rate current screen frame rate

volume_type

0 Call Volume 1 System Volume 2 ringtone, SMS ringtone music player volume 3 4 5notification volume alarm volume 6 Bluetooth connection when the call volume 7 in somcountries mandatory system volume 8 DTMF 9 TTS Volume Volume Volume 10 FM

ring_mode 0 silent, 1 vibrate, 2 normalwifi_state 0 disabled, 1 enabled, 2 problem, 3 half (intermediate)bluetooth_state 0 off, 1 on, 2 halfdata_state 0 off, 1 onusb_mode 0 disconnected, 1 charge only, 2 storage, 3 intermediate

Expression

Support brackets and modulo arithmetic functionsmodulo arithmetic: + - * /%support functions: sin, cos, tan, asin, acos, atan, sinh, cosh, sqrt, abs, min, maxdoes not explain

len (digital) given the number of digits len (1234) = 4digit (numbers, the first of several) to take the first of several given numbers


9/27

digit (12345, 2) = 4 Note: subscript right to left, and from the beginningsubstr (original string, the string starting position, the string length) substr('Today is really hot', 1,2) = 'naive'round () rounded to the nearest integer int () rounded downeq (x, y) // x == y 1:? 0! ne (x, y) // x = y 1:? 0ge (x, y) // x> = y 1:? 0gt (x, y) // x> y 1:? 0

le (x, y) // x 0 0:? 1ifelse (x, y, z) // x> 0 y:? zifelse (x1, y1, x2, y2, ..., z)if x1> 0 return y1; else if x2> 0 return y2; ...; else return z+ Can concatenate strings, some functions can also support string, isnull candetermine whether the string variable is empty, ifelse can select String, StringComparison Functions eqs (@ string1, @ string2)

Element is visible expression of support visibility = "expression" 0VisibleImage, Text, Time's propertyalign = left, center, right horizontal alignment of the coordinate pointsalignV = top, center, bottom vertical alignment coordinate points the way

Text

Displays the format of the text, the coordinates attribute support variables

color: text color, # FFFFFFsize: Text Sizeformat: If you need to display a variable number in the text, you need to specifthe format, specify the numeric position with% dparas: If you specify the format, you need to specify the corresponding variableexpression% d in paras where there can be multiple expressions with variables, "separatedalign: alignment of the left, center, right, text coordinatestextExp: literal expression, you can directly call the desired output variables

such as "time is now 9:00," can be written textExp = "'Now the time is' + #hour12 + 'point'."width text width, when the text exceeds the specified width will be cut off. Ifthe multi-line specifies the display will fold lines. If you specify the textscrolling, scrolling in the specified location will display textmarqueeSpeed text scrolling speed, with the width of the use of the abovemarqueeGap scroll interval. When the interval after the re-emergence of the textdisplay, the default width of four charactersrotation (X, Y, Z) rotation angle, the old angle can also be used, but therecommended rotation, because of relatively high atmospheric internationalizatiomultiLine ture / false whether to support multi-line display, default false


10/27

spacingMult multiple default spacing 1increase the amount of the default spacing spacingAdd 0text.text_width width of a line of text that can be used to typeset

# Tt.text_width

Examples of usage:

Display the next alarm time

textExp property supports string expression:* Weather information is displayed if the temperature is empty - not empty display values


11/27

m -> 7mm -> 07mmm -> 007mmmm -> 0007

1970 4 6 3:23 am

"Yyyy / MM / dd h: MMAA" -> "1970/04/06 3:23 am"

"M dated May d h: mmaa" -> "463:23 am"

Week

"E" -> "Wednesday""EEEE" -> "Wednesday""Day: M / d" -> "Day: 4/6"

24 hours: "kk: mm" -> "13:34"

Picture

Pictures component used to display an image on the lock screen, you can specifyvarious attributes


12/27

...

// SrcExp: Picture source expression

Digital Pictures

numeric expression number is to be displayedsrc is the file name of the picture source, support SourceAnimation

If the src = "number.png" number_0.png number_1.png ... will be used to draw thedigital image files. Time similar parts

Pictures mask

x, y coordinatessrc mask image, the black part represents an opaque opaque, the other part istransparent.align coordinates are relative or absolute position of the picture belongs, if iis relative, Pictures Mobile is moving mask will follow accordingly. Otherwisemask remain intact.

Mask can also be active animation, rotation animation, animation and location,property supports variable expression

Elements of animation


13/27

All elements supports animatedmovie is divided into: Picture source, position, size, rotation, transparency,independent of each animation, each loop, the animation consists of several keyframes, keyframes, including property and time frame, the picture outside sourceanimation division, Other animation will find two adjacent key frames based on thecurrent time, and then calculate the current linear interpolation property. If thefirst frame of the time does not start from zero, the default time is 0, the firstframe as a picture of the original property, the time in milliseconds. Position in th

animation position coordinates relative to the picture itself.

Example: Location animated representation of one second from the left to the far righof the screen, stay one second, transparency, transparency of 175 indicates thebeginning of the animation, from the far left to the far right of the transparency ofthe process of change, after 0.5 seconds to reach the rightmost gradient opaque, 0.5seconds and then disappear becomes transparent. Then loop.

NOTE: Only image support image source animationimage source animation slightly different, no interpolation, x, y optional, representthe relative location of the picture, the current picture is found in the first listthat is greater than the current time point specified


14/27

Group

Group is a group of meaning, equivalent controls are a container that can be used tocontain live other elements, such as pictures, time, etc. By adding the group tocoordinate and width and height, you can easily adjust the position and size of a one

time multiple elements. While Group also add a variety of animation types and Image acomprehensive

The new version also adds a frame rate control, if a group of elements arestatic, you can add framaRate = "0", the system will automatically adjust therefresh rate, reduce memory and cpu usage each group based on the current framerate. So it is recommended that you pick plus the corresponding frame rate whenyou add a Group

Slider

name: the name used for the variable namebounceInitSpeed, bounceAccelation rebound animation initial velocity andacceleration (distance in pixels, the time in seconds), all support theexpression

alwaysShow = "true / false" default is false, when a Slider visible, other Slidedisappear.

You can have any number of Slider components.

Trigger Slider state switching, support the Trigger

Slider starting point: the starting point of the elements contained in drag to movethe position will follow the current operation.


15/27

// When switching from other states to NormalState, trigger the Trigger

// When switching from other states to PressedState, trigger the Trigger

// When switching from other states to ReachedState, triggered Trigger ->

Three state can not specify the variables can be used to change the status of theother interface elements to represent the triggering process. Slider target point:When the starting point x, y point fall EndPoint rectangle target area, reaching thetrigger position, then release your finger that can generate a trigger, you can have

more than one trigger purposes.


16/27

Slider's intent may be a Trigger and Command, a Trigger can have multipleCommand. See Command Trigger and Trigger & Command

Unlocker inherit Slider, more than just the tag name usage Slider to Unlocker.unlocking member rebound animation, see http://www.miui.com/thread-290094-1-1.html

Lock screen sounds

StartPoint: normalSound, pressedSound, specified in the normal state and press playsoundEndPoint: reachedSound, after reaching the endpoint play sound

Push buttonButton element can be used to receive clicks, double-clicking the event, and accordinto the definition of trigger to control other elements on the interface. Buttonelement can also be passed to other elements on the event interface, to make the otheelements in response to user actions on the lock screen interface.

All elements of the name attribute increases, the control object button specified byname.

x, y, w, h specifies the button area.The button's event listener to specify which element to pass.

Button can have a number of trigger, trigger defines the button action trigger-relateoperations, such as controlling the properties of an element
http://www.miui.com/thread-290094-1-1.html


17/27

action: button action: down (pressed), up (lift), double (double-click)target: the name of the control objectivesproperty: property name, currently supports: visibility will add other attributeto control later.value: property value for the boolean currently have: true, false, toggle

Usually target button control has three categories, namely, visibility control, playanimations, and execute commands, simple demonstration:

About command will be described in detail later in

Button xml structure elements:

Note: Button in Button Image coordinates and their coordinates are independent, are relative to the parent element of Butt

...

...

Music Player

Specify the name, so that the display can be controlled by another button or not, sucas double-click. Must contain 4 Button and a Text, and the name was specified name.May contain any other interface elements, such as Image like.

autoShow true / false if they go into the lock screen when playing music, whetheto automatically display MusicControlmusic_state stop a player playing status 0After updating the music player supports the song and artist name displayedseparately, respectively, using @ music_control.title and @ music_control.artist


18/27

Example: Double-click Show hidden control music control


19/27

Volume adjustment

volume_level volume nowvolume_level_old adjust the volume of the previous value: 1-15 based oncomparison of the two judgments is increasing or decreasingvolume_type

0 call volume

A system volume2 phone ringtone, SMS ringtone3 music player volume4 alarm volume5 Notification volume6 Bluetooth connection when the call volume7 In some countries, mandatory system volume8 DTMF volume9 TTS volume10 FM volume

Under normal lock screen can adjust 3 (volume player volume)volume_type> = 0 represents the volume is being adjusted, the adjusted value of -1 iscompleted according to the show or hide the volume display

Content Provider

content provider support where the format:where = "" whereFormat = "" whereParas = ""content Provider support dependencies, ie after the end of a ContentProviderBinderquery to get the variable as a parameter to the next query ContentProviderBinder

triggers name1 name2 inquiry after inquiry ended, name1 name2 queries can use variables. And if the data changes name2 re-query,

content provider provides application information generic query interface that define

a new xml code to query the content provider, and queries to the binding informationto the variables used to display information about third-party applications, as longas third-party applications to provide the appropriate The content provider. Forexample, you can display weather information, e-mail, to-do, notes, etc., you can alswrite an application to query any information you want and by content provider toprovide to use the lock screen.


20/27

VariableBinders: definition of variables bound to the source, currently onlysupports content provider.ContentProviderBinder: Define a content provider and a source of variablebindings to it

uri: content provider uri, which specifies the content provider selection

uriFormat: If uri need to add a variable, you can use the format, you needto be used with uriParasuriParas: Text element of the same formatcolumns: column names need to check, separated by commaswhere: query, the same SQLargs: "where" parameters.order: Sort with SQLcountName: The number of queries structure is bound to the variable name

Variable: Given a bind variablename: variable nametype: content provider data type: string / double / float / int / longcolumn: the name of the variable bound to the column.row: number of rows to variable binding, the default is 0.


21/27

weather_fog = 2130837568;weather_heavy_rain = 2130837572;weather_icy_sleet = 2130837576;weather_mist = 2130837583;weather_partly_cloudy = 2130837587;weather_rain = 2130837600;weather_snow_rain = 2130837606;weather_snow = 2130837608;

weather_sunny = 2130837612;weather_thunderstorm = 2130837617;weather_unknown = 2130837621;weather_windy = 2130837626;

MIUI notes query content, display and modify the contents of the first time notes


22/27

where the condition is true, execute the command; is false, not executed.4. delay is the delay, in milliseconds. After reading a delay before the command

execution5. delayCondition judgment is delayed, after the delay time and then judge.

Examples:

// Second


23/27

Common commands used to send commands to external programs


24/27

Bluetooth value = "on" value = "off"

Data

Ringtone / mute / shock


25/27

State variables, only add the appropriate command after the effective#ring_mode: 0 silent, 1 vibrate, 2 normal#wifi_state: 0 disabled, 1 enabled, 2 problem, 3 half (intermediate)#bluetooth_state: 0 off, 1 on, 2 half#data_state: 0 off, 1 on#usb_mode: 0 disconnected, 1 charge only, 2 storage, 3 intermediate

Trigger's Command support variable assignment

name: variable name, expression: assignment expression

Command Support Trigger animation playback controls


26/27

To specify the xml description language different frame rates depending on the timeline, add an element, called FramerateController, the same elements, and otherinterface elements can be added to each container, this element contains a frame ratecontrol timeline specified in the certain amount of time to use a certain frame rate.

This element will control the frame rate at which it is under the timeline container,ie, frame rate change elements of the container under all animations are synchronizedwith this element specified.

Sensor calls

Added You can bind the sensor data to the variables forgravity sensing, orientation sensor, acceleration sensors, pressure sensors (altitude

// Orientation sensor: type = "orientation" index = 0: azimuth, 0 ~ 359,0 = North, 90 = East, 180 = South, 270 = West index = 1: pitch angle, -180 ~ 180, z-axis to the positive y-axis direction of the steering index = 2: roll angle, -90 ~ 90, x-axis turning positive z-axis direction

// Linear acceleration

type = "linear_acceleration" index = 0: x direction of linear acceleration index = 1: linear acceleration in the y direction index = 2: z direction of linear acceleration Linear acceleration is to remove the influence of gravity: gravitational acceleration = linear acceleration +

// Acceleration type = "accelerometer" index = 0: acceleration in the x direction index = 1: acceleration in the y direction index = 2: z direction acceleration

// Gravity sensor

type = "gravity" index = 0: gravitational acceleration in the x direction gravitational acceleration in the y direction: index = 1 index = 2: gravitational acceleration in the z direction


27/27

index = 0: barometric pressure units hPa. The average air pressure at sea level is 1013.25hPa, can be estimated b

From " http://wiki.dev.xiaomi.com/index.php?title=MAML Tutorials & oldid = 1936 "

This page was last modified in 2014 8 18 () 15:29.This page has been accessed 51,989 times.
http://wiki.dev.xiaomi.com/index.php?title=MAML%E6%95%99%E7%A8%8B&oldid=1936

MAML Tutorial (MIUI Theme)

Documents

Transcript of MAML Tutorial (MIUI Theme)