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 4 of 5 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]
#76

TheGiant

[GLOBAL: userInfoPane.html]
TheGiant
  • Observer

  • 25 posts
  • Corona SDK

@paul.cardwell

Thank you very much!

Perfect implementation. :)



[TOPIC: post.html]
#77

paul.cardwell

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

  • 153 posts
  • Corona SDK

Changes
 
[0.1.61] - 2017-01-20
Added
  • 'iconImage' parameter to newTileGrid() list options. Allows a tile to use an image (jpg/png) instead of icon font text.
  • 'fontIsScaled' parameter to newTileGrid(). Defaults to true.  If true scale the font to fit the width of the tile. If false let the user define the font to any size.
  • 'fontSize' parameter to newTileGrid(). Sets the overall font size for icon and text.
  • 'parent' parameter to newTileGrid().  If used it will place the newTileGrid widget into the group/parent.
See "iconImage" in use in the pic below (first row, middle tile):
 
newtilegrid-shot-icon.jpg


[TOPIC: post.html]
#78

paul.cardwell

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

  • 153 posts
  • Corona SDK

Changes
 
[0.1.63] - 2017-01-24
Added
  • 'trimFakeTextAt' parameter to newTextField() and newTextBox() options. Trim the text displayed when not editing to 1..Number and add ".." on end.
  • 'textFieldFontSize' parameter to newTextField() options. Sets font size used in text field.
  • 'textBoxFontSize' parameter to newTextBox() options. Sets font size used in text box.
  • 'fontSize' parameter to both newTextField() and newTextBox() to set the label size.
Fixed
  • Font size of textboxes were really small. Now it sets the font and the size appropriately.


[TOPIC: post.html]
#79

paul.cardwell

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

  • 153 posts
  • Corona SDK

[0.1.66] - 2017-01-27
 
Added
  • MaterialIcons-Regular.otf font file to support older devices. This is partially implemented but required now for installation.  Be sure to copy it to the same folder where "MaterialIcons-Regular.ttf" resides.
  • 'isFontIcon' a boolean for newIconButton, newCircleButton, newToolbarButton, basically where there is an Icon this is needed.  Backwards compatibility included.  Use "isFontIcon" in the options for the methods and if true it will use the codepoint for the Material icon font.
Changes
  • fixed issues with fonts and Material design font.
  • many bug fixes and now supports Android KitKat 4.4.4 - Nougat 7.x. Android Icecream and Jelly Bean should work.  However, anything older than Android 4.x is "not" supported at this time. I need more research for Android versions < 4.

 



[TOPIC: post.html]
#80

paul.cardwell

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

  • 153 posts
  • Corona SDK

[0.1.68] - 2017-01-28
Added
  • "mui.materialFont" variable. The font is mapped to use "MaterialIcons-Regular.ttf" or "MaterialIcons-Regular.otf" font icons.  The font is automatically assigned to the variable and is  determined by mobile OS compability.  This is optional usage, but can help so there are no 'hard coded' fonts to replace.


[TOPIC: post.html]
#81

paul.cardwell

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

  • 153 posts
  • Corona SDK

[0.1.69] - 2017-02-01
Changes
  • removed dependency of utf8 plugin. This may be added back in future versions.  For now it simplifies the installation and not requiring Internet access to build in simulator.  A pure lua utf8 method was put in place to handle the requirements.  Feel free to use the utf8 plugin as the method here will not conflict with it. uft8 plugin is awesome for internationalization.
     
  • "newSlidePanel" now will highlight the last menu item selected. This requires the methods hideSlidePanel() and showSlidePanel(). Use these in your callbacks.
     
  • Fixed some bugs.


[TOPIC: post.html]
#82

paul.cardwell

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

  • 153 posts
  • Corona SDK

[0.1.70] - 2017-02-02
Changes
  • 'newSlidePanel()' events fixed. Now the menu stays resident and hides/shows instead of destroying the menu. Menu is destroyed when switching scenes or when removeSlidePanel("name") is called.  It will also highlight the current selected item.


[TOPIC: post.html]
#83

paul.cardwell

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

  • 153 posts
  • Corona SDK

