MAML Tutorials

From MIUI Theme Wiki

Table of Contents
1 MORE & MAML Overview
2 MAML Variety lock screen application in the
3 MAML applications dynamically changeable wallpaper and icons
4 wallpaper element
5 variables
6 variable array
7 global variables
8 expression
9 text
10 hours
11 Date
12 Photos
13 digital pictures
14 picture mask
15 elements in animation
16 Group
17 Slider
18 buttons
19 Music Player
20 volume control
21 Content Provider
22 Trigger & Command
23 Dynamic Frame Rate
24 sensor call

MORE & MAML Overview

MAML engine scripting language
MIUI Application Markup Language for MORE (MIUI MORE engine application markup
language)

MORE rendering engine

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

Outline
Initially Variety lock screen for use with a specific syntax description xml lock
screen. Later continuous enhancements, and gradually evolved into a near universal
interface description language and graphics rendering engine, at a certain demand for
developing 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 that
Android is a static interface description, changes to the interface elements depend
java code. MAML describe static interface + dynamic attributes, UI timeline constantly
refreshed by a certain frame rate, UI updated in real time based on the calculation
results show variable expression of element attributes. MAML language and runtime
engines have been independent from the lock screen as MIUI built into a common
framework, in addition to displaying the date and time, but also supports the query
criteria Content Provider to obtain a variety of information such as weather. Display
pictures of various elements such as text, a variety of animations, slide interactive
interface controls such as clicking, suitable for implementing the present information
or simple interaction interface. Such as clocks, weather widget, alarm clock ringing
interface.
Framework supports dynamic frame rate, according to a fixed frame rate does not have
to stop rendering, animation and updated without stopping at the right time rendering,
only this time with minimal resources, for slowly changing animation rendering using a
low frame rate, high dynamic animation begins Immediately after the adjustment to
render high frame rate at full speed. The basic frame rate at full speed in full
screen rendering can reach 60. Rational use can both cool and not much power.

What types of interface development engine applies MORE

1.
2.
3.
4.
5.

