테크 지식
[커뮤니티] 아마도 쉬운 안드로이드 어플만들기 [32] 그라디언트(1)
퍼갈 때에는 반드시 저작자의 허락과 저작자의 이름(아이디)를 기록하어야 합니다.
저작자는 Snails(tjdtnsu)입니다.
제발 덧글 좀 적어주세요. 강의 적는 시간은 1시간이지만 덧글은 1분도 걸리지 않습니다.
참고 : 이 강좌는 초보자를 위한 Eclipse를 사용하였습니다.
올리는 곳 : 제 네이버 블로그, 디벨로이드 카페
업로드 시간 : 매주 일요일 오후 11시
난이도 : ★★★★
오늘은 이해하면 쉬운 그라디언트를 해보겠습니다.
그 중에서도 이번 시간에는 직선 그라디언트입니다.
(책에는 그래디언트라고 나와 있는데 뭐 똑같다고 칩시다<<퍽)
이번 시간에 가장 중요한 명령어는
LinearGradient(x1,y1,x2,y2,color1,color2,TileMode)
입니다. 뭐 간단하고도 어려운데 예제를 통해 해보겠습니다.
package naver.maybeeasyandroidprogramming; import android.app.Activity;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.LinearGradient;import android.graphics.Paint;import android.graphics.Shader.TileMode;import android.os.Bundle;import android.view.Display;import android.view.Menu;import android.view.View;import android.view.WindowManager; public class MainActivity extends Activity { int width; int height; @SuppressWarnings("deprecation") @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); MyView test = new MyView(this); Display display = ((WindowManager)getSystemService(WINDOW_SERVICE)).getDefaultDisplay(); width=display.getWidth(); height=display.getHeight(); setContentView(test); } protected class MyView extends View { public MyView(Context context) { super(context); } public void onDraw(Canvas canvas) { super.onDraw(canvas); Paint p=new Paint(); p.setAntiAlias(true); int[] colors = {Color.BLUE,Color.GREEN,Color.RED,Color.YELLOW,Color.WHITE}; p.setShader(new LinearGradient(0,0,100,0, Color.BLUE,Color.GREEN,TileMode.CLAMP)); canvas.drawRect(0, 0,100,100,p); p.setShader(new LinearGradient(110,0,210,100, Color.BLUE,Color.YELLOW,TileMode.CLAMP)); canvas.drawRect(110,0,210,100,p); p.setShader(new LinearGradient(0,0,50,0, Color.GREEN,Color.YELLOW,TileMode.CLAMP)); canvas.drawRect(0,110,210,150,p); p.setShader(new LinearGradient(0,0,50,0, Color.GREEN,Color.WHITE,TileMode.REPEAT)); canvas.drawRect(0,160,210,200,p); p.setShader(new LinearGradient(0,0,50,0, Color.YELLOW,Color.RED,TileMode.MIRROR)); canvas.drawRect(0,210,210,250,p); p.setShader(new LinearGradient(0,0,210,0, colors,null,TileMode.CLAMP)); canvas.drawRect(0,260,210,300,p); } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } } |
여기 6가지의 예가 있습니다.
이것이 실행 결과인데 이제 하나씩 알아보겠습니다.
p.setShader(new LinearGradient(0,0,100,0, Color.BLUE,Color.GREEN,TileMode.CLAMP)); canvas.drawRect(0, 0,100,100,p);
파란색->초록색으로 변해가는 그라이언트입니다.
제일 간단한 형태입니다.
p.setShader(new LinearGradient(110,0,210,100, Color.BLUE,Color.YELLOW,TileMode.CLAMP)); canvas.drawRect(110,0,210,100,p);
여기서는 북서쪽에는 파란색, 남동쪽에는 노란색으로 그라이언트 처리가 됩니다.
방향의 차이는
LinearGradient(x1,y1,x2,y2,color1,color2,TileMode)
에서 납니다.
간단히 그림으로 설명하자면
뭐 그렇다는 겁니다. (x1,y1)에는 첫번째 색깔이, (x2,y2)에는 두번째 색깔이 들어가게 해서 방향을 지정하는 겁니다.
이 부분이 좀 어렵다는 겁니다.
p.setShader(new LinearGradient(0,0,50,0, Color.GREEN,Color.YELLOW,TileMode.CLAMP)); canvas.drawRect(0,110,210,150,p);
세 번째 코드입니다.
꼬리부분을 그대로 노란색으로 남겨두는 겁니다.
위에서 설명했으므로 생략
p.setShader(new LinearGradient(0,0,50,0, Color.GREEN,Color.WHITE,TileMode.REPEAT)); canvas.drawRect(0,160,210,200,p);
네 번째는 반복하게 합니다.
TileMode가 REPEAT로 바뀌었는데 그것은 끝난 자리부터 다시 시작하라는 겁니다.
p.setShader(new LinearGradient(0,0,50,0, Color.YELLOW,Color.RED,TileMode.MIRROR)); canvas.drawRect(0,210,210,250,p);
다섯번째 코드인데 이것은 TileMode가 MIRROR입니다. 그것은 끝난 자리부터 반대로 처음으로 출력하게 하는 방법입니다.
일반적으로 REPEAT보다 보기 좋군요.
int[] colors = {Color.BLUE,Color.GREEN,Color.RED,Color.YELLOW,Color.WHITE};
p.setShader(new LinearGradient(0,0,210,0, colors,null,TileMode.CLAMP)); canvas.drawRect(0,260,210,300,p);
마지막 코드입니다. 이번에는 color라는 int를 주고, 그렇게 차례차례 출력하는 겁니다.
위에서 두개의 색상밖에 못 넣은 단점을 해소합니다.
다음은 원형 그라이언트 (코드)에 대해 알아보겠습니다.