[0.1.71] - 2017-02-03
Changes
  • 'newTableView()' added support for multiple columns. See menu.lua and options for a row called "columns" which defines the columns (text, value, align).  Each row supports: text, value, font, fontSize, fillColor, isCategory.
  • 'newTableView()' see 'columnOptions' in options to set the width per column.
  • 'getTableViewProperty()' added 'list' to be able to access the list table (list = {}) for the rows or rows and columns.
  • 'onRowTouchDemo()' added example of pulling column data.
  • 'onRowTouchDemo()' added 'hidden' example of changing a rows color when clicked.
  • bug fixes
newtableview-multi-column.jpg


[TOPIC: post.html]
#84

paul.cardwell

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

  • 153 posts
  • Corona SDK

[0.1.73] - 2017-02-17
Changes
  • newRoundedRectButton() and newRectButton() can now show an icon from material font or an image (jpg/png) to the left of the button text. See docs, example and list of options includes: iconText, iconFont, iconFontColor, iconImage.
  • Fixed bug in newSlidePanel() not showing when button clicked after click on darkened portion of screen.
  • Fixed "fun.lua" newSlidePanel() example and custom methods to hide/show the menu are optional.
  • Fixed a Lua table no longer used but referenced.
    (Thanks to "The Giant" for reporting the issues)

Edited by paul.cardwell, 16 February 2017 - 06:25 PM.


[TOPIC: post.html]
#85

paul.cardwell

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

  • 153 posts
  • Corona SDK

[0.1.77] - 2017-02-23
Changes
 
  • newSlidePanel() supports swipe gestures to open and close the menu.
  • newSlidePanel() 'isVisible' added to options of slide panel. If present, hide the slide panel and reveal once a button is touched or swipe gestures. See main.lua for demo.
mui-gestures.jpg


[TOPIC: post.html]
#86

NeverAgain

[GLOBAL: userInfoPane.html]
NeverAgain
  • Observer

  • 13 posts
  • Corona SDK

Hy!

First of all, THANKS for this great work!

Then, I have made a little modify to your code because I need to work with a newSelect and only on procedure call I can insert the correct list. If I have (like in my case) a DB with the options for the select, how can I insert dynamically? I answer myself making the "list" parameter NOT a list written directly on the call, but I use an array with the same structure (key, text, value, isCategory) created from a procedure that reads a DB table.

local arrayList1 = {}
for ii=1, table.maxn(PageArray.MenuChoices) do 
	arrayList1[ii]= {}
	arrayList1[ii].key = ii
	arrayList1[ii].text = PageArray.MenuChoices[ii].caption
	arrayList1[ii].value = PageArray.MenuChoices[ii].caption
	arrayList1[ii].isCategory = false
	arrayList1[ii].backgroundColor = {1,1,1,1}
end 

On a generic call I use something like:

mui.newSelect({
	name = "combo2_List",
	labelText = "label1",
...
        list =  -- if 'key' use it for 'id' in the table row
		arrayList1
		,
})

After this call, I have to read the correct values that I pass, so I modify mui-select.lua on "function M.newSelect(options)" line 178 :

	muiData.widgetDict[options.name].list = {}
	muiData.widgetDict[options.name].list = options.list

The last modify is when you open the tableview for the selection on "function M.revealTableViewForSelector(name, options)" line 240

list = muiData.widgetDict[options.name].list

I hope to be useful to otherelse.

Thanks again.

Albert



[TOPIC: post.html]
#87

paul.cardwell

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

  • 153 posts
  • Corona SDK

Hi Albert,  I can make it dynamic and will base it off your requirements.



[TOPIC: post.html]
#88

MBD

[GLOBAL: userInfoPane.html]
MBD
  • Contributor

  • 386 posts
  • Corona SDK

Hi everyone. I've been experimenting with this framework for a new project but the transitions end in blank or malformed scenes in the default project file on iOS 10 (device testin, not SIM). Sometimes it closes the demo app all together. 

 

Just checking to see if there is an updated version somewhere I can download?

 

The source github I've been using is from: https://github.com/arcadefx/material-ui