The display of information, such as images, text (not suitable for a large segment of text list information and is not suitable for u
The need to have a wealth of interface animation and interactive animation.
relatively simple interaction, drag, click on (but not limited to drag click through xml code can interact partially similar java pro
The information display mode can not be achieved using standard controls, or interaction can not be achieved, the need for self-contr
Replace the skin need to be flexible style, animation and interactive interface and even some interactive animations are available th

Some simple tools such as application, no input interface hoping to replace the
operating 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 that
supports interactive, As the application of eggs (such as a birthday SMS eggs)

MIUI theme modules using MORE

Variety lock screen com.android.internal.policy.impl.AwesomeLockScreen
Desktop Clock com.miui.home.launcher.gadget.AwesomeClock
Frame Gadget com.miui.home.launcher.gadget.PhotoFrame
Alarm bells interface com.android.deskclock.AlarmAlertFullScreen
Freedom dynamic desktop widgets com.miui.home.launcher.gadget.AwesomeGadget
Variety wallpaper com.miui.home.launcher.MiWallpaper (based SurfaceView)
Dynamic Icon
Weather 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.xml
file is described in the script
<Lockscreen frameRate = "" displayDesktop = "" showSysWallpaper = "" screenWidth = "720">
<Image />
<Image />
<Unlocker />
<Unlocker />
<Time />
<DateTime />
...
<Text />
</ Lockscreen>

frameRate: Specifies the frame rate, if the animation is slow, you can specify
the value of smaller, energy saving. The default is 30.
displayDesktop: The default is false, perspective to the desktop features, if
there is no lock screen wallpaper or lock screen wallpaper can be removed or
transparent 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 unlock
interface.
showSysWallpaper: The default is false, whether to display the lock screen
wallpaper. If you do not specify after opening the lock screen wallpaper
<Wallpaper />, will be used as a lock screen wallpaper wallpaper.
screenWidth: set the screen width criteria. If specified as 720, the location of
all the elements of the lock screen layouts are written by 720p, 480p phone will
automatically scaled.

MAML applications dynamically changeable

wallpaper and icons
Variety Wallpaper
Variety wallpaper in the theme package miwallpaper catalog description file is
manifest.xml. Consistent with the root node represents Variety lock screen:
<MiWallpaper frameRate = "1" width = "720" height = "1280" screenWidth = "720">
<Var />
<Image />

<Group />
...
</ MiWallpaper>

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

Also, if you want to achieve the effect of finger sliding elements follow, need the
help 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; slid
the 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. The
proposed 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 dynamic
icon 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 contains
the description file manifest.xml
<Icon version = "1" frameRate = "" width = "136" height = "136" screenWidth = "720" useVariableUpdater = "" hideApplicationMessage = "">
<Var />
<Image />
<Text />
<DateTime />
...
</ Icon>

hideApplicationMessage: default false, shielded notice the top right corner flag.
useVariableUpdater: Which system variable specifies the need, now includes power and
time, and you can specify the update period of time, if the time gadgets updated every
second, you need to specify the update cycle for one second, otherwise a default will
be updated every minute. If a gadget or a dynamic icon display only the date is
updated once a day, you can specify the update cycle for one day. Try to choose a
longer update cycle, in order to save system resources.

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 use
useVariableUpdater = "none", specifies the time variable and so do the update.
If a gadget display system power and change per hour depending on the time display
background 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
can not specify the source images and
properties can be controlled. Without
can be multiple. Examples: <Wallpaper

system settings, in addition to other things you

Image elements identical, animations, and other
this element does not display wallpaper. There
/>

Variable
<Var> variable
<Var name = "" expression = "" type = "" const = "" threshold = "" persist = "" />
name variable name
expression 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:
number
const = true variable is calculated only once at initialization time, he would
not be recalculated, can improve efficiency. If the variable value will change
during the lock-screen operation, const set to false Default: false
threshold threshold trigger, when the change variable value exceeds the set
threshold, can trigger some commands. For example:
<Var name = "time3" expression = "# minute% 10" threshold = "1">
<Trigger>
<Command target = "time3_anim.visibility" value = "true" />
<Command target = "time3_anim.animation" value = "play" />
<Command target = "time3_anim_new.visibility" value = "false" />
<Command target = "time_3_anim_new.visiblity" value = "true" delay = "400" />
<Command target = "time_3_anim_new.animation" value = "play" delay = "400" />
</ Trigger>
</ Var>

The code represents the value of # time3 every change of 1, it will execute all
commands <Trigger /> inside
persist default false, variable persistence. After designated ture, if not re
given the value of the other variable, then the value would have been saved,

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

Variable array
<VarArray> variable array
<VarArray type = "string">
<Vars>
<Var name = "date_format1" index = "# time / 2000% 5" />
<Var name = "date_format2" index = "2" const = "true" />
...
</ Vars>
<Items>
<Item expression = "ifelse (isnull (date_format), 'MMMMd day EEEE',date_format)" />
<Item value = "EEEE" />
...
</ Items>
</ VarArray>

Item array element definition

expression elements corresponding expression
If 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
<-! If const is true, the variable will only evaluate once at the initial time, ->
<Var name = "show_date" expression = "ifelse (isnull (#show_date), 1, # show_date)" type = "number" const = "true" />
<Var name = "text_size_date" expression = "ifelse (isnull (#text_size_date), 18, # tex t_size_date)" type = "number" const = "true" />
<VarArray type = "string">
<Vars>
<Var name = "date_format1" index = "# time / 2000% 5" />
<Var name = "date_format2" index = "2" const = "true" />
</ Vars>
<Items>
<Item expression = "ifelse (isnull (date_format), 'MMMMd day EEEE',date_format)" />
<Item value = "EEEE" />
<Item value = "yyyy-year" />
<Item value = "MMMM" />
<Item value = "d day" />
</ Items>
</ VarArray>

// Display the English Month

<VarArray type = "string">
<Vars>
<Var name = "month_str" index = "# month" />
</ Vars>
<Items>
<Item value
<Item value
...
<Item value
<Item value
</ Items>
</ VarArray>
<Text text = "@

= "January" />
= "February" />
= "November" />
= "December" />
month_str" color = "# FFFFFFFF" size = "20" ... />

Global Variables

unlocker:
Offset unlocker.move_x unlocking member in the x-direction
Offset unlocker.move_y unlocking member in the y-direction
unlocker.move_dist unlocking member moves from
unlocker.state unlocking member state: 0 normal, 1 pressed, 2 reached
touch:
touch_x current x coordinate of the touch point
touch_y
The initial x coordinate of the screen when pressed touch_begin_x
touch_begin_y
touch_begin_time time the screen is pressed
time:
time the current time, long
time_sys system time in milliseconds
year Year
month month (ranging from 0 to 11,0 for January, 1 for February, and so on)
date date
day_of_week week (1 for Sunday, 2 for Monday, and so on)
hour12 current hour (12-hour)
hour24 24 hour clock
minute minute
second second
ampm afternoon 0: am 1: pm
time_format 0: 12h 1: 24h
Lunar calendar
year_lunar Lunar Year
year_lunar1864 used to calculate the attribution
month_lunar lunar month starting from 1 meter
Are Run month_lunar_leap 0/1 months
date_lunar lunar dates starting from 1 meter
battery:
battery_level current amount of power, 1 to 100
Normal charging battery_state 0 1 2 3 low battery is fully charged
screen:
screen_width screen width
screen_height screen height
raw_screen_width physical width (this indicates that the current screen

resolution of the device, not the root of the impact screenWidth)

raw_screen_height physical height
image:
image.actual_w actual width of the picture
image.actual_h
image.bmp_width width of image files (not crop, zoom effects, only to find the
specified 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 messages
call_missed_count missed phone number
next_alarm_time an alarm clock next time
intercept_sys_touch whether intercepted after a touch event, to avoid being
caught Other View, for example, in a free desktop widget can prevent the desktop
to enter the edit mode to scroll and touch operation on the widget
frame_rate current screen frame rate
volume_type
0 Call Volume 1 System Volume 2 ringtone, SMS ringtone music player volume 3 4 5
notification volume alarm volume 6 Bluetooth connection when the call volume 7 in some
countries mandatory system volume 8 DTMF 9 TTS Volume Volume Volume 10 FM
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

Expression
Support brackets and modulo arithmetic functions
modulo arithmetic: + - * /%
support functions: sin, cos, tan, asin, acos, atan, sinh, cosh, sqrt, abs, min, max
does not explain
len (digital) given the number of digits len (1234) = 4
digit (numbers, the first of several) to take the first of several given numbers

digit (12345, 2) = 4 Note: subscript right to left, and from the beginning
substr (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 down
eq (x, y) // x == y 1:? 0
! ne (x, y) // x = y 1:? 0
ge (x, y) // x> = y 1:? 0
gt (x, y) // x> y 1:? 0
le (x, y) // x <= y 1:? 0
lt (x, y) // x isnull (x) // x == null 1:? 0 // if the variable contains a null
variable expression often used to determine whether the binding data found
not (x) x> 0 0:? 1
ifelse (x, y, z) // x> 0 y:? z
ifelse (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 can
determine whether the string variable is empty, ifelse can select String, String
Comparison Functions eqs (@ string1, @ string2)
Element is visible expression of support visibility = "expression" <= 0 invisible> 0
Visible
Image, Text, Time's property
align = left, center, right horizontal alignment of the coordinate points
alignV = top, center, bottom vertical alignment coordinate points the way

Text
Displays the format of the text, the coordinates attribute support variables
color: text color, # FFFFFF
size: Text Size
format: If you need to display a variable number in the text, you need to specify
the format, specify the numeric position with% d
paras: If you specify the format, you need to specify the corresponding variable
expression% d in paras where there can be multiple expressions with variables, ""
separated
align: alignment of the left, center, right, text coordinates
textExp: 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. If
the multi-line specifies the display will fold lines. If you specify the text
scrolling, scrolling in the specified location will display text
marqueeSpeed
text scrolling speed, with the width of the use of the above
marqueeGap scroll interval. When the interval after the re-emergence of the text
display, the default width of four characters
rotation (X, Y, Z) rotation angle, the old angle can also be used, but the
recommended rotation, because of relatively high atmospheric internationalization
multiLine ture / false whether to support multi-line display, default false

spacingMult multiple default spacing 1

increase the amount of the default spacing spacingAdd 0
text.text_width width of a line of text that can be used to typeset
<Text name = "tt" ... />
# Tt.text_width

Examples of usage:
Display the next alarm time
<Text text = "@ next_alarm_time" ... />
<Text format = "under an alarm clock: [% s] Battery: [% d %%]" paras = "@ next_alarm_time, # battery_level" />

textExp property supports string expression:

* Weather information is displayed if the temperature is empty - not empty display values
<Text visibility = "# hasweather" x = "(# screen_width / 2) +180" y = "# screen_height-290" w = "360" size = "36" color = "# ffffff" alig

Time
<Time x = "10" y = "10" src = "time.png" space = "">
</ Time>

src time picture of the prefix follows that the use time_0.png, time_1.png, ...
time_9.png, time_dot.png. Coordinate property supports variable expression
space represents a gap time of the picture, we can use this feature to typeset time
images, the use of positive images spacing becomes larger, then you can cut small
pictures, save memory. For the projection of images, will write negative space, you
can make a projection overlap to save space

Date
Display format specified date
format: Supports standard date format, an additional Lunar: NNNN
<DateTime x = "" y = "" color = "" size = "" format = "">
<PositionAnimation />
<DateTime>

September:
M -> 9
MM -> 09
7 minutes:

m -> 7
mm -> 07
mmm -> 007
mmmm -> 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 specify
various attributes
<Image x = "" y = "" w = "" h = "" pivotX = "" pivotY = "" rotation = "" src = "" srcid = "" alpha = "" align = "" antiAlias
= "" />

x, y coordinates relative to the upper left corner of the screen

w, h width and height
pivotX, pivotY center of rotation
rotation angle of rotation, a week 360
src Image Name
srcid picture sequence suffix number, usually with variable, you can display
different pictures based on variables, if src = "pic.png" srcid = "1" will show
the last picture "pic_1.png"
0-255 alpha transparency, less than or equal to 0 is not displayed
antiAlias
true / false anti-aliasing, if true picture does not have serrated
deformation in the rotation, but the speed will be slower
srcExp picture source expression
srcFormat picture source format
srcForamtExp picture source format expression
srcParas picture source parameters
align / alignV alignment, have been introduced earlier.

Examples:
<Image x = "0" y = "# screen_height-323" src = "bottom_bg.png" />

<Image name = "img" ...>

<PositionAnimation>
...
</ PositionAnimation>
</ Image>

// SrcExp: Picture source expression

<Image x = "210" y = "- 26" align = "center" srcExp = "'weather / weather_' + #weather_id +icon_suffix + '.png'" />

Digital Pictures
<ImageNumber number = "" src = "">

numeric expression number is to be displayed

src 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 the
digital image files. Time similar parts

Pictures mask
<Image x = "444" y = "# screen_height-92" src = "hs_path_light.png">
<PositionAnimation>
<Position x = "- 438" y = "0" time = "2000" />
</ PositionAnimation>
<Mask x = "0" y = "# screen_height-92" src = "hs_path_mask_r.png" align = "absolute" />
</ Image>

x, y coordinates
src mask image, the black part represents an opaque opaque, the other part is
transparent.
align coordinates are relative or absolute position of the picture belongs, if it
is relative, Pictures Mobile is moving mask will follow accordingly. Otherwise
mask remain intact.
Mask can also be active animation, rotation animation, animation and location,
property supports variable expression
<Mask x = "" y = "" src = "" centerX = "" centerY = "" angle = "" align = "">
<SourcesAnimation />
<RotationAnimation />
<PositionAnimation />
</ Mask>

Elements of animation

All elements supports animated

movie is divided into: Picture source, position, size, rotation, transparency,
independent of each animation, each loop, the animation consists of several key
frames, keyframes, including property and time frame, the picture outside source
animation division, Other animation will find two adjacent key frames based on the
current time, and then calculate the current linear interpolation property. If the
first frame of the time does not start from zero, the default time is 0, the first
frame as a picture of the original property, the time in milliseconds. Position in the
animation position coordinates relative to the picture itself.
<Image>
<PositionAnimation>
<Position x = "10" y = "20" time = "100" />
<Position x = "100" y = "200" time = "1000" />
</ PositionAnimation>
</ Image>

<RotationAnimation>
<Rotation angle = "" time = "" />
<Rotation angle = "" time = "" />
</ RotationAnimation>

<SizeAnimation>
<Size w = "" h = "" time = "" />
<Size w = "" h = "" time = "" />
</ SizeAnimation>

<! - 0-255 ->

<AlphaAnimation>
<Alpha a = "" time = "" />
<Alpha a = "" time = "" />
</ AlphaAnimation>

Example: Location animated representation of one second from the left to the far right
of the screen, stay one second, transparency, transparency of 175 indicates the
beginning of the animation, from the far left to the far right of the transparency of
the process of change, after 0.5 seconds to reach the rightmost gradient opaque, 0.5
seconds and then disappear becomes transparent. Then loop.
<Image x = "0" y = "# screen_height-177" src = "charging_light.png" category = "Charging">
<PositionAnimation>
<Position x = "480" y = "0" time = "1000" />
<Position x = "480" y = "0" time = "2000" />
</ PositionAnimation>
<AlphaAnimation>
<Alpha a = "175" time = "0" />
<Alpha a = "175" time = "1000" />
<Alpha a = "255" time = "1500" />
<Alpha a = "0" time = "2000" />
</ AlphaAnimation>
</ Image>

NOTE: Only image support image source animation

image source animation slightly different, no interpolation, x, y optional, represent
the relative location of the picture, the current picture is found in the first list
that is greater than the current time point specified

<SourcesAnimation>
<Source x = "" y = "" src = "pic1.png" time = "100" />
<Source x = "" y = "" src = "pic2.png" time = "1000" />
</ SourcesAnimation>

Group
<Group name = "" x = "" y = "" w = "" h = "" frameRate = "0">
<Image />
<Time />
<DateTime />
<Text />
<PositionAnimation />
<SizeAnimation />
</ Group>

Group is a group of meaning, equivalent controls are a container that can be used to
contain live other elements, such as pictures, time, etc. By adding the group to
coordinate and width and height, you can easily adjust the position and size of a onetime multiple elements. While Group also add a variety of animation types and Image as
comprehensive
The new version also adds a frame rate control, if a group of elements are
static, you can add framaRate = "0", the system will automatically adjust the
refresh rate, reduce memory and cpu usage each group based on the current frame
rate. So it is recommended that you pick plus the corresponding frame rate when
you add a Group

Slider
<Slider name = "">

name: the name used for the variable name

bounceInitSpeed, bounceAccelation rebound animation initial velocity and
acceleration (distance in pixels, the time in seconds), all support the
expression
alwaysShow = "true / false" default is false, when a Slider visible, other Slider
disappear.
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 move
the position will follow the current operation.

<StartPoint x = "" y = "" w = "" h = "" normalSound = "" pressedSound = "">

<! - Normal state, can contain several elements ->
<NormalState>
<Image />
<Time />
<DateTime />
<Text />
// When switching from other states to NormalState, trigger the Trigger
<Trigger>
<Command target = "test_trigger.visibility" value = "false" />
</ Trigger>
</ NormalState>
<! - Hit area in the press, said the start trigger operation, dragging, hiding other state elements, display these elements ->
<PressedState>
<Image />
<Time />
<DateTime />
<Text />
// When switching from other states to PressedState, trigger the Trigger
<Trigger>
<Command target = "test_trigger.visibility" value = "true" />
</ Trigger>
</ PressedState>
<! - After reaching the trigger target, hide other elements to display these elements ->
<ReachedState>
<Image />
<Time />
<DateTime />
<Text />
// When switching from other states to ReachedState, triggered Trigger ->
<Trigger>
<SoundCommand sound = "reached.mp3" volume = "1" />
</ Trigger>
</ ReachedState>
</ StartPoint>

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

<EndPoint x = "" y = "" w = "" h = "" reachedSound = "">

<! - Slider perform actions, you can specify a different intent ->
<Intent action = "" type = "" category = "" package = "" class = "" />
<NormalState>
</ NormalState>
<-! Show the target position if pressed trying to unlock ->
<PressedState>
<Image />
</ PressedState>
<-! Show specified image when reached target, if touch up then perform unlock ->
<ReachedState>
<Image />
</ ReachedState>
<- Slider path
<Path x = "" y
<Position x
<Position x
</ Path>
</ EndPoint>

of tolerance:! After the start trigger action path when moving the maximum distance exceeds this value will be canceled
= "" tolerance = "">
= "" y = "" />
= "" y = "" />

Examples:
<Slider name = "slider">
<StartPoint x = "31" y = "# screen_height-117" w = "90" h = "90">

<NormalState>
<Image x = "31" y = "# screen_height-117" src = "unlock_button.png">
</ Image>
</ NormalState>
</ StartPoint>
<EndPoint x = "359" y = "# screen_height-117" w = "90" h = "90">
<PressedState>
<Image x = "359" y = "# screen_height-117" src = "unlock_target.png">
</ Image>
</ PressedState>
<Path x = "0" y = "# screen_height-117">
<Position x = "31" y = "0" />
<Position x = "359" y = "0" />
</ Path>
</ EndPoint>
</ Slider>

Slider's intent may be a Trigger and Command, a Trigger can have multiple
Command. 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 play
sound
EndPoint: reachedSound, after reaching the endpoint play sound
<Unlocker name = "unlocker">
<StartPoint x = "0" y = "440" w = "480" h = "400" normalSound = "sound_normal.mp3" pressedSound = "sound_normal.mp3">
<EndPoint x = "0" y = "640" w = "480" h = "400" reachedSound = "sound_reached.mp3">
</ Unlocker>

Push button
Button element can be used to receive clicks, double-clicking the event, and according
to the definition of trigger to control other elements on the interface. Button
element can also be passed to other elements on the event interface, to make the other
elements in response to user actions on the lock screen interface.
<Button name = "" x = "" y = "" w = "" h = "" listener = "">

All elements of the name attribute increases, the control object button specified by
name.
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-related
operations, such as controlling the properties of an element
<Trigger action = "" target = "" property = "" value = "" />

action: button action: down (pressed), up (lift), double (double-click)

target: the name of the control objectives
property: property name, currently supports: visibility will add other attributes
to control later.
value: property value for the boolean currently have: true, false, toggle
Usually target button control has three categories, namely, visibility control, play
animations, and execute commands, simple demonstration:
<Button>
<Triggers>
<Trigger action = "down / up / double">
<Command target = "test.visibility" value = "true / false">
<Command target = "test.animation" value = "play">
<VariableCommand name = "test1" expression = "0">
</ Trigger>
</ Triggers>
</ Button>

About command <Command /> will be described in detail later in

Button xml structure elements:
<Button>
<! - You can specify any number of trigger, you can not specify ->
<Triggers>
<Trigger />
<Trigger />
</ Triggers>
<! - Button normal state, can contain any interface elements, such as Image Text, etc., can not specify
Note: Button in Button Image coordinates and their coordinates are independent, are relative to the parent element of Button.
<Normal>
<Image />
<Text />
...
</ Normal>
<! - Button pressed, can contain any interface elements, such as Image Text, etc., you can not specify, if you specify a normal state,
<Pressed>
<Image />
<Text />
...
</ Pressed>
</ Button>

Music Player
Specify the name, so that the display can be controlled by another button or not, such
as 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, whether
to automatically display MusicControl
music_state stop a player playing status 0
After updating the music player supports the song and artist name displayed
separately, respectively, using @ music_control.title and @ music_control.artist

<MusicControl name = "music_control" x = "" y = "">

<! - Album cover, and the like in addition to the ordinary Image picture is bound to the album cover, you can specify the size, plus Ma
<Image name = "music_album_cover" />
<! - Song title and artist display text ->
<Text name = "music_display" />
<! - On the one button ->
<Button name = "music_prev" />
<! - The next song button ->
<Button name = "music_next" />
<! - Play button ->
<Button name = "music_play" />
<! - Pause button ->
<Button name = "music_pause" />
</ MusicControl>

Example: Double-click Show hidden control music control

<Button x = "178" y = "529" w = "126" h = "126">
<Triggers>
<Trigger action = "double" target = "music_control" property = "visibility" value = "toggle" />
</ Triggers>
</ Button>

<MusicControl x = "0" y = "300" name = "music_control" visibility = "false">

<Image name = "music_album_cover" x = "240" y = "40" alpha = "150" align = "center" alignV = "center" />
<! - Background ->
<Image src = "music_bg.png" x = "40" y = "0" alpha = "100" />

<-! Text Added automatic scrolling feature, if developed width and scroll speed marqueeSpeed, will automatically scroll through the tex
<Text name = "music_display" x = "240" y = "10" w = "300" marqueeSpeed
= "30" size = "24" color = "# FFFFFF" alpha = "150" align = "cen
<Button name = "music_prev" x = "40" y = "40" w = "108" h = "84">
<Normal>
<Image src = "music_previous_n.png" x = "40" y = "40" />
</ Normal>
<Pressed>
<Image src = "music_previous_p.png" x = "40" y = "40" />
</ Pressed>
</ Button>
<Button name = "music_next" x = "332" y = "40" w = "108" h = "84">
<Normal>
<Image src = "music_next_n.png" x = "332" y = "40" />
</ Normal>
<Pressed>
<Image src = "music_next_p.png" x = "332" y = "40" />
</ Pressed>
</ Button>
<Button name = "music_play" x = "186" y = "40" w = "108" h = "84">
<Normal>
<Image src = "music_play_n.png" x = "186" y = "40" />
</ Normal>
<Pressed>
<Image src = "music_play_p.png" x = "186" y = "40" />
</ Pressed>
</ Button>
<Button name = "music_pause" x = "186" y = "40" w = "108" h = "84">
<Normal>
<Image src = "music_pause_n.png" x = "186" y = "40" />
</ Normal>
<Pressed>
<Image src = "music_pause_p.png" x = "186" y = "40" />
</ Pressed>
</ Button>
</ MusicControl>

Volume adjustment
volume_level volume now
volume_level_old adjust the volume of the previous value: 1-15 based on
comparison of the two judgments is increasing or decreasing
volume_type
0 call volume
A system volume
2 phone ringtone, SMS ringtone
3 music player volume
4 alarm volume
5 Notification volume
6 Bluetooth connection when the call volume
7 In some countries, mandatory system volume
8 DTMF volume
9 TTS volume
10 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 is
completed 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 ContentProviderBinder
query to get the variable as a parameter to the next query ContentProviderBinder
<ContentProviderBinder name = "name1" dependency = "name2">
<ContentProviderBinder name = "name2">
triggers name1 name2 inquiry after inquiry ended, name1 name2 queries can use variables. And if the data changes name2 re-query, it will

content provider provides application information generic query interface that defines
a new xml code to query the content provider, and queries to the binding information
to the variables used to display information about third-party applications, as long
as third-party applications to provide the appropriate The content provider. For
example, you can display weather information, e-mail, to-do, notes, etc., you can also
write an application to query any information you want and by content provider to
provide to use the lock screen.

<VariableBinders>
<ContentProviderBinder uri = "content: // sample / test" c uriFormat = "" uriParas = "" columns = "col1, col2" where = "" args = "" ord
<Variable name = "variable_name1" type = "int" column = "col1" row = "0" />
<Variable name = "variable_name2" type = "string" column = "col2" row = "0" />
</ ContentProviderBinder>

</ VariableBinders>

VariableBinders: definition of variables bound to the source, currently only

supports content provider.
ContentProviderBinder: Define a content provider and a source of variable
bindings 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 need
to be used with uriParas
uriParas: Text element of the same format
columns: column names need to check, separated by commas
where: query, the same SQL
args: "where" parameters.
order: Sort with SQL
countName: The number of queries structure is bound to the variable name
Variable: Given a bind variable
name: variable name
type: content provider data type: string / double / float / int / long
column: the name of the variable bound to the column.
row: number of rows to variable binding, the default is 0.
<! - Check the weather information from Google News Weather -> <nowiki>
<VariableBinders>
<ContentProviderBinder
uriFormat = "content: //com.google.android.apps.genie.geniewidget.weather/weather/current/%d"
uriParas = "# time_sys"
columns = "iconResId, location, temperature, lowTemperature, highTemperature, description"
countName = "hasweather">
<Variable name = "weather_id" type = "int" column = "iconResId" />
<Variable name = "weather_location" type = "string" column = "location" />
<Variable name = "weather_temperature" type = "int" column = "temperature" />
<Variable name = "weather_lowTemperature" type = "int" column = "lowTemperature" />
<Variable name = "weather_highTemperature" type = "int" column = "highTemperature" />
<Variable name = "weather_description" type = "string" column = "description" />
</ ContentProviderBinder>
</ VariableBinders>
<Nowiki> <-! Display
<Text visibility = "#
<Text visibility = "#
<Text visibility = "#
<Text visibility = "#

weather information ->

hasweather" x = "240" y = "60" w = "360" size = "24" color = "# FFFFFF" alpha = "200" align = "center" format = "%
hasweather * not (isnull (#weather_lowTemperature)) * not (isnull (#weather_highTemperature))" x = "240" y = "85" w
hasweather * isnull (#weather_lowTemperature) * not (isnull (#weather_highTemperature))" x = "240" y = "85" w = "36
hasweather * not (isnull (#weather_lowTemperature)) * isnull (#weather_highTemperature)" x = "240" y = "85" w = "36

<Image src = "weather.png" visibility = "# hasweather" x = "240" y = "100" srcid = "# weather_id" align = "center">
<PositionAnimation>
<Position x = "- 10" y = "0" time = "1000" />
<Position x = "10" y = "0" time = "3000" />
<Position x = "0" y = "0" time = "4000" />
</ PositionAnimation>
</ Image>

Weather id list:
weather_chance_of_rain = 2130837536;
weather_chance_snow = 2130837540;
weather_chance_storm = 2130837544;
weather_clear = 2130837556;
weather_cloudy = 2130837560;
weather_flurries = 2130837564;

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

<VariableBinders>
<ContentProviderBinder uri = "content: // notes / note" columns = "modified_date, snippet" order = "modified_date DESC" countName = "no
<Variable name = "note_date1" type = "long" column = "modified_date" row = "0" />
<Variable name = "note_snippet1" type = "string" column = "snippet" row = "0" />
</ ContentProviderBinder>
</ VariableBinders>

<DateTime x = "300" y = "50" color = "# ffffffff" visibility = "# note_count" value = "# note_date1" format = "yyyy-year MMMMdd day hh: m
<Text x = "5" y = "180" w = "450"
color = "# ffffffff" visibility = "# note_count" size = "18" marqueeSpeed
= "60" text = "@ note_snippet

Missed calls query parameters

uri = "content: // call_log / calls";
columns = "_id, number"
where = "type = 3 AND new = 1";

Trigger & Command

Command
Basic commands, the interface can be controlled through the properties of other
elements in the object name and object. Usually controls the visibility (visibility)
and animation elements (animation).
<Command target = "iamge1.visibility" value = "false" condition = "" delay = "" delayCondition = "" />
<Command target = "iamge1.animation" value = "play" condition = "" delay = "" delayCondition = "" />

1. iamge1 is the name of the object to be controlled ".", followed by the property
(currently supports visibility and animation).
2. Control when visibility, value which is written true or false, control the
animation time, value write-play (currently not supported so that the animation
pause)
3. condition is conditional, support for regular expressions. When the condition

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
execution
5. delayCondition judgment is delayed, after the delay time and then judge.
Examples:
<Button x = "0" y = "0" h = "100" w = "100">
<Triggers>
<Trigger action = "down">
// Second <40, 2000ms delay execution
<VariableCommand name = "delayCond0" expression = "#
// Delay after 6000ms, if the second <40, executed
<VariableCommand name = "delayCond1" expression = "#
// Second <40, the delay 4000ms, at this time if the
<VariableCommand name = "delayCond2" expression = "#
</ Trigger>
</ Triggers>
</ Button>

delayCond0 + 5" condition = "lt (# second, 40)" delay = "2000" />

delayCond1 + 5" delayCondition = "lt (# second, 40)" delay = "6000" /

second <40, executed
delayCond2 + 5" condition = "lt (# second, 40)" delayCondition = "lt

VariableCommand
Variables command, used to control variables (Var) value. Including the name and
expression of two special attributes, condition, delay, delayCondition usage is
consistent with Command
// The width value assigned to the screen w
<VariableCommand name = "w" expression = "# screen_width" />

SoundCommand
Voice commands can be used to play audio files
<SoundCommand sound = "" volume = "" loop = "" keepCur = "" />

1.
2.
3.
4.

sound: the sound file name

volume: loudness, a floating-point number between 0 and 1
loop: if looping, true / false, default is false.
keepCur: when you play this audio, whether to keep the currently playing sound,
true / false, default false.

Note: The sound file size requirements do not exceed 500kB, when the length is not
more than 10 seconds (10 seconds after playback sound does not come out).
Examples:
// Loop reached.mp3, while constantly being played out other sounds
<SoundCommand sound = "reached.mp3" volume = "1" loop = "true" keepCur = "true" />

ExternCommand

Common commands used to send commands to external programs

<ExternCommand command = "command name" numPara = "parameters of a digital expression" strPara = "parameter 2, string expression" />

At present, a command can be used is the unlock command (only valid in the lock
screen)
<ExternCommand command = "unlock" />

Use this command to achieve the unlock operation, without the use of <Unlocker />
ExternalCommand
And ExternCommand relative, is to receive an external command command, typical usage:
in the lock screen, usually used to receive the opening screen / off-screen commands
to execute some commands; desktop plug-in, is used to detect the cut screen to perform
command
resume indicates that the command executed when the opening screen, pause indicates that the command is executed when off-screen
<ExternalCommands>
<Trigger action = "resume">
<Command target = "target.animation" value = "play" />
</ Trigger>
<Trigger action = "pause">
<VariableCommand name = "pause_time" expression = "# time_sys" />
</ Trigger>
</ ExternalCommands>

Example desktop plug-cut screen use

<ExternalCommands>
<Trigger action = "resume">
<Command target = "__ root.animation" value = "play" />
</ Trigger>
<Trigger action = "pause">
<Command target = "__ root.animation" value = "play" />
</ Trigger>
</ ExternalCommands>

Use the buttons to achieve switch

<! - Each Button can have a number of Command ->
<Button x = "10" y = "10" w = "100" h = "100">
<Triggers>
<Trigger action = "up">
<Command target = "Wifi" value = "toggle" />
</ Trigger>
</ Triggers>
<Pressed>
<Image x = "10" y = "10" src = "toggle_btn_pressed.png" />
</ Pressed>
<Normal>
<Image x = "10" y = "10" src = "toggle_btn_normal.png" />
</ Normal>
</ Button>

Bluetooth value = "on" value = "off"

<Command target = "Bluetooth" value = "toggle" />

Data
<Command target = "Data" value = "toggle" />
<! - Only to switch to open, with another button to switch to the OFF ->
<Command target = "Data" value = "on" />
<Command target = "Data" value = "off" />

Ringtone / mute / shock

<-! Value = "normal, silent, vibrate" value = "silent" value = "normal" <br>
In a comma-separated state key switch, you can specify only one state, each with a different multiple button state value value, you
Three states switched
<Command target = "RingMode" value = "toggle" />
Below and above the same effect
<Command target = "RingMode" value = "normal, silent, vibrate" />
Only normal and mute switch
<Command target = "RingMode" value = "normal, silent" />
Only normal and vibration switch
<Command target = "RingMode" value = "normal, vibrate" />
Only switch to mute other button to switch to another state
<Command target = "RingMode" value = "silent" />

USB storage toggle / on / off

<Command target = "UsbStorage" value = "toggle" />
<Command target = "UsbStorage" value = "on" />
<Command target = "UsbStorage" value = "off" />

Wifi toggle / on / off

<Command target = "Wifi" value = "toggle" />

A sliding manner to achieve the switching

<Slider name = "switch_usb_mode" bounceInitSpeed
= "500" bounceAcceleration = "1500" alwaysShow = "true" visibility = "# usb_mode">
<StartPoint x = "0" y = "0" w = "100" h = "100">
<NormalState>
</ NormalState>
</ StartPoint>
<EndPoint x = "340" y = "0" w = "100" h = "100">
<Command target = "UsbStorage" value = "toggle" />
<Path>
<Position x = "0" y = "0" />
<Position x = "340" y = "0" />
</ Path>
</ EndPoint>
</ Slider>

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
<VariableCommand name = "test" expression = "# test + 1" />
name: variable name, expression: assignment expression

Command Support Trigger animation playback controls

<Button x = "0" y = "# screenview_y" w = "# screen_width" h = "# screenview_h">

<Triggers>
<Trigger action = "up">
<VariableCommand name = "gesture_valid" expression = "ge (abs (#gesture_offset), 80)" />
<VariableCommand name = "ani_begin_x_add" expression = "ifelse (lt (# current_screen, # screenview_count-1), # gesture_offset + # s
<VariableCommand name = "ani_begin_x_dec" expression = "ifelse (gt (# current_screen, 0), # gesture_offset- # screenview_w, # gestu
<VariableCommand name = "ani_begin_x" expression = "ifelse (# gesture_valid, ifelse (# gesture_offset, # ani_begin_x_dec, # ani_beg
<VariableCommand name = "touch_x" expression = "# touch_begin_x" />
<Command target = "ani_offset_x.animation" value = "play" />
</ Trigger>
</ Triggers>
</ Button>
<Var name = "ani_offset_x">
<VariableAnimation>
<AniFrame value = "# ani_begin_x" time = "0" />
<AniFrame value = "0" time = "300" />
<AniFrame value = "0" time = "100000000000000" />
</ VariableAnimation>
</ Var>

Dynamic Frame Rate

Simple Usage
In addition to the original frame rate frameRate property controls ordinary state, it
also supports were set charging, the battery is low, full frame rate power state to
facilitate the control of the frame rate under these conditions, to achieve energy
saving goals. For example, there is no ordinary state animation frame rate can be set
to 0, the charged state of animation, the frame rate can be set to 30, to show the
smooth animation, such ordinary state can be very efficient.
For example:
frameRateCharging = "30" frameRateBatteryLow = "20" frameRateBatteryFull = "1"

Advanced Usage

To specify the xml description language different frame rates depending on the time
line, add an element, called FramerateController, the same elements, and other
interface elements can be added to each container, this element contains a frame rate
control timeline specified in the certain amount of time to use a certain frame rate.
<FramerateController visibility = "# music_control.visibility" loop = "true">
<ControlPoint time = "0" frameRate = "20" />
<ControlPoint time = "1000" frameRate = "0" />
<ControlPoint time = "3000" />
</ FramerateController>

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 synchronized
with this element specified.

Sensor calls
Added <SensorBinder type = ""> You can bind the sensor data to the variables for
gravity sensing, orientation sensor, acceleration sensors, pressure sensors (altitude)
<VariableBinders>
// 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
<SensorBinder type = "orientation">
<Variable name = "" index = "0" />
<Variable name = "" index = "1" />
<Variable name = "" index = "2" />
</ SensorBinder>
// 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 +
<SensorBinder type = "linear_acceleration">
<Variable name = "linear_acceleration_x" index = "0" />
<Variable name = "linear_acceleration_y" index = "1" />
<Variable name = "linear_acceleration_z" index = "2" />
</ SensorBinder>
// Acceleration
type = "accelerometer"
index = 0: acceleration in the x direction
index = 1: acceleration in the y direction
index = 2: z direction acceleration
<SensorBinder type = "accelerometer">
<Variable name = "" index = "0" />
<Variable name = "" index = "1" />
<Variable name = "" index = "2" />
</ SensorBinder>
// 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
<SensorBinder type = "gravity">
<Variable name = "" index = "0" />
<Variable name = "" index = "1" />
<Variable name = "index =" 2 "/>
</ SensorBinder>
// Pressure Sensors
type = "pressure"

index = 0: barometric pressure units hPa. The average air pressure at sea level is 1013.25hPa, can be estimated based on t
<SensorBinder type = "pressure">
<Variable name = "" index = "0" />
</ SensorBinder>
</ VariableBinders>

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.