LayoutAnimation API, özellikle layout işlemleri için geliştirilmiş bir API’dir. View üzerinde uygulanan bu API, Animated API’ye benzer şekilde çalışır. Ancak, her animasyon için bir state özelliğine gerek vardır. Özellikle karmaşık view’lerde çok hızlı bir animasyon çözümü sunar.
Üç farklı Button üzerinden Layout düzenini değiştiren ve oluşan daire sayısını değiştiren bir kod yazalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
import React, { Component } from 'react'; import {StyleSheet, Text, View, TouchableOpacity, LayoutAnimation} from 'react-native'; const CustomLayoutAnimation = { duration: 200, create: { type: LayoutAnimation.Types.linear, property: LayoutAnimation.Properties.opacity, }, update: { type: LayoutAnimation.Types.curveEaseInEaseOut, }, }; export default class App extends Component { constructor() { super(); this.state = { index: 0, } } onPress(index) { //Bir sonraki animasyon durumu için LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); //Burada kişisel (custom) bir layout animation'da kullanılabilir. //Örneğin, // LayoutAnimation.configureNext(CustomLayoutAnimation); this.setState({ index: index }); } renderButton(index) { return ( <TouchableOpacity key = {'button' + index} style = { styles.button} onPress = {() => this.onPress(index)}> <Text> {index} </Text> </TouchableOpacity> ); } renderCircle(key) { const size = 50; return ( <View key = { key } style = { {width: size,height: size, borderRadius: size / 2.0, backgroundColor: 'sandybrown', margin: 20}} /> ); } render() { const leftStyle = this.state.index === 0 ? {flex: 1 } : {width: 20 }; const middleStyle = this.state.index === 2 ? {width: 20} : {flex: 1}; const rightStyle = { flex: 1 }; const whiteHeight = this.state.index * 80; const circles = []; for (let i = 0; i < (3 + this.state.index); i++) circles.push(this.renderCircle(i)); return ( <View style = {styles.container} > <View style = {styles.topButtons} > {this.renderButton(0)} {this.renderButton(1)} {this.renderButton(2)} </View> <View style = {styles.content} > <View style = {{flexDirection: 'row',height: 100}} > <View style = {[leftStyle, {backgroundColor: 'firebrick'}]}/> <View style = {[middleStyle, {backgroundColor: 'seagreen'}]}/> <View style = {[rightStyle, {backgroundColor: 'steelblue'}]}/> </View> <View style = {{ height: whiteHeight, justifyContent: 'center', alignItems: 'center', overflow: 'hidden'}} removeClippedSubviews = { true} > </View> <View style = {styles.circleContainer} >{ circles } </View> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF' }, topButtons: { marginTop: 22, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', alignSelf: 'stretch', backgroundColor: 'lightblue', }, button: { flex: 1, height: 60, alignSelf: 'stretch', backgroundColor: 'white', alignItems: 'center', justifyContent: 'center', margin: 8, }, content: { flex: 1, alignSelf: 'stretch', }, circleContainer: { flexDirection: 'row', flex: 1, flexWrap: 'wrap', padding: 30, justifyContent: 'center', alignItems: 'center' }, }); |
CustomLayoutAnimation animasyon için ayarları içerir. state içindeki index animasyon değişiklikleri için kullanılacaktır. LayoutAnimation bir veya daha fazla state değişkeni üzerinden yönetilir. onPress fonksiyonu state değerini günceller. renderButton, TouchableOpacity bileşeni üzerinden Button üretir. renderCircle bir daire yapmak için kullanılır. Bu bileşen üzerinden birden fazla bileşen üretilebilir. render fonksyionu içinde state içindeki index değerine göre style ve bileşen sayısı gibi ayarlara göre render işlemi yapılmaktadır.
LayoutAnimation kullanırken platforma özgü değişiklikler yapmak gerekebilir. Örneğin Android ortamında aşağıdaki kod için “UIManager” üzerinden Android’e özel ayarlar yapmak gerekir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
import React, { Component } from 'react'; import { View, StyleSheet, Text, TouchableOpacity, LayoutAnimation, Platform, UIManager } from 'react-native'; export default class App extends Component<{}> { constructor(){ super(); this.state = { flex_Direction_Value: 'row' } if (Platform.OS === 'android') UIManager.setLayoutAnimationEnabledExperimental(true) } Toggle_Change_Layout = () => { LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); if( this.state.flex_Direction_Value == 'row' ) this.setState({ flex_Direction_Value: 'column' }); else this.setState({ flex_Direction_Value: 'row' }); } render() { return( <View style = {[ styles.MainContainer, { flexDirection: this.state.flex_Direction_Value }]}> <View style = { styles.Block1 }> <Text style = { styles.TextStyle }>Kutu 1</Text> </View> <View style = { styles.Block2 }> <Text style = { styles.TextStyle }>Kutu 2</Text> </View> <TouchableOpacity style = {[ styles.TouchableOpacityStyle, { bottom: 0 }]} onPress = { this.Toggle_Change_Layout } activeOpacity = { 0.5 } > <Text style = { styles.TextStyle }>Flex Direction Değiştir!!!</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create( { MainContainer: { flex: 1, alignItems: 'center', justifyContent: 'center', marginTop: (Platform.OS === 'ios') ? 20 : 0 }, Block1: { width: 140, height: 140, backgroundColor: '#00BCD4', alignItems: 'center', justifyContent: 'center' }, Block2: { width: 140, height: 140, backgroundColor: '#4CAF50', alignItems: 'center', justifyContent: 'center' }, TextStyle: { color: 'white', fontSize: 18, textAlign: 'center' }, TouchableOpacityStyle: { position: 'absolute', left: 0, right: 0, backgroundColor: '#607D8B', padding: 10, marginBottom:1 } }); |
Bu örnekte aşağıdaki button’a tıklandığında flex direction değeri değişir.