Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Implementing UI based on iOS 7+ / Google Material (?)
Started by paul.cardwell Mar 14 2016 06:53 AM

104 replies to this topic
ios android material flat
[TOPIC CONTROLS]
Page 3 of 5 1 2 3 4 5
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#51

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Well it's not suppose to do that :) ok can you send me a sample code. I will also write up a sample app and share it here. Send to: services at anedix dot com (email)

[TOPIC: post.html]
#52

Kevin H

[GLOBAL: userInfoPane.html]
Kevin H
  • Contributor

  • 131 posts
  • Corona SDK

I'll get that over to you this eve. Should also mention that I have this line comments out in mui-base.lua because I'm not using Composer:

 

 muiData.scene.name = composer.getSceneName("current")

 

Could that have anything to do with it?



[TOPIC: post.html]
#53

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

No it would be fine without it.

[TOPIC: post.html]
#54

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Here is an example using the latest release and I took out composer (it will remain in the official release).  Here is the archive.

-----------------------------------------------------------------------------------------
--
-- main.lua
--
-----------------------------------------------------------------------------------------

-- Your code here
local mui = require( "materialui.mui" )
local background = nil

--Hide status bar from the beginning
display.setStatusBar( display.HiddenStatusBar )

display.setDefault("background", 1, 1, 1)

background = display.newRect( 0, 0, display.contentWidth, display.contentHeight)
background.anchorX = 0
background.anchorY = 0
background.x, background.y = 0, 0
background:setFillColor( 1 )

mui.init()

-- pass name, value and callback data example
local passFood = function( event )
    local muiTargetName = mui.getEventParameter(event, "name")
    local muiTargetValue = mui.getEventParameter(event, "muiTargetValue")
    local muiTargetCallBackData = mui.getEventParameter(event, "muiTargetCallBackData")

    if muiTargetName ~= nil then
        print("name: " .. muiTargetName)
    end

    if muiTargetValue ~= nil then 
        print("value: " .. muiTargetValue)
    end

    if muiTargetCallBackData ~= nil then
        print("passed: "..muiTargetCallBackData.food)
    end
end

mui.newRoundedRectButton({
    name = "PassData", -- name of the mui widget
    text = "Pass Food",
    width = mui.getScaleVal(200),
    height = mui.getScaleVal(60),
    x = mui.getScaleVal(160),
    y = mui.getScaleVal(220),
    font = native.systemFont,
    gradientShadowColor1 = { 0.9, 0.9, 0.9, 255 },
    gradientShadowColor2 = { 0.9, 0.9, 0.9, 0 },
    gradientDirection = "up",
    textColor = { 1, 1, 1 },
    radius = 10,
    value = 100, -- the value to set and pass to event
    callBack = passFood, -- the callBack to pass the data to
    callBackData = {food="cookie"} -- data to pass to the event
})


[TOPIC: post.html]
#55

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Changes in release and a screen shot of the new widget. It resides in a scrollView:

  • Create a tile menu board with method 'newTileGrid' and tiles can be up to 2x in size by width only (be careful). See demo tile.lua and it's the last icon on bottom of first scene.  materialui/mui-tile.lua is the widget addition.
  • Touch Points added to newTileGrid() as an option.
  • Bug fixes and optimizations

tile-menu-1.png



[TOPIC: post.html]
#56

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Changes in release and a screen shot of "Open Dialog" which uses sprite sheet for on/off states.

  • Image buttons. These can be specified using a single image or two images (sprite sheet) for on/off states.  See menu.lua and look for "Open Dialog" for an example. See project wiki too https://github.com/arcadefx/material-ui/wiki/Buttons for more information.  The sprite sheets are those from Corona SDK and uses display.newImage() with the sheet and index of image to use.

open-dialog-graphic-button.png

 

Also working on newer button animation and starting on themes.  The below uses newNavBar(), newRoundedRectButton() and attachToNavBar().  "attachToNavBar()" can attach buttons and other mui widgets to the navigation bars.

 

button-rounded-and-rounded-outline.png

 

Download the above example: http://www.anedix.com/fileshare/buttons-example.zip

 

