In main.lua I create tabBar with three buttons and three screens (screen1, screen2, screen3)
In screen1 I would like to show modal overlay
local options = {
effect = "fromBottom",
time = 400,
isModal = true,
}
storyboard.showOverlay( "get", options )
Everything works, but I would like to show the overlay over tabBar (like modal view in xCode).
How can I do it?
In one case I should "goto" screen3 from screen1
storyboard.gotoScene( "screen3")
It's works, but selected tabButton is still tabButton1 (with screen1)
How to select tabButton programmatically?
Here is the code of creating tabBar in main.lua:
-- Create buttons table for the tab bar
local tabButtons = {
{
width = 32, height = 32,
defaultFile = "assets/tabIcon.png", overFile = "assets/tabIcon-down.png",
label = translations["tab1"][language],
onPress = function() storyboard.gotoScene( "screen1" ); end,
selected = true
},
{
width = 32, height = 32,
defaultFile = "assets/tabIcon.png", overFile = "assets/tabIcon-down.png",
label = translations["tab2"][language],
onPress = function() storyboard.gotoScene( "screen2" ); end,
},
{
width = 32, height = 32,
defaultFile = "assets/tabIcon.png", overFile = "assets/tabIcon-down.png",
label = translations["tab3"][language],
onPress = function() storyboard.gotoScene( "screen3" ); end,
}
}
--Create a tab-bar and place it at the bottom of the screen
local tabBar = widget.newTabBar {
top = display.contentHeight - 50,
height = 50,
width = display.contentWidth,
--backgroundFile = "assets/tabbar.png",
tabSelectedFrameWidth = 1,
tabSelectedFrameHeight = 49,
buttons = tabButtons
}
storyboard.gotoScene( "screen1", "crossFade", 200 )
I don't think you can show any image over the tab bar since it's a native object. The only way I could see it possibly working is by inserting the image and tabBar into a 2 groups. Then making the one display.newGroup() over the other one. I don't even think that will work though, but give it a shot.
Actually in Corona's case, if you are using widget.newTabBar(), they are Corona display objects. I think the issue you are running into is that storyboard objects live below any objects that are not being managed by storyboard.
Because your tabBar is typically not managed by storyboard it will sit on top of any storyboard scene, including overlays. To make this work the way you want, you would probably need to create a scene (call it menu.lua or tabbar.lua) that creates the tabBar in it's createScene function and make sure to add the tabBar to the scene's view. Now that scene is being managed by storyboard and your overlay can now cover it.
Related
I want to create a simple widget which is a progress bar that gets its value set to 1 when we click it with left mouse button.
local myFirstWidget = wibox.widget {
{
value = 0.5,
color = "#ff0000",
widget = wibox.widget.progressbar,
width = 100,
forced_height = 20,
shape = gears.shape.rounded_bar,
border_width = 2,
border_color = beautiful.border_color,
ticks = true,
clip = true,
margins = {top = 5, bottom = 5},
paddings = 2
},
layout = wibox.layout.fixed.horizontal
}
myFirstWidget:connect_signal("button::press",
function(w, _, _, btn) w.value = 1 end)
When I press the bar - nothing really happens. And if I use
w.set_value(1)
then clicking the bar shows an error
attempt to call a nil value (field 'set_value')
How do I make it work?
It turnes out that w is the "parent" widget which contains progressbar widget. So I had to do it this way
myFirstWidget:connect_signal("button::press", function(w)
local children = w:get_all_children()
children[1].value = 1;
end)
so basically I retrieve a table of all children widgets and then use [1] to refer to the first widget in the table and after that I assign a value to its property
In my menu.lua I have the following code:storyboard.gotoScene( "vegScreen" ), meaning: vegetable screen/menu
In the scene:createScene function of my vegScreen.lua I try to create a tabBar with 2 tabs. Using the following code:
local tabButtons = {
{
width = 50, height = 40,
defaultFile = "assets/tabIcon.png",
overFile = "assets/tabIcon-down.png",
label = "Per catagory",
onPress = function() storyboard.gotoScene( "catagory" ); end,
selected = true
},
{
width = 50, height = 40,
defaultFile = "assets/tabIcon.png",
overFile = "assets/tabIcon-down.png",
label = "All products",
onPress = function() storyboard.gotoScene( "all" ); end,
}
}
productBar = widget.newTabBar{ -- line 82
top = 65,
width = display.contentWidth,
backgroundFile = "assets/tabBar_background.png",
tabSelectedLeftFile = "assets/tabBar_background.png",
tabSelectedMiddleFile = "assets/tabBar_background.png",
tabSelectedRightFile = "assets/tabBar_background.png",
tabSelectedFrameWidth = 20,
tabSelectedFrameHeight = 52,
buttons = tabButtons
}
group:insert(productBar)
Using this code I get the following error:
http://i.imgur.com/0koV4PK.png
Line 82 in vegScreen.lua is where I create the new tabBar ( productBar = widget.newTabBar )
Though I don't know if the images I created are used correctly, it should show me something right? I have the module require statements at the top of my vegScreen.lua file (for storyboard and widget), created the catagory.lua and all.lua files which are located in the same folder as the vegScreen.lua and I have defined the group variable. Could somebody help me out? The error doesn't make any sense to me.
Not really an answer but I solved my problem. I had created files in which I used code to load content. I think the issue with that lies in not being able to add content to existing titanium views.
So what I did was deleted those files and created the views through code, which works like a charm.
i need some help,
im making an app in corona sdk which contains 4 scenes, main, list, tab1, tab2, the main scene takes you to the list scene by a button and the List takes you to tab1 and tab1 takes you to tab2, what im trying to do is make tab2 go back to the scene List by pressing a button, and when i press on the button nothing happens!!
local button1 = widget.newButton
{
left= 250,
top= 650,
defaultFile = "red1.png",
label = "select chapter",
font = "Arial",
fontSize = 34,
onEvent = handleButtonEvent,
onPress = function() storyboard.gotoScene( "list" ); end,
selected = true
}
You appear to be using a function to handle the event of the botton with "onEvent = handleButtonEvent"
You should instead use that function to do the transition:
-- Function to handle the press of the button
local function handleButtonEvent(event)
if ( "ended" == event.phase) then
storyboard.gotoScene("list")
end
end
and
-- Creation of the button
local button1 = widget.newButton
{
-- All your variables here
onEvent = handleButtonEvent,
}
and you might even be looking for something like this; this function will instead take the user back to the previous scene.
-- Function to handle the press of the button
local function handleButtonEvent(event)
if ( "ended" == event.phase) then
storyboard.gotoScene(storyboard.getPrevious())
end
end
I'm trying to build a tabbar in corona only using custom graphics for up/down states, and background. I find that corona adds left and right padding as the attached image & basic setup below shows. The images are both 32x32 and should fill the space exactly, instead there are black lines at either end and the buttons are forced to overlap.
I've tried every option available in the docs but with no success. Does anyone know if there's an undocumented option that overrides the automatic positioning of tabbar buttons?
-- table to setup buttons
local tabButtons = {
{ up="icon1.png", down="icon1-down.png", width = 32, height = 32, cornerRadius=0, onPress=onFirstView, selected=true },
{ up="icon2.png", down="icon2-down.png", width = 32, height = 32, cornerRadius=0, onPress=onSecondView },
}
-- create the actual tabBar widget
local tabBar = widget.newTabBar{
width=64, height=32,
buttons = tabButtons
}
Here's the output:
This is a known bug and is being addressed.
When I create a new UIDatePicker with its Mode set to a CountDownTimer, it renders poorly with a black background. Anyone have any insight?
Normal Picker looks like this:
CODE: Note the UIButton is a full screen button behind the picker to dismiss the view
intervalPicker = new UIDatePicker(new RectangleF(0, this.tvc.View.Bounds.Height - 135, this.tvc.View.Bounds.Width, 200));
intervalPicker.Mode = UIDatePickerMode.CountDownTimer;
intervalPicker.CountDownDuration = DeviceSession.CurrentBehavioralEvent.Duration*60;
intervalPicker.ValueChanged += new EventHandler(intervalPicker_EditingChanged);
UIButton b = UIButton.FromType(UIButtonType.Custom);
b.Opaque = false;
b.BackgroundColor = UIColor.Clear;
b.Frame = new RectangleF(0, 0, this.tvc.View.Bounds.Width, this.tvc.View.Bounds.Height);
b.TouchUpInside += (o, s) => {
intervalPicker.RemoveFromSuperview();
b.RemoveFromSuperview();
};
this.tvc.NavigationController.View.AddSubview(b);
this.tvc.NavigationController.View.AddSubview(intervalPicker);
The UIDatePicker in CountDownTimer mode displays this way when you set a frame height of less than 216. The other modes don't have this problem.
Your example is setting the height to 200.
Change the height to 216.