안드로이드 개발을 어느정도 했던 나에겐 조금 더 유연한 UI, UX를 알아가야겠다는 생각이 들어 가장 많이 쓰이고 있는 circluarRadius 애니메이션을 구현 해 보기로 하였다.
참고는 미디엄의 해당 자료를 참고하였다.
https://medium.com/@shubham.bestfriendforu/animations-v2-2ada6ef3e5c8
A beginners guide to implement Android Animations (Part 2)
In Part 1, we discussed about basics of Animations and about Property Animations. In this post, I’ll discuss about View Animations and the…
medium.com
처음엔 해당 url에 있는 코드가 이해가 되질 않았다 어떻게 다른 view를 띄워주는지 조차 몰랐기 때문이다.
작업을 하던 와중 xml코드에서 layout을 덧붙혀서 표현하면 된다는것을 깨닫고 본 ui 위에 여러가지 layout을 덧붙혔다.
글을 쓰고있는 나는 xml코드에 어떤 버튼을 클릭 할 시 해당 버튼 색깔에 맞는 layout을 보여주는 형식으로 구현 하였다.
xml 코드는 이러하다
|
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/mainContainLayout"
android:background="@color/mainBackgroundColor"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="@+id/lottieAnimationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/spacing_normal"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
android:id="@+id/default_aniView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:lottie_autoPlay="true"
app:lottie_fileName="location.json"
app:lottie_loop="true" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/parking_information_circular_animation"
android:background="@color/parkingInfoCardColor"
android:visibility="invisible"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/user_information_circular_animation"
android:background="@color/userInfoCardColor"
android:visibility="invisible"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/findMyCar_circular_animation"
android:background="@color/findMyCarCardColor"
android:visibility="invisible"/>
android:id="@+id/parkingInfoCard"
android:layout_width="340dp"
android:layout_height="85dp"
android:layout_marginTop="@dimen/spacing_huge"
android:background="?android:attr/colorControlHighlight"
android:clickable="true"
android:elevation="@dimen/spacing_small"
app:cardBackgroundColor="@color/parkingInfoCardColor"
app:cardCornerRadius="@dimen/spacing_normal"
app:cardElevation="@dimen/spacing_normal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/lottieAnimationView">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/parking_reservation"
android:textColor="@color/cardViewTextColor"
android:textSize="@dimen/text_large"
android:textStyle="bold" />
<!-- android:id="@+id/card_reservation"-->
<!-- android:layout_width="150dp"-->
<!-- android:layout_height="85dp"-->
<!-- android:layout_marginTop="@dimen/spacing_huge"-->
<!-- android:elevation="@dimen/spacing_small"-->
<!-- app:cardBackgroundColor="@color/reservationCardColor"-->
<!-- app:cardCornerRadius="@dimen/spacing_normal"-->
<!-- app:cardElevation="@dimen/spacing_normal"-->
<!-- app:layout_constraintEnd_toStartOf="@+id/parkingInfoCard"-->
<!-- app:layout_constraintStart_toStartOf="parent"-->
<!-- app:layout_constraintTop_toBottomOf="@+id/lottieAnimationView">-->
<!-- <TextView-->
<!-- android:layout_width="match_parent"-->
<!-- android:layout_height="match_parent"-->
<!-- android:gravity="center"-->
<!-- android:text="@string/reservation_title"-->
<!-- android:textColor="@color/cardViewTextColor"-->
<!-- android:textSize="@dimen/text_normal"-->
<!-- android:textStyle="bold" />-->
android:id="@+id/userInfoCard"
android:layout_width="150dp"
android:layout_height="85dp"
android:layout_marginTop="@dimen/spacing_xxx_large"
android:elevation="@dimen/spacing_small"
app:cardBackgroundColor="@color/userInfoCardColor"
app:cardCornerRadius="@dimen/spacing_normal"
app:cardElevation="@dimen/spacing_normal"
app:layout_constraintEnd_toStartOf="@+id/findMyCarCard"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/parkingInfoCard">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/user_info"
android:textColor="@color/cardViewTextColor"
android:textSize="@dimen/text_large"
android:textStyle="bold" />
android:id="@+id/findMyCarCard"
android:layout_width="150dp"
android:layout_height="85dp"
android:layout_marginTop="@dimen/spacing_xxx_large"
android:background="?attr/selectableItemBackgroundBorderless"
android:elevation="@dimen/spacing_small"
app:cardBackgroundColor="@color/findMyCarCardColor"
app:cardCornerRadius="@dimen/spacing_normal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/userInfoCard"
app:layout_constraintTop_toBottomOf="@+id/parkingInfoCard">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/bot_find_my_car"
android:textColor="@color/cardViewTextColor"
android:textSize="@dimen/text_large"
android:textStyle="bold" />
|
Kotlin 코드는 이러하다
해당 코드를 하나씩 알아보자
우선 매개변수로 view를 받는데 해당 view의 centerX좌표와 centerY좌표를 알아야 한다.
클릭한 view 객체의 x좌표 중앙에서부터 시작하기 위해 width / 2 값을 view.x좌표에 더해주었다 그러고 나에게는 처음보는함수 hypot 함수 자바 안에서의 사용법은 Math.hypot이다. 자세히 알아보기위해 doc과 구글링을 해 보았다.
알아보니 직각삼각형의 빗변 구하는 함수였다 즉 첫 번째 매개변수와 두 번째 매개변수를 통해 빗변의 길이를 구하는것이다.
https://www.ibm.com/support/knowledgecenter/ko/ssw_ibm_i_73/rtref/hypot.htm
IBM Knowledge Center
Please note that DISQUS operates this forum. When you sign in to comment, IBM will provide your email, first name and last name to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accept
www.ibm.com
그러고 한가지 더 몰랐던 ViewAnimationUtils.createCircularReveal함수 검색 해보았다. android developer 에서 검색을 해 보니 해당 클래스에는 createCircularReveal 함수 하나만 존재하였다.
https://developer.android.com/reference/android/view/ViewAnimationUtils?hl=en
ViewAnimationUtils | Android Developers
ViewAnimationUtils public final class ViewAnimationUtils extends Object java.lang.Object ↳ android.view.ViewAnimationUtils Defines common utilities for working with View's animations. Summary Public methods static Animator createCircularReveal(View view
developer.android.com
첫 번째 매개변수로는 원으로 자를 view, 두번짼 centerX 좌표 , centerY 좌표, 시작 원의 반경, 끝 반경이다. 즉 코드를 살펴보면 0부터 시작하여 뷰의 끝 반경까지 원을 그리며 커지는 효과를 그리게 된다.
'Android' 카테고리의 다른 글
| Android RecyclerView Adatper 코드 리펙토링 (0) | 2019.12.11 |
|---|---|
| ViewModel에서 startActivity 적응 (0) | 2019.12.10 |
| 안드로이드 부족한 공부(R이 하는 역할, RecyclerView & ListView 차이점, viewmodel에서 mutableLiveData, LiveData 두는 이유) (0) | 2019.12.09 |
| ViewModel 처음 사용 시 일어날 수 있는 에러 (0) | 2019.12.06 |
댓글