PEMROGRAMAN MOBILE

Dosen Pengampu : I Ketut Resika Artana, S.T., M.Kom.

OLEH :

Nama : Ni Made Yuni Suardani

NIM : 1715051052

Kelas : 4C

Prodi : Pendidikan Teknik Informatika

Fakultas Teknik dan Kejuruan

Universitas Pendidikan Ganesha

Singaraja 2019
B. Latihan Layout dengan flexbox
1. Persiapan Sebelum Latihan Layout

Code pada BelajarLayout.js

import React from 'react';
import React from 'react';
import {StyleSheet, Text, View } from 'react-native';

export default class BelajarLayout extends React.Component {

render() {
return (
<View style={styles.containerMain}>

</View>
);
}
}

const styles = StyleSheet.create({

containerMain: {
backgroundColor: 'blue',
flex:1,
},
});
 Code pada App.js

import React from 'react';

import BelajarLayout from './src/01Layout/BelajarLayout';

export default class App extends React.Component {

render() {
return (
<BelajarLayout/>

);
}
}

Jika dijalankan hasilnya seperti gambar dibawah ini

 2. Flex
Code pada BelajarLayout.js
import React from 'react';
import {StyleSheet, Text, View } from 'react-native';

export default class BelajarLayout extends React.Component {

render() {
return (
<View style={styles.containerMain}>
<View style={styles.box1}>
<Text style={styles.text}>1</Text>
</View>
<View style={styles.box2}>
<Text style={styles.text}>2</Text>
</View>
<View style={styles.box3}>
<Text style={styles.text}>3</Text>
</View>
</View>
);
}
}

const styles = StyleSheet.create({

containerMain: {
backgroundColor: 'blue',
flex: 1,
},
box1: {
flex: 1,
backgroundColor: 'green',
},
box2: {
flex: 1,
backgroundColor: 'yellow',
},
box3: {
flex: 1,
backgroundColor: 'red',
},

text: {
fontSize: 50
},
});
 Jika dijalankan hasilnya seperti gambar dibawah ini

Code pada BelajarLayout.js

import React from 'react';
import {StyleSheet, Text, View } from 'react-native';

export default class BelajarLayout extends React.Component {

render() {
return (
<View style={styles.containerMain}>
<View style={styles.box1}>
<Text style={styles.text}>1</Text>
</View>
<View style={styles.box2}>
<Text style={styles.text}>2</Text>
</View>
<View style={styles.box3}>
<Text style={styles.text}>3</Text>
</View>
</View>
);
}
}

const styles = StyleSheet.create({

containerMain: {
backgroundColor: 'blue',
flex: 1,
},
box1: {
flex: 1,
backgroundColor: 'green',
},
box2: {
flex: 2,
backgroundColor: 'yellow',
},
box3: {
flex: 1,
backgroundColor: 'red',
},

text: {
fontSize: 50
},
});

Jika dijalankan hasilnya seperti gambar dibawah ini

 3. Flex Direction
Code pada BelajarLayout.js
import React from 'react';
import {StyleSheet, Text, View } from 'react-native';

export default class BelajarLayout extends React.Component {

render() {
return (
<View style={styles.containerMain}>
<View style={styles.box1}>
<Text style={styles.text}>1</Text>
</View>
<View style={styles.box2}>

<Text style={styles.text}>2</Text>
</View>
<View style={styles.box3}>
<Text style={styles.text}>3</Text>
</View>
</View>
);
}
}

const styles = StyleSheet.create({

containerMain: {
backgroundColor: 'blue',
flex: 1,
flexDirection: 'row',
},
box1: {
flex: 1,
backgroundColor: 'green',
},
box2: {
flex: 2,
backgroundColor: 'yellow',
},
box3: {
flex: 1,
backgroundColor: 'red',
},

text: {
fontSize: 50
 },
});

Jika dijalankan hasilnya seperti gambar dibawah ini

Code pada BelajarLayout.js

import React from 'react';
import {StyleSheet, Text, View } from 'react-native';

export default class BelajarLayout extends React.Component {

render() {
return (
<View style={styles.containerMain}>
<View style={styles.box1}>
<Text style={styles.text}>1</Text>
</View>
<View style={styles.box2}>
<Text style={styles.text}>A</Text>
<Text style={styles.text}>B</Text>
<Text style={styles.text}>C</Text>
</View>
<View style={styles.box3}>
<Text style={styles.text}>3</Text>
</View>
 </View>
);
}
}