[TOPIC: post.html]
#89

paul.cardwell

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

  • 153 posts
  • Corona SDK

@MDB

Just out of curiosity, are you using an iPhone/iPad?  I have access to an iPad Air and will try it out on it.  The testing has mainly been on simulator, Android (Phone, Tablet) but I had others tell me about iOS.  Send me a screen shot or two of what it's doing: services at anedix.com



[TOPIC: post.html]
#90

MBD

[GLOBAL: userInfoPane.html]
MBD
  • Contributor

  • 386 posts
  • Corona SDK

Paul, using the iphone 7+ for testing on 10.2. I'd love to send screenshots but the app just dies when I attempt to change scenes. Everything else (other elements) seem to be just fine.

 

I do have an xcode crash log for you if that helps:

 

Mar 14 16:53:59 mobiletester locationd[1420] <Info>: WltStep, ScanResultAps, <private>, clients?, <private>, doCalc, <private>, knownAps, <private>

Mar 14 16:53:59 mobiletester ReportCrash(CrashReporterSupport)[2559] <Notice>: cr_update: <private>
Mar 14 16:53:59 mobiletester ReportCrash(CrashReporterSupport)[2559] <Notice>: cr_update: <private>
Mar 14 16:53:59 mobiletester locationd[1420] <Notice>: message 'kCLConnectionMessageWatchdog' received from client '/System/Library/LocationBundles/MagicalMoments.bundle'
Mar 14 16:53:59 mobiletester ReportCrash[2559] <Notice>: __crash_info: '<private>'
Mar 14 16:53:59 mobiletester ReportCrash[2559] <Notice>: __crash_info: '(null)'
Mar 14 16:53:59 mobiletester SpringBoard[60] <Notice>: Process exited: <FBApplicationProcess: 0x11700df60; material-ui-mas; pid: -1> -> <FBApplicationProcessExitContext: 0x17645d460; exitReason: (none); terminationReason: (none)>
Mar 14 16:53:59 mobiletester SpringBoard(FrontBoard)[60] <Info>: setting object for key=SBDefaultStatusBarStyleKey bundleID=<private> object=(null)
Mar 14 16:53:59 mobiletester SpringBoard(FrontBoard)[60] <Info>: updating cache key=SBDefaultStatusBarStyleKey bundleID=<private> object=(null)
Mar 14 16:53:59 mobiletester SpringBoard(FrontBoard)[60] <Info>: setting object for key=SBDefaultStatusBarHiddenKey bundleID=<private> object=(null)


[TOPIC: post.html]
#91

paul.cardwell

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

  • 153 posts
  • Corona SDK

Ah, so the issue is when you change the scene it dies.  I think I might know the issue. What happens if you by-pass "mui" scene switch and use a button and a custom method to ..

 

composer.removeScene(<scene name>)

composer.gotoScene(<scene name>)

 

Does it still immediately fail?



[TOPIC: post.html]
#92

paul.cardwell

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

  • 153 posts
  • Corona SDK

I have an iPhone 6 and upgraded to 10.2.1 (not a 7 series, but  :) ).   I went through the Developer set up for a new App which was awesome documentation (thanks Coronalabs!).  It compiled and installed.

 

Running the App and going to different scenes worked without issue. I did find a bug which I just fixed in the date and time picker controls.  The bug was causing the App to die.   I used https://github.com/arcadefx/material-ui and built the App using it and Corona SDK build 2017.3056.

 

@MDB, could you confirm you have the latest release?  Also note there have been a number of changes in how things work recently.

 

-Paul


Edited by paul.cardwell, 15 March 2017 - 07:32 AM.


[TOPIC: post.html]
#93

MBD

[GLOBAL: userInfoPane.html]
MBD
  • Contributor

  • 386 posts
  • Corona SDK

Paul, yes - Corona build 3056, compiled to device, and changing scenes causes app failure to home screen on iOS 10.2 / iphone 7 plus.

 

I did find some Corona logs that might help, this shows up about 70 times just before the app dies.

 

