[Java][Android] 안드로이드 전광판 만들기

오늘은 콘서트나 스포츠 경기장에서 자주 볼 수 있는 응원 전광판을

 

안드로이드로 만들어보도록 하겠습니다. 

 

저희가 사용할 애니메이션은 트윈 애니메이션(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>

 

그러면 이제 완성된 전광판을 열어볼까요?