2 using System.Collections.Generic;
5 using System.Threading.Tasks;
6 using Tizen.NUI.BaseComponents;
7 using Tizen.NUI.UIComponents;
9 namespace Tizen.NUI.Samples
11 public class ContactCard
13 private TapGestureDetector mTapDetector;
14 private View mContactCard;
16 private View mClippedImage;
17 private View mMaskedImage;
18 private TextLabel mNameText;
19 private TextLabel mDetailText;
21 private Animation mAnimation;
22 private ContactCardLayoutInfo mContactCardLayoutInfo;
23 private Vector2 foldedPosition;
24 private int mClippedImagePropertyIndex;
28 private readonly TimePeriod TIME_PERIOD_UNFOLD_X = new TimePeriod(0, 360); ///< Start at 0ms, duration 360ms
29 private readonly TimePeriod TIME_PERIOD_UNFOLD_Y = new TimePeriod(40, 360); ///< Start at 40ms, duration 360ms
30 private readonly TimePeriod TIME_PERIOD_UNFOLD_WIDTH = new TimePeriod(0, 360); ///< Start at 0ms, duration 360ms
31 private readonly TimePeriod TIME_PERIOD_UNFOLD_HEIGHT = new TimePeriod(40, 360); ///< Start at 40ms, duration 360ms
32 private readonly TimePeriod TIME_PERIOD_UNFOLD_NAME_OPACITY = new TimePeriod(0, 80); ///< Start at 0ms, duration 80ms
33 private readonly TimePeriod TIME_PERIOD_UNFOLD_DETAIL_OPACITY = new TimePeriod( 80, 80 ); ///< Start at 80ms, duration 80ms
34 private readonly TimePeriod TIME_PERIOD_UNFOLD_SIBLING_OPACITY = new TimePeriod( 0, 80 ); ///< Start at 0ms, duration 80ms
35 private readonly TimePeriod TIME_PERIOD_UNFOLD_MESH_MORPH = new TimePeriod( 0, 400 ); ///< Start at 0ms, duration 400ms
37 private readonly TimePeriod TIME_PERIOD_FOLD_X = new TimePeriod( 64, 336 ); ///< Start at 64ms, duration 336ms
38 private readonly TimePeriod TIME_PERIOD_FOLD_Y = new TimePeriod( 0, 336 ); ///< Start at 0ms, duration 336ms
39 private readonly TimePeriod TIME_PERIOD_FOLD_WIDTH = new TimePeriod( 64, 336 ); ///< Start at 64ms, duration 336ms
40 private readonly TimePeriod TIME_PERIOD_FOLD_HEIGHT = new TimePeriod( 0, 336 ); ///< Start at 0ms, duration 336ms
41 private readonly TimePeriod TIME_PERIOD_FOLD_NAME_OPACITY = new TimePeriod( 80, 80 ); ///< Start at 80ms, duration 80ms
42 private readonly TimePeriod TIME_PERIOD_FOLD_DETAIL_OPACITY = new TimePeriod( 0, 80 ); ///< Start at 0ms, duration 80ms
43 private readonly TimePeriod TIME_PERIOD_FOLD_SIBLING_OPACITY = new TimePeriod( 320, 80 ); ///< Start at 320ms, duration 80ms
44 private readonly TimePeriod TIME_PERIOD_FOLD_MESH_MORPH = new TimePeriod( 0, 400 ); ///< Start at 0ms, duration 400ms
46 private AlphaFunction.BuiltinFunctions ALPHA_FUNCTION_UNFOLD = AlphaFunction.BuiltinFunctions.Default;
47 private AlphaFunction.BuiltinFunctions ALPHA_FUNCTION_FOLD = AlphaFunction.BuiltinFunctions.EaseInOut;
49 private readonly Color HEADER_COLOR = new Color( 231.0f / 255.0f, 231.0f / 255.0f, 231.0f / 255.0f, 1.0f );
52 public ContactCard(ContactCardLayoutInfo contactCardLayoutInfo, string contactName, string contactAddress, string imagePath, Vector2 position, View rootView)
54 mContactCardLayoutInfo = contactCardLayoutInfo;
55 foldedPosition = new Vector2(position.X, position.Y);
56 mClippedImagePropertyIndex = -1;
59 //NUIApplication.GetDefaultWindow().KeyEvent += OnKeyEvent;
61 // Create a View which will be used for the background and to clip the contents
62 mContactCard = new View();
63 mContactCard.BackgroundColor = Color.White;
64 mContactCard.ClippingMode = ClippingModeType.ClipChildren;
65 mContactCard.ParentOrigin = ParentOrigin.TopLeft;
66 mContactCard.PivotPoint = PivotPoint.TopLeft;
67 mContactCard.PositionUsesPivotPoint = true;
68 mContactCard.Position2D = new Position2D((int)foldedPosition.X, (int)foldedPosition.Y);
69 mContactCard.Size2D = new Size2D((int)mContactCardLayoutInfo.foldedSize.Width, (int)mContactCardLayoutInfo.foldedSize.Height);
70 mContactCard.KeyEvent += OnKeyEvent;
72 NUIApplication.GetDefaultWindow().GetDefaultLayer().Add(mContactCard);
73 rootView.Add(mContactCard);
75 // Create the header which will be shown only when the contact is unfolded
77 mHeader.Size2D = new Size2D((int)mContactCardLayoutInfo.headerSize.Width, (int)mContactCardLayoutInfo.headerSize.Height);
78 mHeader.BackgroundColor = HEADER_COLOR;
79 mHeader.ParentOrigin = ParentOrigin.TopLeft;
80 mHeader.PivotPoint = PivotPoint.TopLeft;
81 mHeader.PositionUsesPivotPoint = true;
82 mHeader.Position2D = new Position2D((int)mContactCardLayoutInfo.headerFoldedPosition.X, (int)mContactCardLayoutInfo.headerFoldedPosition.Y);
84 // Create a clipped image (whose clipping can be animated)
85 mClippedImage = ClippedImage.Create(imagePath);
86 mClippedImage.Size2D = new Size2D((int)mContactCardLayoutInfo.imageSize.Width, (int)mContactCardLayoutInfo.imageSize.Height);
87 mClippedImage.ParentOrigin = ParentOrigin.TopLeft;
88 mClippedImage.PivotPoint = PivotPoint.TopLeft;
89 mClippedImage.PositionUsesPivotPoint = true;
90 mClippedImage.Position2D = new Position2D((int)mContactCardLayoutInfo.imageFoldedPosition.X, (int)mContactCardLayoutInfo.imageFoldedPosition.Y);
92 mContactCard.Add(mClippedImage);
94 // Create an image with a mask which is to be used when the contact is folded
95 mMaskedImage = MaskedImage.Create(imagePath);
96 mMaskedImage.Size2D = new Size2D((int)mContactCardLayoutInfo.imageSize.Width, (int)mContactCardLayoutInfo.imageSize.Height);
97 mMaskedImage.ParentOrigin = ParentOrigin.TopLeft;
98 mMaskedImage.PivotPoint = PivotPoint.TopLeft;
99 mMaskedImage.PositionUsesPivotPoint = true;
100 mMaskedImage.Position2D = new Position2D((int)mContactCardLayoutInfo.imageFoldedPosition.X, (int)mContactCardLayoutInfo.imageFoldedPosition.Y);
101 mContactCard.Add(mMaskedImage);
103 // Add the text label for just the name
104 mNameText = new TextLabel(contactName);
105 //mNameText.StyleName = "ContactNameTextLabel";
106 mNameText.TextColor = new Color(0, 0, 0, 1);
107 mNameText.HorizontalAlignment = HorizontalAlignment.Center;
108 mNameText.PointSize = 14;
109 mNameText.ParentOrigin = ParentOrigin.TopLeft;
110 mNameText.PivotPoint = PivotPoint.TopLeft;
111 mNameText.PositionUsesPivotPoint = true;
112 mNameText.WidthResizePolicy = ResizePolicyType.FillToParent;
113 mNameText.Position2D = new Position2D((int)mContactCardLayoutInfo.textFoldedPosition.X, (int)mContactCardLayoutInfo.textFoldedPosition.Y);
114 mContactCard.Add(mNameText);
116 // Create the detail text-label
117 string detailString = contactName;
118 detailString += "\n\n";
119 detailString += contactAddress;
121 mDetailText = new TextLabel(detailString);
122 //mDetailText.StyleName = "ContactDetailTextLabel";
123 mDetailText.TextColor = new Color(0, 0, 0, 1);
124 mDetailText.MultiLine = true;
125 mDetailText.PointSize = 20;
126 mDetailText.ParentOrigin = ParentOrigin.TopLeft;
127 mDetailText.PivotPoint = PivotPoint.TopLeft;
128 mDetailText.PositionUsesPivotPoint = true;
129 mDetailText.Position2D = new Position2D((int)mContactCardLayoutInfo.textFoldedPosition.X, (int)mContactCardLayoutInfo.textFoldedPosition.Y);
130 mDetailText.Size2D = new Size2D((int)(mContactCardLayoutInfo.unfoldedSize.Width - mContactCardLayoutInfo.textFoldedPosition.X * 2.0f), 0);
131 mDetailText.Opacity = 0.0f;
133 // Attach tap detection to the overall clip control
134 mTapDetector = new TapGestureDetector();
135 mTapDetector.Attach(mContactCard);
136 mTapDetector.Detected += OnTap;
139 private void Animate()
141 FocusManager focusManager = FocusManager.Instance;
142 mAnimation = new Animation(0);
146 mContactCard.Focusable = true;
147 focusManager.SetCurrentFocusView(mContactCard);
149 mContactCard.Add(mHeader);
150 mContactCard.Add(mDetailText);
152 // Show clipped-image to animate geometry and hide the masked-image
153 mClippedImage.Show();
156 // Animate the size of the control (and clipping area)
157 mAnimation.AnimateTo(mContactCard, "PositionX", mContactCardLayoutInfo.unfoldedPosition.X, TIME_PERIOD_UNFOLD_X.start, TIME_PERIOD_UNFOLD_X.start + TIME_PERIOD_UNFOLD_X.duration, new AlphaFunction(ALPHA_FUNCTION_UNFOLD));
158 mAnimation.AnimateTo(mContactCard, "PositionY", mContactCardLayoutInfo.unfoldedPosition.Y, TIME_PERIOD_UNFOLD_Y.start, TIME_PERIOD_UNFOLD_Y.start + TIME_PERIOD_UNFOLD_Y.duration, new AlphaFunction(ALPHA_FUNCTION_UNFOLD));
159 mAnimation.AnimateTo(mContactCard, "SizeWidth", mContactCardLayoutInfo.unfoldedSize.Width, TIME_PERIOD_UNFOLD_WIDTH.start, TIME_PERIOD_UNFOLD_WIDTH.start + TIME_PERIOD_UNFOLD_WIDTH.duration, new AlphaFunction(ALPHA_FUNCTION_UNFOLD));
160 mAnimation.AnimateTo(mContactCard, "SizeHeight", mContactCardLayoutInfo.unfoldedSize.Height, TIME_PERIOD_UNFOLD_HEIGHT.start, TIME_PERIOD_UNFOLD_HEIGHT.start + TIME_PERIOD_UNFOLD_HEIGHT.duration, new AlphaFunction(ALPHA_FUNCTION_UNFOLD));
162 // Animate the header area into position
163 mAnimation.AnimateTo(mHeader, "PositionX", mContactCardLayoutInfo.headerUnfoldedPosition.X, TIME_PERIOD_UNFOLD_X.start, TIME_PERIOD_UNFOLD_X.start + TIME_PERIOD_UNFOLD_X.duration, new AlphaFunction(ALPHA_FUNCTION_UNFOLD));
164 mAnimation.AnimateTo(mHeader, "PositionY", mContactCardLayoutInfo.headerUnfoldedPosition.Y, TIME_PERIOD_UNFOLD_Y.start, TIME_PERIOD_UNFOLD_Y.start + TIME_PERIOD_UNFOLD_Y.duration, new AlphaFunction(ALPHA_FUNCTION_UNFOLD));
166 // Animate the clipped image into the unfolded position and into a quad
167 mAnimation.AnimateTo(mClippedImage, "PositionX", mContactCardLayoutInfo.imageUnfoldedPosition.X, TIME_PERIOD_UNFOLD_X.start, TIME_PERIOD_UNFOLD_X.start + TIME_PERIOD_UNFOLD_X.duration, new AlphaFunction(ALPHA_FUNCTION_UNFOLD));
168 mAnimation.AnimateTo(mClippedImage, "PositionY", mContactCardLayoutInfo.imageUnfoldedPosition.Y, TIME_PERIOD_UNFOLD_Y.start, TIME_PERIOD_UNFOLD_Y.start + TIME_PERIOD_UNFOLD_Y.duration, new AlphaFunction(ALPHA_FUNCTION_UNFOLD));
169 mAnimation.AnimateTo(mClippedImage, "uDelta", ClippedImage.QUAD_GEOMETRY, TIME_PERIOD_UNFOLD_MESH_MORPH.start , TIME_PERIOD_UNFOLD_MESH_MORPH.start + TIME_PERIOD_UNFOLD_MESH_MORPH.duration, new AlphaFunction(ALPHA_FUNCTION_UNFOLD));
171 // Fade out the opacity of the name, and animate into the unfolded position
172 mAnimation.AnimateTo(mNameText, "ColorAlpha", 0.0f, TIME_PERIOD_UNFOLD_NAME_OPACITY.start, TIME_PERIOD_UNFOLD_NAME_OPACITY.start + TIME_PERIOD_UNFOLD_NAME_OPACITY.duration, new AlphaFunction(ALPHA_FUNCTION_UNFOLD));
173 mAnimation.AnimateTo(mNameText, "PositionX", mContactCardLayoutInfo.textUnfoldedPosition.X, TIME_PERIOD_UNFOLD_X.start, TIME_PERIOD_UNFOLD_X.start + TIME_PERIOD_UNFOLD_X.duration, new AlphaFunction(ALPHA_FUNCTION_UNFOLD));
174 mAnimation.AnimateTo(mNameText, "PositionY", mContactCardLayoutInfo.textUnfoldedPosition.Y, TIME_PERIOD_UNFOLD_Y.start, TIME_PERIOD_UNFOLD_Y.start + TIME_PERIOD_UNFOLD_Y.duration, new AlphaFunction(ALPHA_FUNCTION_UNFOLD));
176 // Fade in the opacity of the detail, and animate into the unfolded position
177 mAnimation.AnimateTo(mDetailText, "ColorAlpha", 1.0f, TIME_PERIOD_UNFOLD_NAME_OPACITY.start, TIME_PERIOD_UNFOLD_NAME_OPACITY.start + TIME_PERIOD_UNFOLD_NAME_OPACITY.duration, new AlphaFunction(ALPHA_FUNCTION_UNFOLD));
178 mAnimation.AnimateTo(mDetailText, "PositionX", mContactCardLayoutInfo.textUnfoldedPosition.X, TIME_PERIOD_UNFOLD_X.start, TIME_PERIOD_UNFOLD_X.start + TIME_PERIOD_UNFOLD_X.duration, new AlphaFunction(ALPHA_FUNCTION_UNFOLD));
179 mAnimation.AnimateTo(mDetailText, "PositionY", mContactCardLayoutInfo.textUnfoldedPosition.Y, TIME_PERIOD_UNFOLD_Y.start, TIME_PERIOD_UNFOLD_Y.start + TIME_PERIOD_UNFOLD_Y.duration, new AlphaFunction(ALPHA_FUNCTION_UNFOLD));
181 // Fade out all the siblings
182 View parent = mContactCard.GetParent() as View;
183 for (uint i = 0; i < parent.GetChildCount(); ++i)
185 View sibling = parent.GetChildAt(i);
186 if (sibling != mContactCard)
188 mAnimation.AnimateTo(sibling, "ColorAlpha", 0.0f, TIME_PERIOD_UNFOLD_SIBLING_OPACITY.start, TIME_PERIOD_UNFOLD_SIBLING_OPACITY.start + TIME_PERIOD_UNFOLD_SIBLING_OPACITY.duration, new AlphaFunction(ALPHA_FUNCTION_UNFOLD));
189 sibling.Sensitive = false;
193 mAnimation.Finished += OnAnimationFinished;
198 // Remove key-input-focus from our contact-card when we are folded
199 FocusManager.Instance.ClearFocus();
201 mContactCard.Add(mNameText);
203 // Animate the size of the control (and clipping area)
204 mAnimation.AnimateTo(mContactCard, "PositionX", foldedPosition.X, TIME_PERIOD_FOLD_X.start, TIME_PERIOD_FOLD_X.start + TIME_PERIOD_FOLD_X.duration, new AlphaFunction(ALPHA_FUNCTION_FOLD));
205 mAnimation.AnimateTo(mContactCard, "PositionY", foldedPosition.Y, TIME_PERIOD_FOLD_Y.start, TIME_PERIOD_FOLD_Y.start + TIME_PERIOD_FOLD_Y.duration, new AlphaFunction(ALPHA_FUNCTION_FOLD));
206 mAnimation.AnimateTo(mContactCard, "SizeWidth", mContactCardLayoutInfo.foldedSize.Width, TIME_PERIOD_FOLD_WIDTH.start, TIME_PERIOD_FOLD_WIDTH.start + TIME_PERIOD_FOLD_WIDTH.duration, new AlphaFunction(ALPHA_FUNCTION_FOLD));
207 mAnimation.AnimateTo(mContactCard, "SizeHeight", mContactCardLayoutInfo.foldedSize.Height, TIME_PERIOD_FOLD_HEIGHT.start, TIME_PERIOD_FOLD_HEIGHT.start + TIME_PERIOD_FOLD_HEIGHT.duration, new AlphaFunction(ALPHA_FUNCTION_FOLD));
209 // Animate the header area out of position
210 mAnimation.AnimateTo(mHeader, "PositionX", mContactCardLayoutInfo.headerFoldedPosition.X, TIME_PERIOD_FOLD_X.start, TIME_PERIOD_FOLD_X.start + TIME_PERIOD_FOLD_X.duration, new AlphaFunction(ALPHA_FUNCTION_FOLD));
211 mAnimation.AnimateTo(mHeader, "PositionY", mContactCardLayoutInfo.headerFoldedPosition.Y, TIME_PERIOD_FOLD_Y.start, TIME_PERIOD_FOLD_Y.start + TIME_PERIOD_FOLD_Y.duration, new AlphaFunction(ALPHA_FUNCTION_FOLD));
213 // Animate the clipped image into the folded position and into a circle
214 mAnimation.AnimateTo(mClippedImage, "PositionX", mContactCardLayoutInfo.imageFoldedPosition.X, TIME_PERIOD_FOLD_X.start, TIME_PERIOD_FOLD_X.start + TIME_PERIOD_FOLD_X.duration, new AlphaFunction(ALPHA_FUNCTION_FOLD));
215 mAnimation.AnimateTo(mClippedImage, "PositionY", mContactCardLayoutInfo.imageFoldedPosition.Y, TIME_PERIOD_FOLD_Y.start, TIME_PERIOD_FOLD_Y.start + TIME_PERIOD_FOLD_Y.duration, new AlphaFunction(ALPHA_FUNCTION_FOLD));
216 mAnimation.AnimateTo(mClippedImage, "uDelta", 0.0f, TIME_PERIOD_FOLD_MESH_MORPH.start, TIME_PERIOD_FOLD_MESH_MORPH.start + TIME_PERIOD_FOLD_MESH_MORPH.duration, new AlphaFunction(ALPHA_FUNCTION_FOLD));
218 // Fade in the opacity of the name, and animate into the folded position
219 mAnimation.AnimateTo(mNameText, "ColorAlpha", 1.0f, TIME_PERIOD_FOLD_NAME_OPACITY.start, TIME_PERIOD_FOLD_NAME_OPACITY.start + TIME_PERIOD_FOLD_NAME_OPACITY.duration, new AlphaFunction(ALPHA_FUNCTION_FOLD));
220 mAnimation.AnimateTo(mNameText, "PositionX", mContactCardLayoutInfo.textFoldedPosition.X, TIME_PERIOD_FOLD_X.start, TIME_PERIOD_FOLD_X.start + TIME_PERIOD_FOLD_X.duration, new AlphaFunction(ALPHA_FUNCTION_FOLD));
221 mAnimation.AnimateTo(mNameText, "PositionY", mContactCardLayoutInfo.textFoldedPosition.Y, TIME_PERIOD_FOLD_Y.start, TIME_PERIOD_FOLD_Y.start + TIME_PERIOD_FOLD_Y.duration, new AlphaFunction(ALPHA_FUNCTION_FOLD));
223 // Fade out the opacity of the detail, and animate into the folded position
224 mAnimation.AnimateTo(mDetailText, "ColorAlpha", 0.0f, TIME_PERIOD_FOLD_DETAIL_OPACITY.start, TIME_PERIOD_FOLD_DETAIL_OPACITY.start + TIME_PERIOD_FOLD_DETAIL_OPACITY.duration, new AlphaFunction(ALPHA_FUNCTION_FOLD));
225 mAnimation.AnimateTo(mDetailText, "PositionX", mContactCardLayoutInfo.textFoldedPosition.X, TIME_PERIOD_FOLD_X.start, TIME_PERIOD_FOLD_X.start + TIME_PERIOD_FOLD_X.duration, new AlphaFunction(ALPHA_FUNCTION_FOLD));
226 mAnimation.AnimateTo(mDetailText, "PositionY", mContactCardLayoutInfo.textFoldedPosition.Y, TIME_PERIOD_FOLD_Y.start, TIME_PERIOD_FOLD_Y.start + TIME_PERIOD_FOLD_Y.duration, new AlphaFunction(ALPHA_FUNCTION_FOLD));
228 // Slowly fade in all the siblings
229 View parent = mContactCard.GetParent() as View;
230 for (uint i = 0; i < parent.GetChildCount(); ++i)
232 View sibling = parent.GetChildAt(i);
233 if (sibling != mContactCard)
235 mAnimation.AnimateTo(sibling, "ColorAlpha", 1.0f, TIME_PERIOD_FOLD_SIBLING_OPACITY.start, TIME_PERIOD_FOLD_SIBLING_OPACITY.start + TIME_PERIOD_FOLD_SIBLING_OPACITY.duration, new AlphaFunction(ALPHA_FUNCTION_FOLD));
236 sibling.Sensitive = true;
240 mAnimation.Finished += OnAnimationFinished;
247 private void OnAnimationFinished(object sender, EventArgs e)
249 Animation animation = sender as Animation;
251 // Ensure the finishing animation is the latest as we do not want to change state if a previous animation has finished
252 if (mAnimation == animation)
257 mDetailText.Unparent();
259 // Hide the clipped-image as we have finished animating the geometry and show the masked-image again
260 mClippedImage.Hide();
266 private bool OnKeyEvent(object sender, View.KeyEventArgs e)
268 if((!mFolded) && (e.Key.State == Key.StateType.Down))
270 if(e.Key.KeyPressedName == "Escape" || e.Key.KeyPressedName == "BackSpace")
272 FocusManager focusManager = FocusManager.Instance;
273 if(focusManager.GetCurrentFocusView() == mContactCard)
275 // Our contact - card is set to receive focus and we're unfolded so animate back to the folded state
284 private void OnTap(object sender, TapGestureDetector.DetectedEventArgs e)
286 View view = sender as View;
287 if(view = mContactCard)
293 public class TimePeriod
298 public TimePeriod(int _start, int _duration)
301 duration = _duration;