const styles = StyleSheet.create({

containerMain: {
backgroundColor: 'blue',
flex: 1,
flexDirection: 'row',
},
box1: {
flex: 1,
backgroundColor: 'green',
},
box2: {
flex: 2,
backgroundColor: 'yellow',
},
box3: {
flex: 1,
backgroundColor: 'red',
},

text: {
fontSize: 50
},
});
 Jika dijalankan hasilnya seperti gambar dibawah ini

Code pada BelajarLayout.js

import React from 'react';
import {StyleSheet, Text, View } from 'react-native';

export default class BelajarLayout extends React.Component {

render() {
return (
<View style={styles.containerMain}>
<View style={styles.box1}>
<Text style={styles.text}>1</Text>
</View>
<View style={styles.box2}>
<Text style={styles.text}>A</Text>
<Text style={styles.text}>B</Text>
<Text style={styles.text}>C</Text>
</View>
<View style={styles.box3}>
<Text style={styles.text}>3</Text>
</View>
</View>
);
 }
}

const styles = StyleSheet.create({

containerMain: {
backgroundColor: 'blue',
flex: 1,
flexDirection: 'row',
},
box1: {
flex: 1,
backgroundColor: 'green',
},
box2: {
flex: 2,
backgroundColor: 'yellow',
flexDirection: 'row',
},
box3: {
flex: 1,
backgroundColor: 'red',
},
text: {
fontSize: 50
},
});

Jika dijalankan hasilnya seperti gambar dibawah ini

 4. JustifyContent
Code pada BelajarLayout.js
import React from 'react';
import {StyleSheet, Text, View } from 'react-native';

export default class BelajarLayout extends React.Component {

render() {
return (
<View style={styles.containerMain}>
<View style={styles.box1}>
<Text style={styles.text}>1</Text>
</View>
<View style={styles.box2}>
<Text style={styles.text}>A</Text>
<Text style={styles.text}>B</Text>
<Text style={styles.text}>C</Text>
</View>
<View style={styles.box3}>
<Text style={styles.text}>3</Text>
</View>
</View>
);
}
}

const styles = StyleSheet.create({

containerMain: {
backgroundColor: 'blue',
flex: 1,
flexDirection: 'column'
},
box1: {
flex: 1,
backgroundColor: 'green',
},
box2: {
flex: 2,
backgroundColor: 'yellow',
flexDirection: 'column',

},
box3: {
flex: 1,
 backgroundColor: 'red',
},

text: {
fontSize: 50
},
});

Jika dijalankan hasilnya seperti gambar dibawah ini

Code pada BelajarLayout.js

import React from 'react';
import {StyleSheet, Text, View } from 'react-native';

export default class BelajarLayout extends React.Component {

render() {
return (
<View style={styles.containerMain}>
<View style={styles.box1}>
<Text style={styles.text}>1</Text>
</View>
<View style={styles.box2}>
<Text style={styles.text}>A</Text>
<Text style={styles.text}>B</Text>
<Text style={styles.text}>C</Text>
 </View>
<View style={styles.box3}>
<Text style={styles.text}>3</Text>
</View>
</View>
);
}
}

const styles = StyleSheet.create({

containerMain: {
backgroundColor: 'blue',
flex: 1,
flexDirection: 'column'
},
box1: {
flex: 1,
backgroundColor: 'green',
},
box2: {
flex: 2,
backgroundColor: 'yellow',
flexDirection: 'column',
justifyContent: 'center'
},
box3: {
flex: 1,
backgroundColor: 'red',
},

text: {
fontSize: 50
},
});
 Jika dijalankan hasilnya seperti gambar dibawah ini

Code pada BelajarLayout.js

import React from 'react';
import {StyleSheet, Text, View } from 'react-native';

export default class BelajarLayout extends React.Component {

render() {
return (
<View style={styles.containerMain}>
<View style={styles.box1}>
<Text style={styles.text}>1</Text>
</View>
<View style={styles.box2}>
<Text style={styles.text}>A</Text>
<Text style={styles.text}>B</Text>
<Text style={styles.text}>C</Text>
</View>
<View style={styles.box3}>
<Text style={styles.text}>3</Text>
 </View>
</View>
);
}
}

const styles = StyleSheet.create({

containerMain: {
backgroundColor: 'blue',
flex: 1,
flexDirection: 'column'
},
box1: {
flex: 1,
backgroundColor: 'green',
},
box2: {
flex: 2,
backgroundColor: 'yellow',
flexDirection: 'column',
justifyContent: 'space-between',

},
box3: {
flex: 1,
backgroundColor: 'red',
},

text: {
fontSize: 50
},
});
 Jika dijalankan hasilnya seperti gambar dibawah ini

5. AlignItems
Code pada BelajarLayout.js
import React from 'react';
import {StyleSheet, Text, View } from 'react-native';

