Related
I'm trying to make the background of my BottomTabNavigator transparent.
I've tried setting the position to 'absolute', this makes the background transparent but now the tab bar is not clickable anymore. Does anyone knows a solution?
tabBarOptions: {
inactiveBackgroundColor : COLORS.TINTCOLOR,
activeBackgroundColor: COLORS.TINTCOLOR,
activeTintColor: COLORS.WHITE,
inactiveTintColor: COLORS.WHITE,
showLabel: false,
labelStyle: {
fontSize: 12
},
style: {
borderTopWidth: 0,
borderTopColor: COLORS.TINTCOLOR,
height: 50,
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'transparent',
borderTopLeftRadius: 25,
borderTopRightRadius: 25,
overflow: 'hidden',
},
},
I have a simple screen with an image and some text + a button on the bottom of the page. In portrait mode it looks good, but on landscape, the image, the text and the button are not displayed properly.
I am trying to make the image to adjust the size when the height is not enough but i cannot find a way to do that.
render() {
return (
<View style={styles.container}>
<View style={styles.bodyContainer}>
<Image style={styles.image}
source={require('./../../assets/images/server-info-icon.png')}
/>
<Text style={styles.serverDetailsText}>Server details</Text>
<Text style={styles.instructionText}>instruction</Text>
</View>
<View style={styles.buttonContainer}>
<TouchableHighlight style={styles.gotItButton}
onPress={() => this.props.navigation.goBack(null)}>
<Text style={styles.gotItButtonText}>GOT IT</Text>
</TouchableHighlight>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff'
},
bodyContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
buttonContainer: {
height: 82
},
gotItButton: {
backgroundColor: COLORS.BUTTONS_COLOR,
height: 46,
width: 288,
borderRadius: 25,
alignSelf: 'center',
position: 'absolute',
bottom: 18
},
gotItButtonText: {
textAlign: 'center',
paddingTop: 11,
paddingBottom: 13,
fontSize: 17,
fontFamily: CONSTANTS.DEFAULT_FONT,
fontWeight: CONSTANTS.TEXT_BOLD_WEIGHT,
color: COLORS.BUTTONS_TEXT_COLOR
},
image: {
maxHeight: 170,
maxWidth: 361,
marginBottom: 5
},
instructionText: {
color: COLORS.LABELS_COLOR,
fontSize: 15,
fontFamily: CONSTANTS.DEFAULT_FONT,
height: 36,
width: 206,
flexWrap: 'wrap',
textAlign: 'center',
marginTop: 2,
marginBottom: 2
},
serverDetailsText: {
color: COLORS.TEXT_COLOR,
fontSize: 17,
fontFamily: CONSTANTS.DEFAULT_FONT,
fontWeight: CONSTANTS.TEXT_BOLD_WEIGHT,
width: 206,
textAlign: 'center',
marginTop: 2,
marginBottom: 2
}
})
Sample Code
<Image style={{flex: 1,
width: null,
height: null}}
source={require('myimage')}
/>
please add Outer View with style use flex. then Inner Flex Varies to 0.1 to 1.
I am trying to get Squib to embed images. I have an excel doc (totm.xlsx) that has fields for Title, Gold, Description, etc. In the Excel doc, most of the cards have :A: or :M: in the description and I would like to replace those with a small SVG icon.
The following code coughs up 'unidentified local method [embed]' and a litany of other errors:
require 'squib'
Squib::Deck.new(cards: 54) do
background color: :white
data = xlsx file: 'totm.xlsx'
text str: data['Title'], x: 250, y: 55, font: 'Arial 12'
text str: data['Gold'], x: 65, y: 65, font: 'Arial 12'
text(str: data['Description'], x: 65, y: 600, font: 'Arial 12') do [embed]
embed.svg key: ':A:', width: 28, height: 28, file: 'battle-axe.svg'
embed.svg key: ':M:', width: 28, height: 28, file: 'burning-meteor.svg'
end
text str: data['Flavortext'], x: 65, y: 100, font: 'Arial 12'
text str: data['Type'], x: 65, y: 400, font: 'Arial 12'
save_sheet prefix: 'totm_sheet_', margin: 75, gap: 5, trim: 37
end
In the examples with embedding text, the code always uses a single named string, embed_text, but I would like to call an array of strings.
embed_text = 'Take 1 :tool: and gain 2 :health:.'
text(str: embed_text, font: 'Sans', font_size: [18, 32, 45],
x: 0, y: 0, width: 180, height: 300, valign: :bottom,
align: :left, ellipsize: false, justify: false, hint: :cyan) do |embed|
embed.svg key: ':tool:', width: 28, height: 28, file: 'spanner.svg'
embed.svg key: ':health:', width: 28, height: 28, file: 'glass-heart.svg'
end
You have brackets around your [embed]; as the code example shows, it should be using vertical bars, like |embed|.
I am wondering if someone can show me how to write this code so it resizes automatically for different screen sizes. I have 4 storyboards with different screen sizes and just want a way to show the code, if this storyboard then (numbers change) follow this code, else (numbers chafe according to storyboard size) this code.
I already tried resizing by adding to each axis number for example / 568 * size.frame.height after each y and height axis and same for x and width of course, but the code becomes too long and complex to read.
Ideally I'd like an if statement saying if this screen size then it's storyboard 'this' then go to this code..
pianoButtonsWaterDropFrames = [
cNote: (CGRect(x: 33 , y: 40 , width: 20, height: 35), CGRect(x: 33, y: 360, width: 20, height: 35)),
dNote: (CGRect(x: 66 , y: 42 , width: 20, height: 35), CGRect(x: 66, y: 360, width: 20, height: 35)),
eNote: (CGRect(x: 99 , y: 41 , width: 20, height: 35), CGRect(x: 99 , y: 360, width: 20, height: 35)),
fNote: (CGRect(x: 132, y: 48, width: 20, height: 35), CGRect(x: 132, y: 360, width: 20, height: 35)),
gNote: (CGRect(x: 165, y: 39, width: 20, height: 35), CGRect(x: 165, y: 360, width: 20, height: 35)),
aNote: (CGRect(x: 198, y: 57, width: 20, height: 35), CGRect(x: 198, y: 360, width: 20, height: 35)),
bNote: (CGRect(x: 231, y: 60, width: 20, height: 35), CGRect(x: 231, y: 360, width: 20, height: 35)),
cFourNote: (CGRect(x: 263, y: 54, width: 20, height: 35), CGRect(x: 263, y: 360, width: 20, height: 35))
]
Any help would be appreciated !
You can use HAS answer in this question to check, which iPhone your app is running on. Then you can use a switch statement and call different methods:
let modelName = UIDevice.currentDevice().modelName
switch modelName{
case "iPhone 3G", "iPhone 3GS":
method1()
case "iPhone 4", "iPhone 4S":
method2()
default:
println("no size found")
}
Below is my code for a pie chart:
legend: { margin: 1, padding: 4, layout: 'horizontal', align: 'center', verticalAlign: 'bottom', itemWidth: 189, borderWidth: 0, enabled: true, useHTML: false, labelFormatter: function () { return (this.y == 0 || this.y == null || this.y == '') ? "" : (this.name); }, itemMarginBottom: 8, itemStyle: { color: '#333333', fontWeight: 'bold', fontFamily: 'Arial', fontSize: '10px', lineHeight: '15px' }, symbolWidth: 11, x: -7, symbolPadding: 8 }
However the legend text is not bold till i change the font to 10.5 which i think is too big.
Below is the html generated in FF:THis happens in both Chrome and Firefox. IE is working fine.
<text x="19" y="13" style="font-family:Arial;font-size:10.4px;cursor:pointer;color:#333333;font-weight:bold;line-height:15px;fill:#333333;" text-anchor="start" zIndex="2">
Is there something I can do about this?
For me it is bolded, compare: http://jsfiddle.net/3bQne/233/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container2'
},
legend: {
margin: 1,
padding: 4,
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
itemWidth: 189,
borderWidth: 0,
enabled: true,
useHTML: false,
labelFormatter: function () {
return (this.y == 0 || this.y == null || this.y == '') ? "" : (this.name);
},
itemMarginBottom: 8,
itemStyle: {
color: '#333333',
//fontWeight: 'bold',
fontFamily: 'Arial',
fontSize: '10px',
lineHeight: '15px'
},
symbolWidth: 11,
x: -7,
symbolPadding: 8
},
series: [{
showInLegend: true,
type: 'pie',
data: [3.45, 4.21, 5.11]
}]
});
And image: