안드로이드(Android) HorizontalScrollView 이용해 이미지 갤러리 만들기 – 1부

안드로이드(Android) HorizontalScrollView 이용해 이미지 갤러리 만들기 – 1부

 

개발환경 : window 7 64bit, Eclipse Kepler, Android 4.2.2

 

작업을 하다 보면 가로로 객체들을 배열 할때가 있습니다. 이번 예제는 이미지들을 상단에 고정하고 갤러리 형태로 표현하였습니다. 이미지들이 많을 경우 가로 스크롤이 생기며 화면을 이리저리 드래그 해서 움직일수 있습니다.

 

우선 XML 을 사용하지 않고 레이아웃을 만들었습니다.

먼저 LinearLayout 을 만들고 LinearLayout.ORIZONTAL

옵션으로 가로 배치를 합니다.

그리고 이미지들의 배열을 만듭니다.

 

mBtnLayout = new LinearLayout(context);
			
/** 가로로 자식들을 배치 함 */
mBtnLayout.setOrientation(LinearLayout.HORIZONTAL);

Integer[] mImageIds = { 
		R.drawable.view01, 
		R.drawable.view02,
		R.drawable.view03, 
		R.drawable.view04, 
		R.drawable.view05 
};

이렇게 배열로 만든 이미지를 ImageView 객체에

For 문을 돌면서 셋팅을 합니다. 이미지를 표현할 때

setScaleType 에 FIT_XY 를 넣어 레이아웃에 가로 세로로

채워넣습니다.

 

/** 이미지 추가 */
for (int cnt = 0; cnt < mImageIds.length; cnt++) {

	ImageView i = new ImageView(context);
	i.setImageResource(mImageIds[cnt]);
	i.setLayoutParams(new LayoutParams(150, 100));
	i.setScaleType(ImageView.ScaleType.FIT_XY);

	mBtnLayout.addView(i);
}

위에서 셋팅한 LinearLayout 객체에 가로 스크롤을

표현할수 있는 HorizontalScrollView 에 addView 를

이용해 추가합니다.

 

mHorizentalScrollView = new HorizontalScrollView(context);
mHorizentalScrollView.addView(mBtnLayout);

addView(mHorizentalScrollView);

이 샘플은 리소스에 이미지를 넣고 xml 을 소스로

표현하여서 메인 소스 밖에는 없습니다.

전체소스는 아래와 같습니다.

 

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class SampleActivity1 extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(new HorizentalScrollViewMainView(this));
	}
	
	private class HorizentalScrollViewMainView extends LinearLayout {
		public HorizontalScrollView mHorizentalScrollView;
		public LinearLayout mBtnLayout;

		public HorizentalScrollViewMainView(Context context) {
			super(context);
			mBtnLayout = new LinearLayout(context);
			
			/** 가로로 자식들을 배치 함 */
			mBtnLayout.setOrientation(LinearLayout.HORIZONTAL);

			Integer[] mImageIds = { 
					R.drawable.view01, 
					R.drawable.view02,
					R.drawable.view03, 
					R.drawable.view04, 
					R.drawable.view05 
			};

			/** 이미지 추가 */
			for (int cnt = 0; cnt < mImageIds.length; cnt++) {

				ImageView i = new ImageView(context);
				i.setImageResource(mImageIds[cnt]);
				i.setLayoutParams(new LayoutParams(150, 100));
				i.setScaleType(ImageView.ScaleType.FIT_XY);

				mBtnLayout.addView(i);
			}

			mHorizentalScrollView = new HorizontalScrollView(context);
			mHorizentalScrollView.addView(mBtnLayout);

			addView(mHorizentalScrollView);
		}
	}
}

프로그램을 실행한 모습입니다. 가로로 이미지를

움직이게 되면 스크롤이 나타나게 되며 이동이

가능해집니다.