Device] CoreAnimation: failed to allocate 6291488 bytes

 
What changes in the way things work, are you referring to? I have both the latest Corona build, and copy of the Materials UI framework for Corona.
 
Thanks,


[TOPIC: post.html]
#94

paul.cardwell

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

  • 153 posts
  • Corona SDK

@MDB, that's weird. I will go review the scene switching and refactor it.



[TOPIC: post.html]
#95

paul.cardwell

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

  • 153 posts
  • Corona SDK

[0.1.80] - 2017-03-16
Changes
- getOrientation() gets the current orientation as locked. mui only supports Portrait or Landscape. It cannot be both at this time.
- setSceneToSwitchToAfterDestroy([name]) to override what scene to go to after mui.destroy() executes.
- 'sceneTransitionAnimation' parameter for scene transitions. Is boolean and if "true" (default) it will animate before going to next scene.  If "false" it will not animate and go to next scene immediately.  See menu.lua for an example.
- muiData.parent variable is replaced with mui.getParent() method. muiData.parent is still supported but will be deprecated in the future.
 
Fixes
- Fixed getScaleVal() and orientation issues. This was causing issues on device and in emulator. Issues like crashing since the device could be rotated, flipped etc messing up the calculations. Again use a locked position for now in "mui" and go with Portrait or Landscape. These in any "portait" or "landscape" orientation, but not both "portrait" and "landscape"
- Using a new animation for switching between scenes. It's smoother.
- Re-did the order of mui.destroy() and now it will cancel all "transitions" before proceeding to destroy.


[TOPIC: post.html]
#96

NeverAgain

[GLOBAL: userInfoPane.html]
NeverAgain
  • Observer

  • 13 posts
  • Corona SDK

Hy again!

I hope on a future release with my modify :)

Can I suggest you to put on mui.lua an initial comment with the version? It can be useful.

I find two things to fix: First is the multiline textbox. If the lines are too much to display, they are not cutted, but they fullfill the entire space.

listerror.png

 

The second fix is on the combobox style. On the right of the textfield always appears a "keyboard_arrow_down"?

It happens only to me?

menukeyarrowdown.png

 

Thanks for all you incredible work!

Albert

 

P.S. : I'm working on a Win7 64bit & CoronaSDK 2017.3044(2017.2.23)



[TOPIC: post.html]
#97

paul.cardwell

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

  • 153 posts
  • Corona SDK

Hi, I can address the overflow of text and see why the codepoint is showing in Windows.  And yes, I will work in your modification too. :)



[TOPIC: post.html]
#98

paul.cardwell

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

  • 153 posts
  • Corona SDK

[0.1.84] - 2017-03-17
Changes
- setSelectorList() method added to set the named drop-down selector with the contents of a list. This makes it easier to dynamically change the list after declaration.  See commented out example in fun.lua.
- setSelectorValue() method added to set the named drop-down selector's current text and value content.
Both methods above are listed in the documentation too.  See documentation for it here.
 
 
Fixes
- Fixed newTextBox() contents overflowing out of defined area. The text is now in a container and the text is always aligned to the top (shows first line of content on down).
- Made it so Windows simulator uses the utf8 assist for the codepoint of the material font. Be sure the "MaterialIcons-Regular.otf" and MaterialIcons-Regular.ttf are in your project root.  This showed the correct drop down arrow and not the 'text code' for the drop down. 

Edited by paul.cardwell, 17 March 2017 - 11:09 AM.


[TOPIC: post.html]
#99

paul.cardwell

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

  • 153 posts
  • Corona SDK

[0.1.86] - 2017-03-18
Changes
  • newTextBox() improved editing experience on mobile
  • newTextBox() options for "doneButton" and for the overlay.  Due to mobile devices not having an easy way to edit text boxes an overlay w/ "done" button (on right of textbox) has been added.  The overlay and button is "not" used on non-mobile devices.  Please see documentation and fun.lua for a complete example.  This makes editing in a textbox easier on mobile.


[TOPIC: post.html]
#100

lsoaresesilva7

[GLOBAL: userInfoPane.html]
lsoaresesilva7
  • Observer

  • 24 posts
  • Corona SDK


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