I want to add an button in right side of tableview row, I have seen rightImage property in UI.TableViewRow. Is it possible to override the image view or can we add button under rightImage
rowObject.rightImage.add(mybutton);
In your TableViewRow, create a globalView with horizontal layout
var globalView = Ti.UI.createView({
width: "100%",
layout: "horizontal",
...
});
Then create 2 other views, the leftView (width equals to 80% for example) and the rightView which contains a button (set the width to 20%), then add the leftView and the rightView to your globalView.
globalView .add(leftView);
globalView.add(rightView);
Make sure that you set correctly the height for your components.
Related
i have a class that extend: JSQLoadingPhotoMediaItem, all works fine expected that in my chat i do not use image for bubble, but i have a background color and radius for textView inside the bubble, if i use the class i obtain this:
The first one is the textView of the cell with a color background, the second one is a view that i return from class with this code:
view = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.mainScreen().bounds.width, height: 38))
view!.backgroundColor = UIColor(red:0.89, green:0.98, blue:0.78, alpha:1)
view!.layer.cornerRadius = CGFloat(9)
view!.layer.masksToBounds = true
in a function
override func mediaView() -> UIView!
How can i give the same right margin to my custom class? or if for example would like to have a view of custom class aligned center?
Thanks!
I also had the same problem. To get the same margin for my bubbles I resorted to using the same JSQMessagesMediaViewBubbleImageMasker from JSQMessagesMediaViewBubbleImageMasker.h in my custom media view
//apply mask to your view
[JSQMessagesMediaViewBubbleImageMasker applyBubbleImageMaskToMediaView:view isOutgoing:self.appliesMediaViewMaskAsOutgoing];
You can create a category of JSQMessagesMediaViewBubbleImageMasker and extend it however you wish, there was a particular case where I needed a specific color for the border of the bubble.
Thanks! i found a solutions, i have a clear background for the main view, and inside another subview with right or left margin based on sender, backgroundColor and corner radius!
I would like to animate a view.
I want the view to slide from the bottom to the top of the screen.
I wrote this code, but the view doesn't show up.
myWin.add(myView);
myView.height = '0%';
var expand= Ti.UI.createAnimation({
height: '100%',
duration: 300
});
myView.animate(expandView);
Reference is this document
#whitebear. In your problem, you want make the view slide to top from the bottom, but you had taken a wrong way. The way you had taken is a Shape Change Animation, which want to change the height of the view to make it. However it's will never get the sliding action you want, if your code work, what you will see is the view will get more and more bigger until fill the window, not a sliding action.
What you want is a Position Change Animation for the view. Just change the top value of the view can make it. Example:
var view = Ti.UI.createView({
top: '-100%', //the view can't be see at the bottom
width: '100%',
height: '100%',
backgroundColor: 'red'
});
var ani = Ti.UI.createAnimation({
top: 0, //show the view from the bottom to top
duration: 3000
});
view.animate(ani);
Just have a try, I hope this can help you. If you really want to change the height of the view to get the effect, maybe you can define a method to set the view height with the time. Good luck!
You should call animate method of view passing it reference of animation object you created.
myView.animate(expand);
For you requirement try this
var win = Ti.UI.createWindow({ backgroundColor : '#fff'});
var myView = Ti.UI.createView({backgroundColor : 'red'});
win.add(myView);
myView.height = '0%';
myView.bottom = '0'; // basically the view has been added at bottom of window
var expand= Ti.UI.createAnimation({
height: '100%',
duration: 1300
});
myView.animate(expand);// and you are only increasing the view's height in animate
I have a Cross-Platform app.
I use percentages to keep the aspect of the app similar for every screen size.
So i put a view height to
var view = Titanium.UI.createView({
borderRadius:10,
backgroundColor:'red',
height:"100%",
});
window.add(view);
The problem come when i show the keyboard.
The view is auto resized.
So i need that the keyboard goes OVER the view without resize it.
Note: If i use "dp"/"dpi" the height of the view is not the same in different screen devices.
Any suggestion?
I did not have this problem before, but there are several options having the same effect as 100% height:
height: Ti.UI.FILL
height: Ti.Platform.displayCaps.platformHeight
or you could achieve the same by setting the values for
left: 0, right: 0, top: 0, bottom: 0,
All of them should make a view fill the screen.
Please note that it might be necessary to handle orientation changes.
first you need to set top property then if it does not work then also set height with platformHeight.
It's not clear what your complete view looks like. Your example doesn't have a text entry type control which is what would trigger the keyboard opening.
You can create a separate view that contains the textArea and set this 2nd view with fixed positions. Then the main view should stay put.
I'm trying to position my views and have them resize automatically.
For this example, I have 3 views, a red, a blue and a green one, and they're all laid out in a window with a VERTICAL layout, and they all have a width of "100%":
var mainView = Ti.UI.createView({
backgroundColor : "white",
width : "100%",
height : "100%",
layout : "vertical"
});
var redView = Ti.UI.createView({
backgroundColor : "red",
width : "100%",
height : "40%",
});
mainView.add(redView);
var blueView = Ti.UI.createView({
backgroundColor : "blue",
width : "100%",
height : "30%",
});
mainView.add(blueView);
var greenView = Ti.UI.createView({
backgroundColor : "green",
width : "100%",
height : "30%"
});
mainView.add(greenView);
It looks good. Now I want to add controls to the red view, and I want a couple of things to happen:
I'll place a control in the red view, and it will have a MARGIN of 10 points/pixels in each direction.
When I resize the inner control, the RED view will automatically resize itself to accommodate the inner control, but will keep the 10 points margin from each direction.
The BLUE and the GREEN views will automatically reduce their sizes to take the rest of the screen.
Example:
var blackView = Ti.UI.createView({
backgroundColor : "black",
top : 10,
bottom : 10,
left : 10,
right : 10
});
...
...
blackView.height = blackView.height + 50;
When I increase blackView's height by 50, the following things should happen:
1) The height of redView should be increased by 50.
2) The height of blueView and greenView should be reduced by 25, and they should be automatically placed.
Any ideas how to achieve this automatic behavior?
There are couple of ways to do that.
Simple Method:
when you increase the size of inner view you have to increase the size of outer view and all other relative views should be decreased accordingly.
Recommended:
Use event listeners for it.
e.g
1. Fire a custom event when you change the size e.g
Ti.App.fireEvent("myViewSizeChanged",{newSize:"50",control:redview});
Listen this event call your computational method for resizing your each view.
e.g
Ti.App.addEventListener("myViewSizeChanged",function(e){
// here you can get the value of e
//e.newSize
//e.redView
});
both params will tell you the new size of which control... and you can adjust the rest of the view sizes accordingly
Is it possible to use a custom color or image for the white dot of the pagingControl in a Titanium.UI.Scrollableview?
var scrollableView =Titanium.UI.createScrollableView({
views:[view1,view2,view3],
showPagingControl:true,
pagingControlHeight:30,
pagingControlColor:'transparent',
width : 200,
height : 90,
left : 120,
top:40,
maxZoomScale:2.0,
currentPage:0
});
Answer (as you said) found on http://developer.appcelerator.com/question/130397/color-pages-dot-in-a-titaniumuiscrollableview#227004 :
sorry, i dont have an example.. but here is it:
create a container view.
then create the small "dot" views, and add them to the container view. set the positions.
there is an event, when the scrollable view "scrolls" or changing.. and you can set the small dot view to active (of course you should set up the active state as well)