export default class BelajarLayout extends React.Component {

render() {
return (
<View style={styles.containerMain}>
<View style={styles.box1}>
<Text style={styles.text}>1</Text>
</View>
<View style={styles.box2}>
<Text style={styles.text}>A</Text>
<Text style={styles.text}>B</Text>
<Text style={styles.text}>C</Text>
</View>
<View style={styles.box3}>
<Text style={styles.text}>3</Text>
</View>
</View>
);
 }
}

const styles = StyleSheet.create({

containerMain: {
backgroundColor: 'blue',
flex: 1,
flexDirection: 'column'
},
box1: {
flex: 1,
backgroundColor: 'green',
},
box2: {
flex: 2,
backgroundColor: 'yellow',
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'center'
},
box3: {
flex: 1,
backgroundColor: 'red',
},

text: {
fontSize: 50
},
});
Jika dijalankan hasilnya seperti gambar dibawah ini
 6. Layout Menghitung Volume, Keliling Balok
Code pada BelajarLayout.js
import React from 'react';
import { StyleSheet, Text,TextInput, View, Button} from 'react-native';
export default class VolKelBalok extends React.Component {
render() {
return (
<View style={styles.vMain} >
<View style={styles.vHeader}>
<Text style={styles.txtHeader1}>Menghitung Volume Keliling
Balok</Text>
<Text style={styles.txtHeader2}>Yuni Suardani</Text>
</View>
<View style={styles.vInput}>
<View style={styles.vItemInput}>
<Text style={styles.txtLabelInput}>Panjang</Text>
<TextInput style={styles.txtInput}
keyboardType = 'numeric'
/>
</View>
<View style={styles.vItemInput}>
<Text style={styles.txtLabelInput}>Lebar</Text>
<TextInput style={styles.txtInput}
keyboardType = 'numeric'
/>
</View>
<View style={styles.vItemInput}>
<Text style={styles.txtLabelInput}>Tinggi</Text>
<TextInput style={styles.txtInput}
keyboardType = 'numeric'
/>
</View>
<View style={styles.vItemButton}>
<Button
color="#0D47A1"
onPress={() => {}}
title="Hitung"
accessibilityLabel="Hitung"
/>
</View>
</View>
<View style={styles.vHasil}>
<View style={styles.vItemHasil}>
<View style={styles.vTxtLabelHasil}>
 <Text style={styles.txtLabelHasil}>Keliling</Text>
</View>
<View style={styles.vTxtHasil}>
<Text style={styles.txtHasil}>50</Text>
</View>
</View>
<View style={styles.vItemHasil}>
<View style={styles.vTxtLabelHasil}>
<Text style={styles.txtLabelHasil}>Volume</Text>
</View>
<View style={styles.vTxtHasil}>
<Text style={styles.txtHasil}>1000</Text>
</View>
</View>
</View>
<View style={styles.vFooter}>
<Text style={styles.txtFooter}></Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
vMain: {
flex:1
},
vHeader: {
flex:2,
backgroundColor:'#0D47A1',
alignItems:'center',
justifyContent:'center'
},
txtHeader1: {
color:'#fff',
fontSize:20
},
txtHeader2: {
color:'#E3F2FD',
fontSize:16
},
vInput: {
flex:3,
backgroundColor:'#E3F2FD',
justifyContent:'flex-start'
},
vItemInput: {
flex:1,
flexDirection:'row',
margin:10
},
vItemButton: {
flex:2,
margin:10
},
txtLabelInput: {
flex:2,
height: 30
},
txtInput: {
flex:3,
height: 30,
backgroundColor:'#fff',
borderColor: 'gray',
borderWidth: 1
},
vHasil: {
flex:6,
flexDirection:'row'
},
vItemHasil: {
flex:1,
flexDirection:'column',
margin:10,
backgroundColor:'#fff',
borderColor: 'gray',
borderWidth: 1
},
vTxtLabelHasil:
{
flex:1,
backgroundColor:'#1565C0',
alignItems:'center',
justifyContent:'center'
},
txtLabelHasil:
{
color:'#ffff',
fontSize:20
},
vTxtHasil:
 {
flex:5,
backgroundColor:'#ffff',
alignItems:'center',
justifyContent:'center'
},
txtHasil:
{
fontSize:60
},
vFooter:
{
flex:1,
borderColor:'gray',
borderWidth:1,
backgroundColor:'#42A5F5',
alignItems:'center',
justifyContent:'center'
},
txtFooter:
{
fontWeight: "bold"
}
});
Jika dijalankan hasilnya seperti gambar dibawah ini