[Android] 블러 효과

요즘 블러효과로 꾸며진 어플리케이션이 자주 나온다. 스크롤을 내렸을때, 정해진 지점까지 블러효과를 낼 수있는 방법에 대해 알아보자.

블러효과는 16버전 이후에 나온 기능이다.

public static Bitmap blur(Context ct, Bitmap sentBitmap, int radius) {

		if (VERSION.SDK_INT > 16) {
			Bitmap bitmap = sentBitmap.copy(sentBitmap.getConfig(), true);

			final RenderScript rs = RenderScript.create(ct);
			final Allocation input = Allocation.createFromBitmap(rs, sentBitmap, Allocation.MipmapControl.MIPMAP_NONE,
					Allocation.USAGE_SCRIPT);
			final Allocation output = Allocation.createTyped(rs, input.getType());
			final ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
			script.setRadius(radius); 
			script.setInput(input);
			script.forEach(output);
			output.copyTo(bitmap);
			return bitmap;
		}
		return sentBitmap;
	}

위 함수를 통해서 블러처리된 이미지를 구할 수 있다.

위 함수를 통해서 우선 블러처리를 한다고해도, 스크롤시에 어떻게 블러효과를 낼 수 있을까

이는 찾아보니 생각보다 단순했다. FrameLayout 또는 RelativeLayout을 통해서 정상 이미지와 블러된 이미지 두 개를 겹치는 것이다. 여기서 그 위에 ListView 또는 Scroll을 통해서 화면에 변화가 있을 때, 블러된 이미지의 알파값을 변경 시켜주는 것이다.

처음 블러된 이미지의 알파값을 통해 완전히 이미지가 보이지 않도록하고, 스크롤에 따라 알파값을 변경해주면, 이미지가 블러처리되어 보이게 된다.

이 글에서는 리스트를 통해 블러효과를 내는 방법을 기술하겠다.

원리는 위와 같으며, 리스트에 headerView를 추가하고 headerView가 차지하고 있는 높이 만큼 스크롤이 내려가면 블러처리되는 것을 만들어보자.

리스트를 구현함에 있어, 모르는 분이 없을 것이라 생각하고 기본적인 사항은 제외하고 넘어가겟다.

우선, 블러된 이미지를 만들어야한다.

private void InvalidateView() {
		int screenWidth = getDefaultDisplay().getWidth();
		Bitmap bmpBlurred = BitmapFactory.decodeResource(this.getResources(),
				imgId);
		bmpBlurred = Bitmap
				.createScaledBitmap(
						bmpBlurred,
						screenWidth,
						(int) (bmpBlurred.getHeight() * ((float) screenWidth) / (float) bmpBlurred
								.getWidth()), false);

		bmpBlurred = Blur.blur(this, bmpBlurred, blurRate);
		mBlurredImage.setImageBitmap(bmpBlurred);
	}

그리고, 리스트의 해더뷰를 만들어보자.

v.setLayoutParams(new ListView.LayoutParams(LayoutParams.MATCH_PARENT,
				headHeight));
		v.setBackgroundColor(Color.parseColor("#00000000"));

		((LinearLayout) v).setGravity(Gravity.CENTER_VERTICAL);
		((LinearLayout) v).setOrientation(LinearLayout.VERTICAL);

		TextView title = new TextView(this);
		title.setText("Sim's Review\n");
		title.setTextColor(Color.parseColor("#DEDEDE"));
		title.setGravity(Gravity.CENTER);
		title.setTextSize(60f);
		((LinearLayout) v).addView(title);

다음과 같이 리스트뷰를 하나 선언하고, 그 안에 TextView를 추가했다.

마지막으로, 스크롤시 알파값을 변경해서 블러효과를 내보자.

mList.setOnScrollListener(new OnScrollListener() {

			@Override
			public void onScrollStateChanged(AbsListView view, int scrollState) {

			}

			public void onScroll(AbsListView view, int firstVisibleItem,
					int visibleItemCount, int totalItemCount) {

				// 블러 처리된 이미지의 알파값을 변경한다.
				alpha = (float) - headerView.getTop() / (float) headHeight;
				if (alpha > 1) {
					alpha = 1;
				}

				mBlurredImage.setAlpha(alpha);
				mBlurredImage.setTop(headerView.getTop() / 2);
				mNormalImage.setTop(headerView.getTop() / 2);
			}
		});

이게 끝이다.

결과는 다음과 같이 나오게 된다.