MAML Tutorial (MIUI Theme)

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 ...

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 , 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: ... 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 ... 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: system settings, in addition to other things you Image elements identical, animations, and other this element does not display wallpaper. There /> Variable variable 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: The code represents the value of # time3 every change of 1, it will execute all commands 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 variable array ... ... 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, -> // Display the English Month = "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 # 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 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 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" -> "4月6日3: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 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: ... // SrcExp: Picture source expression Digital Pictures 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 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 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. 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. 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 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 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. // 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 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. <-! Show the target position if pressed trying to unlock -> <-! Show specified image when reached target, if touch up then perform unlock -> <- Slider path of tolerance:! After the start trigger action path when moving the maximum distance exceeds this value will be canceled = "" tolerance = ""> = "" y = "" /> = "" y = "" /> Examples: 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 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.

MAML Tutorial (MIUI Theme)

Recommend Documents