I've been searching for this answer but can't seem to find it.
I have a sectionHeader above a collection view. I added a button into the header but the function doesn't run. Mind taking a quick look for 1min and helping me out?
import UIKit
class SearchHeader: UICollectionViewCell {
let filterLbl: UILabel = {
let label = UILabel()
label.text = "Filter"
label.font = UIFont.systemFont(ofSize: 18)
return label
}()
let addFilterBtn: UIButton = {
let button = UIButton(type: .system)
button.setImage(#imageLiteral(resourceName: "addFilter").withRenderingMode(.alwaysOriginal), for: .normal)
button.addTarget(self, action: #selector(handleAddFilter), for: .touchUpInside)
return button
}()
func handleAddFilter(button: UIButton) {
print(1234)
}
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .white
addSubview(filterLbl)
addSubview(addFilterBtn)
filterLbl.anchor(top: topAnchor, left: leftAnchor, bottom: bottomAnchor, right: nil, paddingTop: 10, paddingLeft: 10, paddingBottom: 10, paddingRight: 0, width: 0, height: 0)
addFilterBtn.anchor(top: topAnchor, left: filterLbl.rightAnchor, bottom: bottomAnchor, right: nil, paddingTop: 10, paddingLeft: 5, paddingBottom: 10, paddingRight: 0, width: 0, height: 0)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
I found the answer.
lazy var addFilterBtn: UIButton = {
let button = UIButton(type: .system)
button.setImage(#imageLiteral(resourceName: "addFilter").withRenderingMode(.alwaysOriginal), for: .normal)
button.addTarget(self, action: #selector(handleAddFilter), for: .touchUpInside)
return button
}()
for some reason you have to change let into lazy var
Related
I have a large image on center of a page.
There are textboxes below the image. Once the user clicks on a textbox I want the image to move to top right corner of the page.
Here is the constructor of the class -
constructor(props) {
super(props);
const {theme} = props;
this.theme = theme;
//****Initial state of the image (centered aligned on the parent container)
this.state = {
imgDimensions: {height: 93, width: 206, alignSelf: 'center'},
keyboardOpen: false,
};
//********
this.moveIcon = this.moveIcon.bind(this);
this.unMoveIcon = this.unMoveIcon.bind(this);
this._keyboardDidShow = this._keyboardDidShow.bind(this);
this._keyboardDidHide = this._keyboardDidHide.bind(this);
this.animatedValue = new Animated.Value(0);
}
Now I am calling this method on textbox click to resize the image and move to top-right corner -
moveIcon() {
this.setState({
imgDimensions: {
height: 39,
width: 87,
alignSelf: 'flex-end',
top: getStatusBarHeight(),
//marginTop: 20,
position: 'absolute',
},
});
Can this movement from flex 'center' to 'flex-end' be animated?
Please let me know if I can provide more information.
Here is the Image code -
<Animated.Image
style={{
...this.state.imgDimensions,
}}
source={require('../../assets/images/logo_final.png')}
resizeMode="contain"/>
use this package
react-native-animatable
to Install
npm install react-native-animatable --save
I want to crop image in react native and using the below code,
var cropData = {
offset: {x: 0, y: 20},
size: {width: 20, height: 20},
displaySize: {width: 20, height: 20},
resizeMode: 'contain',
};
ImageEditor.cropImage(
uripath,
cropData,
(croppedImageURI) => {
console.log('succes', croppedImageURI);
},
(cropError) => {
console.log('fail', cropError);
}
);
In iOS, its working fine.
In andorid, i'm getting the below error
java.lang.Double cannot be cast to java.lang.String getString
Please help!
I have a list of items rendered in flatlist and I'm animating each of them.
In constructor I assign values for animations
constructor(props){
super(props);
this.state = { ... };
this.height = new Animated.Value(SCREEN_WIDTH/1.8);
this.width = new Animated.Value(SCREEN_WIDTH/2.5);
}
So I render items by index to get different values of them like this:
renderStyle
if(index == 0){
return {
marginRight: SCREEN_WIDTH / 35,
marginLeft: SCREEN_WIDTH / 35,
margin: SCREEN_WIDTH / 50,
width: this.width,
height: this.height,
opacity: this.state.opacity,
borderRadius: SCREEN_WIDTH / 36,
}
}
if(index == 1){
this.height.setValue(SCREEN_WIDTH/1.5);
return {
marginRight: SCREEN_WIDTH / 35,
marginLeft: SCREEN_WIDTH / 35,
margin: SCREEN_WIDTH / 50,
width: this.width,
height: this.height,
opacity: this.state.opacity,
borderRadius: SCREEN_WIDTH / 36,
}
}
then I animate the items when user press on it. Index = 0 animates correctly but index = 1 which I set the new value is not animating at all, I dont understand whats wrong with it? Can you explain me please?
Animation function:
Animated.parallel([
Animated.timing(this.width,{
toValue: SCREEN_WIDTH/1.2,
duration: 750
}),
Animated.timing(this.height,{
toValue: SCREEN_HEIGHT/1.2,
duration: 750
}),
Animated.timing(this.state.opacity,{
toValue: 0,
duration: 750
}),
]).start(() => this.props.go(item));
setTimeout(() => Actions.video({item: item}), 800);
Render
return
(
<Animated.View pointerEvents={this.state.pointer} onLayout={({nativeEvent}) => {
this.setState({
measurements: nativeEvent.layout
})
}}>
<TouchableOpacity onPress={this.captureAnimation.bind(this, item, index)}>
<AnimatedImage source={{uri: 'http://' + item.info.picture_path}} style={this.renderStyle(index)}/>
</View>
</TouchableOpacity>
</Animated.View>
);
This is a different JS file, so flatlist is working in home page and renderItem method gets the values in this JS file to be able to animate each of it.
Edit: I found a alternative solution but anyways its not still explaining why after set value animation is not working.
I want to change text of label and make its visiblity true from another controller.
win_drawer_governmentNotification.xml
<Label id="filterCount" text="2"></Label>
win_drawer_governmentNotification.tss
"#filterCount":{
borderRadius: 100,
borderWidth: 1,
borderColor: "#f26418",
left: 46,
color: "#fff",
backgroundColor: "#f26418",
top: 15,
width: "8%",
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
verticalAlign: Titanium.UI.TEXT_VERTICAL_ALIGNMENT_CENTER,
visible : false,
font: {
fontSize: Alloy.CFG.fonts.f_10,
fontFamily: Alloy.CFG.font_family.calibri
}
},
Now I want to change text of label filterCount from another controller in a function
I tried below code.
win_drawer_governmentNotification_filter.js
function applyFilter(e) {
var controller = Alloy.createController('win_drawer_governmentNotification');
Ti.API.info('controller = ' + controller);
var filterLabel = controller.filterCount;
Ti.API.info('filter label = ' + filterLabel);
Ti.App.fireEvent("win_drawer_governmentNotification:filterCount", {
text : "1",
visible : true
});
win_drawer_governmentNotification_filter.xml
<View id="view_apply_main" onClick="applyFilter">
<View id="view_apply">
<Label id="lbl_apply" text="APPLY FILTERS"/>
</View>
</View>
I tried different solutions from stackoverflow still haven't found solution like in
win_drawer_governmentNotification_filter.js
controller.filterCount.text = "1";
controller.filterCount.visible = true;
Can someone please help me what I am doing wrong? I am new to titanium.
Thanks in advance.
I am trying to add controls programmatically in titanium alloy.
I did the fallowing code but it not working i don't know why??
XML
<Alloy>
<Window class="container">
<View id="TextOrders">
<ScrollView id="scrollView" showVerticalScrollIndicator="true" showHorizontalScrollIndicator="true" >
</ScrollView>
</View>
</Window>
</Alloy>
Controller
var args = arguments[0] || {};
var TextOrders = Ti.UI.createView({
backgroundColor:'white'
});
function createRow(i) {
var row = Ti.UI.createView({
backgroundColor: 'white',
borderColor: '#bbb',
borderWidth: 1,
width:'100%', height: 70,
top: 0, left: 0
});
var inputTextField = Ti.UI.createTextField({
hintText: 'Enter value ' + i,
keyboardType: Ti.UI.KEYBOARD_NUMBERS_PUNCTUATION,
top: 10, left: '10%',
width: '80%', height: 60
});
row.add(inputTextField);
return row;
}
var scrollView = Ti.UI.createScrollView({
bottom:120,
contentHeight: 'auto',
layout: 'vertical',
backgroundColor: 'red',
height:'58%'
});
for(var i = 0; i <= 20; i++){
var row = createRow(i);
scrollView.add(row);
}
TextOrders.add(scrollView);
tss
".container" : {
backgroundColor:"white"
}
"#TextOrders":{
width:'100%',
height:'57%',
borderColor:'red',
borderWidth:'1px',
top:'0px',
}
"#scrollView":{
width:'80%',
borderColor:'blue',
borderWidth:'1px',
top:'0px',
height:'80%',
}
It does not giving me any error but controls is not getting added.
TextOrders.add(scrollView);
should be:
$.TextOrders.add(scrollView);