Custom Gallery를 동작하도록 만들기는 했지만 scroll을 상하로 바꿔서 격자 구조로 사진의 thumbnail을 보는 게 편할 것 같다. 찾아보니 GridView라는 layout이 따로 있었다. Android API reference에 따르면 애초에 Grid View 자체가 2차원으로 item을 보여주는(이 말은 즉, Main이 되는 View위에 다른 View를 여러 개 보여주는) scroll이 가능한 Viewgroup이라고 한다. 이전에 만들었던 앱에서 Gallery를 GridView로 바꾸어 구연해 보자.
1. 목적 : GridView에 대해 알아보고 이를 이용한 Image Gallery(List)를 만들어보자
2. 개발 환경
- PC : Windows 7, Android Studio 1.4.1(64-bit)
- Phone : LG G pro Lollipop(API 21)
3. 참고자료
1) Android Developers - Grid View Example (http://developer.android.com/intl/ko/guide/topics/ui/layout/gridview.html)
2) AndroidHive - Android GridView Layout Tutorial (http://www.androidhive.info/2012/02/android-gridview-layout-tutorial/)
4. 과정
1) Main이 되는 Layout(여기서는 activity_main.xml)에 <GridView ...></GridView>를 다음과 같이 선언한다. 자동 완성 scroll 밑으로 <GridLayout>도 볼 수 있으나 minSdkVersion이 높으므로 낮은 사양에서도 사용할 수 있도록 <GridView>를 사용하기로 한다.
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
android:columnWidth="90dp" <!-- columnWidth(나눠진 칸 안에 있는 View의 가로 길이)에 따라 column(열)의 갯수가 달라진다 -->
android:numColumns="auto_fit" <!-- 임의로 숫자 지정 가능 -->
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center">
</GridView>
2) GridView 내부에 ImageView 들을 뿌릴 Adapter를 다음과 같이 정의한다. 이전의 Adapter 부분과 비슷하다.
// 이상 생략
// create a new ImageView for each item referenced by the Adapter
// 참고자료 내 Android Developers에 게시된 Example 수정
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
// if it's not recycled, initialize some attributes
imageView = new ImageView(mContext);
} else {
imageView = (ImageView) convertView;
}
bm = BitmapFactory.decodeFile(mBasePath + File.separator + mImgList[position]);
Bitmap mThumbnail = ThumbnailUtils.extractThumbnail(bm, 300, 300);
imageView.setPadding(8, 8, 8, 8);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setLayoutParams(new GridView.LayoutParams(GridView.LayoutParams.MATCH_PARENT, GridView.LayoutParams.MATCH_PARENT));
imageView.setImageBitmap(mThumbnail);
return imageView;
}
// 이하 생략
3) MainActivity.java 에서 앞서 정의한 GridView layout과 Adapter를 연결하고 Item Click 시 adapter에서 넘어온 해당 ImageView의 주소 값을 Toast message로 보여주도록 다음과 같이 설정한다.
public class MainActivity extends AppCompatActivity {
public String basePath = null;
public GridView mGridView;
public CustomImageAdapter mCustomImageAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
File mediaStorageDir = new File(Environment.getExternalStoragePublicDirectory(
Environment.DIRECTORY_PICTURES), "MyCameraApp");
if (! mediaStorageDir.exists()){
if (! mediaStorageDir.mkdirs()){
Log.d("MyCameraApp", "failed to create directory");
}
}
basePath = mediaStorageDir.getPath();
mGridView = (GridView)findViewById(R.id.gridview); // .xml의 GridView와 연결
mCustomImageAdapter = new CustomImageAdapter(this, basePath); // 앞에서 정의한 Custom Image Adapter와 연결
mGridView.setAdapter(mCustomImageAdapter); // GridView가 Custom Image Adapter에서 받은 값을 뿌릴 수 있도록 연결
mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Toast.makeText(getApplicationContext(), mCustomImageAdapter.getItemPath(position), Toast.LENGTH_LONG).show();
}
});
}
}
(위 Code의 실행 결과)
'개발일지' 카테고리의 다른 글
| [Admob] Admob 배치시 Required XML attribute "adSize"was missing 오류 발생 (1) | 2016.01.14 |
|---|---|
| [Android 기초] 타 앱(App.)으로 data를 보낼 때 확장자에 따른 data type (0) | 2016.01.05 |
| [Android 기초] Adapter에 대한 이해 (1) | 2015.12.11 |
| [Android 기초] Application의 Activity Life Cycle(Activity 생애 주기) 02 - Intent의 활용 (0) | 2015.12.10 |
| [Android 기초] Application의 Activity Life Cycle(Activity 생애 주기) 01 - 이론 (0) | 2015.12.08 |