View example video here: https://youtu.be/ZgdS6kIFnss


Edited by paul.cardwell, 12 August 2016 - 12:29 PM.


[TOPIC: post.html]
#57

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Changes in release:

  • Added support for display.newImage() and display.newImageRect() via wrappers. See mui-image.lua for options. For an example usage see http://www.anedix.com/fileshare/login-form.zip and below is a screen shot of it.
  • Added "value" to both newTextField and newTextBox properties. This allows pulling the information later in another method.  Example: local email = mui.getWidgetProperty("textfield_email", "value")
  • Added "value" to all user input fields, buttons, toolbars, slide panels, tile panels, etc.  Use getWidgetProperty() to get the value for the widget name.
  • Fixed a bug in newRoundedRect() where it left a white outline on buttons that did not use a shadow gradient.
  • Other fixes.

login-image-example.png


Edited by paul.cardwell, 15 August 2016 - 06:09 PM.


[TOPIC: post.html]
#58

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Added

  • Shadow support to newRectButton(), newRoundedRectButton() and newCircleButton. Can specify to use shadow, set size of shadow and opacity of shadow.
  • "shadow" property to the above widget types and use mui.getWidgetProperty("widget_name", "shadow") to get the shadow.

shadow-floaty-button.gif


Edited by paul.cardwell, 17 August 2016 - 05:08 PM.


[TOPIC: post.html]
#59

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Changes in release:

  • Added new Documentation website for the library documentation. I borrowed ideas from the Corona SDK documentation flow. It's mobile compatible.
  • Bug fixes.


[TOPIC: post.html]
#60

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Changes in release:

  • Added new method newProgressCircle().  Creates an animated progress circle.  Updated API docs for it.

progress-circle-anim-v1.gif



[TOPIC: post.html]
#61

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Coming soon progress arc method based on time and percentage.  Special thanks to horacebury for mathlib.

 

Example video:

https://youtu.be/ISoU91exIpM



[TOPIC: post.html]
#62

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Changes in release:

  • Added newProgressArc() method to draw a time based progress arc.  It uses a background and foreground color combination. The progress indicator text in percent can be hidden.
  • Bug fixes.
  • Special thanks and credit to horacebury for mathlib.
  • Will update this thread with example source.

newProgressArc-Example-1.png



[TOPIC: post.html]
#63

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Working on the library.  Making cards, yep those wonderful info cards.   ;)   Going to add more objects to them.

 

card-bounce3.gif



[TOPIC: post.html]
#64

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Changes in release..

  • Added "isLocked" boolean param to newTableView() method. Use it to lock/unlock the ability to scroll.
  • Added "newPopover()" method. Allows you to create popover menu list.
  • Bug fixes in newTableView().

popover-example.png



[TOPIC: post.html]
#65

doubleslashdesign

[GLOBAL: userInfoPane.html]
doubleslashdesign
  • Contributor

  • 727 posts
  • Corona SDK

I would like see if if you are willing to add a few things to the newSlidePanel ( 1 add the ability images directly on the slide panel so someone could add a logo, 2 add image on the title bar as an under layer to give pop to the app).

 

What are the chances of that happening.



[TOPIC: post.html]
#66

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Sure, that can be added.  Let me look into it and see about getting it in there.  I did a partial implementation of it.  Oh, I never showed that part as it was a prototype.  But yes, images are possible.



[TOPIC: post.html]
#67

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

Changes: [0.1.49] - 2017-01-06

  • Added "useTimeOut" parameter to newToast(..) method.  useTimeOut is boolean.  This is used to automatically timeout and close the toast notification. It defaults to "true" and if no "timeOut" in microseconds is specified it defaults to 2000 or 2 seconds.
     
  • Added "timeOut" parameter to newToast(..) method.  timeOut is in microseconds.  This is used to automatically timeout and close the toast notification.
..and more changes on the way.
 
Online documentation:
 
 
GitHub resource:
 


[TOPIC: post.html]
#68

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

[0.1.50] - 2017-01-08

Added

  • Method "newSnackBar" for creating snack bar and action button text. These flow up from the bottom. Like "Removed Msgs UNDO" and it times out after 3 seconds. Use "timeOut" to specify timeout in microseconds.
  • See picture below for example.  The dark button near bottom with "UNDO" in name.

