안드로이드 인스타그램 같은 멋진 그라데이션 페이지 만들기

최근에 어플을 하나 만들면서 연구해 본 분야

그 이름하여

Front page Gradation

외국애들은 인스타그램 첫 번째 페이지 같은

화려한 그라데이션이 추가된 페이지를 좋아해서

어쩔 수 없이 찾아보게 되었다.

하는 방법은 의외로 초간단

순서대로 따라만 한다면 15분 내로 마무리 할 수 있겠다.

첫 번째 - Front page image View 의 id 만들기

그라데이션을 만들려고 하는 image View의 id를 만들자

이건 매우 기초적이기 때문에 따로 설명하지 않겠다.

두 번째 - Gradation 만들기

나는 Gradation page를 5개 만들어서

적정 시간에 따라 다른 Gradation이 나올 수 있도록 만들었다.

Gradation page를 만드는 방법은

먼저 Drawable 폴더에서 xml파일 하나를 만들고 (나의 경우엔 5개 페이지가 필요해서 5개를 만들었다.)

이름은 위와 같이 main_header_bg.xml 로 했고 나는 다른 Gradation page들은 뒤에 숫자만 붙여 main_header_bg2.xml 이런 식으로 만들었다.

위와 같은 코드만 입력한다면 Gradation이 가능한 페이지가 하나 생긴 것인데

먼저 속성값중에 Angle 이란 놈은 어떤 방향으로 그라데이션을 만들 것이냐 하는 것이었다.

나는 개인적으로 135도가 제일 마음에 들어 그것으로 하였고

StartColor 와 EndColor는 비슷한 색깔로 해주는 것이 더 

멋깔스러운 것 같다.

위와 같은 방식으로 4개만 더 만들면 5개의 Gradation 페이지를 가지게 된 것이다. !

세 번째 - Transition 만들기

5개의 Gradation page를 시간에 따라서 계속 변경해 줄 수 있는

Transition page를 만들어 보도록 하겠다.

마찬가지로 Drawable 폴더에 transition.xml이라는 xml파일을 하나 더 만들어 주고

내용에는 위와 같이

그리고 item에는 내가 아까 만들어 두었던 Gradation pagee들을 넣어준다.

duration 5000의 뜻은

5초마다 변경하겠다는 뜻이다.

네 번째 - Java 에서 image view에 만들어 둔 Gradation 할당하고 시작시키기

마지막 방법이다.

이제 Front page의 Java 파일로 가서

적정한 코드만 넣어주면 끝이다.

위와 같은 코드를 나는 onCreate에 넣어주고 끝났다.

먼저 ImageView를 아까 설정해둔 id를 통해서 가져오고

transition drawable을 할당해 준다.

그런 다음

frameAnimation 객체를 생성해 아까 할당한 imageView의 배경을 가져와 넣어주고

Fade in, Fade out 효과를 적용해 준다.

그런다음

frontActivityBackground.postDelayed(new Runnable() 

코드를 이용해 쓰레드에서 start()시켜주면 끝이다.

결과적으로는 위와같은 Gradation page가 5개가 반복된다고 보면된다.

나같은 경우는 위의 빨간색 뿐 아니라

노랑색쪽 , 초록색 쪽, 파란색 쪽, 주황색 쪽 Gradation page가 계속해서 5초마다 변경 된다.

코드 복사는

Github 주소 : https://github.com/exitsmoker/Android_Application/tree/master/MyApplication

에서 res -> drawable 쪽

그리고  java -> frontActivity 쪽에서

복사하시면 되겠다.