오늘은 콘서트나 스포츠 경기장에서 자주 볼 수 있는 응원 전광판을
안드로이드로 만들어보도록 하겠습니다.
저희가 사용할 애니메이션은 트윈 애니메이션(Tween Animation) 입니다.
트윈 애니메이션이란?
위치타 크기, 회전을 지정한 시간내에 수행하는 애니메이션
먼저 애니메이션 XML파일을 저장할 폴더를 만들어줘야 합니다.
res -> New -> Directory
Directory의 이름은 anim 혹은 animation으로 만들어 주어야 합니다.
방금만든 폴더를 우클릭하고 new - animation resource file 로 애니메이션 xml파일을 생성합니다.
translate_alpha.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="+120%p"
android:toXDelta="-100%p"
android:duration="9000"
android:repeatCount="10"
/>
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="200"
android:repeatCount="300000"
/>
</set>
Translate의 속성값 입니다.
fromXDelta : 애니메이션이 시작되는 X좌표지점
toXDelta : 애니메이션이 마무리되는 X좌표지점
fromYDelta : 애니메이션이 시작되는 Y좌표지점
toYDelta : 애니메이션이 마무리되는 Y좌표지점
duration : 애니메이션이 실행되는 시간(1000 = 1초)
Alpha의 속성값 입니다.
fromAlpha : 애니메이션이 시작되는 알파값
toAlpha : 애니메이션이 마무리되는 알파값
duration : 애니메이션이 실행되는 시간(1000 = 1초)
적당한 속성 값으로 애니메이션의 효과를 커스터마이징 해줍니다.
activity_main.xml
<?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:screenOrientation="landscape"
tools:context=".MainActivity">
<TextView
android:id="@+id/DisplayActivity_txt_playword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome to Stickode"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.499"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.406" />
<Button
android:id="@+id/DisplayActivity_btn_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="52dp"
android:text="시작"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.499"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
주의할 점은 전광판처럼 가로가 긴 화면을 유지해주기 위해
android:screenOrientation="landscape"을 지정해줍니다.
가로모드가 설정이 되지 않는다면 MainAcitivty.java에서 다음과 같이 설정해 줍니다.
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
onCreate() 안에서 setContentView() 를 호출하기 전에 넣어줍니다.
그리고 애니메이션 효과를 만들어 놨으니 어디에 적용하겠다고 말해줘야겠죠?
저희는 TextView에 효과를 넣어주고 싶으니 다음과 같이 적용해 줍니다.
Animation anim = AnimationUtils.loadAnimation(this, R.anim.translate_alpha);
mTxtPlayWord.setAnimation(anim);
MainActivity.java
package com.example.led;
import androidx.appcompat.app.AppCompatActivity;
import android.content.pm.ActivityInfo;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private Button mBtnPlay;
private TextView mTxtPlayWord;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
setContentView(R.layout.activity_main);
mBtnPlay = (Button)findViewById(R.id.DisplayActivity_btn_play);
mBtnPlay.setOnClickListener(this);
mTxtPlayWord = (TextView)findViewById(R.id.DisplayActivity_txt_playword);
mTxtPlayWord.setTextColor(Color.GREEN);
}
@Override
public void onClick(View v)
{
switch(v.getId())
{
case R.id.DisplayActivity_btn_play :
Animation anim = AnimationUtils.loadAnimation(this, R.anim.translate_alpha);
mTxtPlayWord.setAnimation(anim);
mTxtPlayWord.startAnimation(anim);
break;
}
}
}
마지막으로 전광판처럼 깔끔한 화면을 위해 상태바와 타이틀바를 없애줍시다.
참고로 res -> values -> styles.xml에 적용해서 없애주는 예제들이 많은데요 요즘 안드로이드 버전에는
적용이 잘 안되는 경우가 있습니다.
이럴 경우에는 styles.xml를 일부러 만들어 주지 말고 values안에 theme이라는 폴더가 보이시죠?
themes.xml에 다음을 추가해 주면 되겠습니다.
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
그러면 이제 완성된 전광판을 열어볼까요?
'안드로이드 자바' 카테고리의 다른 글
[Java][Android] 구글맵 빠르게 적용하기 (0) | 2021.06.30 |
---|---|
[JAVA][Android] Shared Preferences 사용하여 숫자, 문자 저장하고 불러오기 (0) | 2021.06.27 |
[Java][Android] MLkit를 이용한 얼굴 탐지 (0) | 2021.06.19 |
[JAVA][Android] 달력 빠르게 만들기 (0) | 2021.06.18 |
[JAVA][Android] intent를 사용하여 이미지 보내기 (2) | 2021.06.16 |