Change

  • Fixed all "parent" group/scene paramater for all controls. The demo is updated using a parent for all buttons. Click "coffee cup" to see all the controls slide up (snack bar).
  • Fixed case issue in build.settings for "CoronaWindowMovesWhenKeyboardApp" (iOS)

snack-bar-demo.jpg



[TOPIC: post.html]
#69

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

@doubledashdesign I am working on your request.  

 

[0.1.51] - 2017-01-09
Added
  • 'headerImage' parameter to newSlidePanel() method.  It will fit the image to the menu header dimensions.
See header image for title bar area below...
 
menu-mui-custom-header.jpg


[TOPIC: post.html]
#70

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

[0.1.52 and 0.1.53] - 2017-01-09

 

Added

  • 'iconImage' parameter to "newSlidePanel(..)" method. It will fit the image to the font size dimensions. This is so it will look correct. See demo and "list {}" for an example.
     
  • 'iconImage' parameter to "newToolbar(..)" method. It will fit the image to the font size dimensions. This is so it will look correct. See demo and "list {}" for an example.

See example of Menu using new Icon Images:

 

menu-mui-icon-image-example.jpg


Edited by paul.cardwell, 09 January 2017 - 08:00 PM.


[TOPIC: post.html]
#71

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

[0.1.55] - 2017-01-11

 

Added
  • 'iconColor' parameter to newToolbar(..) list {} options. Specify color in on state per icon.
  • 'iconColorOff' parameter to newToolbar(..) list {} options. Specify color in off state per icon.
  • 'iconColor' parameter to newSlidePanel(..) list {} options. Specify color in on state per icon.
  • 'iconColorOff' parameter to newSlidePanel(..) list {} options. Specify color in off state per icon.
Fixed
- Color bugs in newSlidePanel(..) and newToolbar(..) methods.
 
See a mix of icon images, icon symbols with multi-colors and basic colors.  The multi-colors are "Location Information" and the first "To-do" in the newSlidePanel(..) example shown here:
 
mui-menu-slidepanel-2-colors.jpg


[TOPIC: post.html]
#72

TheGiant

[GLOBAL: userInfoPane.html]
TheGiant
  • Observer

  • 25 posts
  • Corona SDK

Hello,

Can you please give me an example on how to hide the newSlidePanel by pressing a menu item.

Ans also how to keep that item selected (with gray color).

 

Thanks in advance.



[TOPIC: post.html]
#73

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

@TheGiant, will do and I just added individual 'callBacks' per menu item.  This way you can either use a single callBack or per menu item callBack if desired.   I will get these additions in place and update the repo and report back here.



[TOPIC: post.html]
#74

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

[0.1.59] - 2017-01-19

 
Added
  • 'closeSlidePanel()' method to close a newSlidePanel() widget by name.  This is now the default action if used the built-in callBack.  You may call this in your own callBacks.  This will close and release the menu from memory.

    Example: mui.closeSlidePanel("slidepanel-demo")
     
  • 'callBack' parameter added to each menu item.  If used this callBack will be called instead of the parent callBack for the entire newSlidePanel() widget.
  • 'callBackData' parameter added to each menu item. if used the data will be passed to the callBack being used.
  • Documentation updated to match and demo updated to use these.

@TheGiant and I will be addressing your requests too.



[TOPIC: post.html]
#75

paul.cardwell

[GLOBAL: userInfoPane.html]
paul.cardwell
  • Contributor

  • 153 posts
  • Corona SDK

[0.1.60] - 2017-01-19
 
Added
  • 'hideSlidePanel()' method to hide a newSlidePanel() widget by name. This can be used in your callBacks. This keeps the slide panel in memory and hides it.
  • 'showSlidePanel()' method to show a newSlidePanel() widget by name. This can be used in your callBacks. This uses the slide panel in memory and shows it.
See menu.lua for example.
 
@TheGiant.  I will look into the other request to keep the menu item selected.



[topic_controls]
Page 3 of 5 1 2 3 4 5
 
[/topic_controls]