보통 앱을 실행하면 바로 MainActivity, 즉 초기화면으로 가지 않고, Intro 화면이 나오는 경우가 많다.
네이버 지도를 예로 들어보겠다. 지도 앱을 킨다고 바로 지도 화면으로 가지 않고, 위와 같이 Intro 화면이 몇 초 나온 다음에 메인 화면으로 들어간다. 이런 Intro Page 역시 안드로이드 스튜디오를 통해 구현이 가능하다.
우선 위와 같이 하나의 java 파일을 새로 만들어야 한다. 나 같은 경우에는 IntroPage로 이름을 지었다. app>res>layout에 Empty XML Layout도 하나 추가해야 한다. 이는 위에서 IntroPage를 생성했으면 자동으로 추가가 되는 것 같다.
일단 시험만 해보는 것이니 디자인은 거의 없다시피 했다. IntroPage xml 파일에 textview 요소만 추가했으며, 배경 색깔 정도만 바꿔줬다.
배경 색깔은 우측에서 변경이 가능했다. 배경 색깔까지 코딩할 필요는 없고, 팔레트에서 색깔만 골라주면 돼서 편했다.
그런 다음, AndroidManifest.xml 파일에 들어간다. Intro Page가 앱 실행 시 먼저 나오게 바꿔줘야 하기 때문에 코드를 약간 수정해야 한다. 위 코드를 보면 MainActivity가 먼저 있고, 그 후에 IntroPage가 있다. 이 2 개의 순서를 아래와 같이 바꿔주면 된다.
이렇게 순서를 바꿔주면 앱 실행 시 MainActivity가 아닌 IntroPage가 가장 처음에 나오게 된다.
하지만 이렇게 순서만 바꾼다고 IntroPage에서 MainActivity로 자동적으로 넘어가지는 않는다. IntroPage 자바 파일에 들어가서 따로 코드를 작성해야 한다.
public class IntroPage extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_intro_page);
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
public void run() {
Intent intent = new Intent(IntroPage.this, MainActivity.class);
startActivity(intent);
finish();
}
}, 3000); //3000은 3초를 의미함
}
}위 코드를 작성하고 AVD를 실행하면 된다. 그러면 IntroPage가 3초 동안 보여진 다음에 앱 초기화면으로 들어가게 된다.
간단한 애니메이션 효과 주기
다음은 간단한 애니메이션 효과 주기이다. 아직 전문적인 단계는 아니므로 버튼에 아주 간단한 애니메이션 효과 주기를 실험해 보았다.
이렇게 메인 화면에 버튼 2개를 넣고, 각각 ACT1, ACT2로 이름을 지정해 주었다. 각 버튼은 서로 다른 애니메이션 효과를 넣을 예정이다.
app>res 디렉토리에 임시로 anim 폴더를 만들었다. 해당 폴더 안에 act1, act2라는 Empty Layout XML 파일을 생성했다.
앞서 얘기한 것처럼 두 버튼에 서로 다른 애니메이션 효과를 넣을 것이다. 버튼 하나는 화면 왼쪽으로 이동하는 애니메이션, 다른 버튼은 버튼 크기가 확대되는 애니메이션이다.
act1.xml에는 다음 코드를 작성했다.
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%"
android:toXDelta="-100%"
android:duration="10000"
android:repeatCount="-1"
android:fillAfter="true"
/>act2.xml에는 다음 코드를 작성했다.
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000"
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="3.0"
android:toYScale="3.0"
/>각 xml 파일을 수정했다고 해도 애니메이션이 자동적으로 재생이 되는 것이 아니기 때문에 MainActivity 코드 추가가 필요하다.
버튼을 두개 추가하였기 때문에 각 버튼에 대한 이벤트 처리 코드도 작성해야 한다.
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v) {
Animation anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.act1);
v.startAnimation(anim);
}
});
Button button2 = (Button) findViewById(R.id.button2);
button2.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v) {
Animation anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.act2);
v.startAnimation(anim);
};
});
}
}
마지막으로 AVD를 실행하고, 각 버튼을 누르니 애니메이션이 제대로 실행이 된다. ACT1 버튼은 중간에서 왼쪽으로 이동하였고, ACT2 버튼은 확대가 됐다.
