以前の記事Activity追加と画面遷移の実装では画面遷移だけ実装して遷移先の画面の中身は作っていなかった。作成中のアプリは「写真メモアプリ」ということで写真を撮ってすぐメモを書き込む使い方が主であって、以前のレコードを後から積極的に編集する必要はない。というわけで、遷移先の画面は以下のように読み取り専用仕様で作ることにした。
- 必要な文字情報はTextView(read only)で表示
- 写真はサムネイルをGridViewで表示
- GridViewのサムネイルをタップすると拡大画面が表示される
今回は画面だけを作ることにする。「画面だけ」と断った理由は、sqliteのDBがサムネイルをGridViewで表示するのに都合が良い構造になっていない事に作業中に気づいてしまい(本番用DBの筈が…汗)、今回は既存のDB構造のままダミーのSQL文で取得したデータを使って画面の大枠を作ること、特にGridViewによるサムネイル表示の実現を目標とした。
レイアウトファイルの準備
Activity追加と画面遷移の実装で作ったTextView一個のレイアウトに項目を追加して画面を作った。XMLで全部書くのも面倒なのでAndroidStudioのGUIと併用したが、「ConstraintLayoutって何？」という状態だったのでこちらの記事を参考しながら画面を作った。
ConstrainedLayoutでは要素を画面横幅いっぱいにしたい時にlayout_width=”0dp”とするのがポイントらしい。GUIで要素を並べ上下左右のConstraintをマウスドラッグで指定したあとで、XMLファイルをいじって微調整した。
当初GridViewで要素間の間隔がバラバラで格好悪かったが、こちらの記事でのstretchModeで指定すると知り、本家サイトも参考にしながら、最終的にstretchMode=”spacingWidthUniform”とした。
activity_detail.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DetailActivity">
<TextView
android:id="@+id/date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
android:layout_marginTop="3dp"
android:padding="3dp"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/category"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
android:layout_marginEnd="3dp"
android:textColor="#2020ff"
android:textSize="20sp"
android:padding="3dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/date" />
<TextView
android:id="@+id/comment"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
android:layout_marginEnd="3dp"
android:padding="3dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/category" />
<GridView
android:id="@+id/tn_grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="auto_fit"
android:columnWidth="100dp"
android:stretchMode="spacingWidthUniform"
android:gravity="center"
android:layout_marginStart="3dp"
android:layout_marginTop="3dp"
android:layout_marginEnd="3dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/comment" />
</android.support.constraint.ConstraintLayout>
GridViewの中身のレイアウトは以下。サムネイル用のImageViewを配置しているだけ。
thumbnail_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/tn_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:padding="2dp" />
</RelativeLayout>
Activityのjavaコード
ContentProvider経由でCursorを取得し、そこからTextViewに貼り付けるレコード取得した。
本来は遷移元Activityから渡されたパラメータに基づいて特定のレコードをDBから引っ張ってくる必要があるが、DBの作り変えは次回以降に行うため、既に作成済みのDBAdapterを流用して適当なレコード(というか先頭のレコード)のデータを表示する仕様とした。
またGridViewもMainActivityのListViewと同様LoaderManagerの仕組みを使ってにデータをくべる方法をとった。こっちも本来は正しいデータを取得出来るようにDBAdapterと併せて別途修正が必要だが、今回は何かデータを引っ張って来れれば良いのでコードはMainActivityからのデッドコピー。
DetailActivity.java
package com.example.photologger;
import android.content.ContentResolver;
import android.content.Context;
import android.content.Intent;
import android.database.Cursor;
import android.net.Uri;
import android.app.LoaderManager;
import android.content.CursorLoader;
import android.content.Loader;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import static android.widget.CursorAdapter.FLAG_REGISTER_CONTENT_OBSERVER;
public class DetailActivity extends AppCompatActivity implements LoaderManager.LoaderCallbacks<Cursor> {
private long id;
private ContentResolver mContentResolver;
ThumbnailCursorAdapter mCurAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail);
mContentResolver = getContentResolver();
Intent i = getIntent();
id = i.getLongExtra("id",-1);
// 一応where句の条件も追加しているがLogDBAdapterがそのままなので無視される
Cursor cursor = mContentResolver.query(MyContentProvider.CONTENT_URI, null, "_id = " + id, null, null);
cursor.moveToFirst();
String photoUri = cursor.getString(LogDBAdapter.COL_PHOTO_URI_IX);
((TextView)findViewById(R.id.date)).setText(cursor.getString(2));
((TextView)findViewById(R.id.category)).setText(cursor.getString(3) + '-' + cursor.getString(4));
((TextView)findViewById(R.id.comment)).setText(cursor.getString(5));
cursor.close();
mCurAdapter = new ThumbnailCursorAdapter(this, null, FLAG_REGISTER_CONTENT_OBSERVER);
GridView gridView = (GridView)findViewById(R.id.tn_grid);
gridView.setAdapter(mCurAdapter);
getLoaderManager().initLoader(1, null, this); // Loader初期化
}
@Override
public Loader<Cursor> onCreateLoader(int id, Bundle args) {
return new CursorLoader(
this,
MyContentProvider.CONTENT_URI,
null,
null,
null,
null
);
}
@Override
public void onLoadFinished(Loader<Cursor> loader, Cursor data) {
mCurAdapter.swapCursor(data);
}
@Override
public void onLoaderReset(Loader<Cursor> loader) {
mCurAdapter.swapCursor(null);
}
}
GridView用にCursorAdapterを拡張
CursorAdapterの拡張の時にListViewへDBデータ表示するためにCursorAdapterの拡張を行ったのと同様、GridView用にCursorAdapterの拡張を行う。
ListViewでは1行に表示する要素をひとまとめにしたViewHolderクラスを定義し、そのオブジェクトをnewしてその中にデータをセットしたが、GridViewにはサムネイルだけしか表示させないのでViewHolderを作る必要が無い。そこで、newViewメソッドではImageViewオブジェクトを直接newしたのだが、ViewHolderで間接的にオブジェクトをnewする時は不要だったContextを引数に渡す必要が出てしまい(nullを指定すると怒られる)、ちょっと釈然としない。
package com.example.photologger;
import android.content.ContentResolver;
import android.content.Context;
import android.database.Cursor;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.provider.MediaStore;
import android.provider.MediaStore.Images;
import android.provider.MediaStore.Images.Thumbnails;
import android.support.v4.os.CancellationSignal;
import android.support.v4.widget.CursorAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.GridView;
import android.widget.ImageView;
import static android.content.ContentResolver.*;
public class ThumbnailCursorAdapter extends CursorAdapter {
private LayoutInflater mCursorInflater;
private ContentResolver mContentResolver;
private Context mContext;
public ThumbnailCursorAdapter(Context context, Cursor c, int flags)
{
super(context, c, flags);
mCursorInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
mContentResolver = context.getContentResolver();
mContext = context;
}
@Override
public View newView(Context context, Cursor cursor, ViewGroup viewGroup) {
View view = mCursorInflater.inflate(R.layout.thumbnail_item, null);
ImageView tn_img = new ImageView(mContext); // Contextが必要なのが解せない…
tn_img = (ImageView) view.findViewById(R.id.tn_image);
view.setTag(tn_img);
return view;
}
@Override
public void bindView(View view, Context context, Cursor cursor) {
ImageView imgView = (ImageView) view.getTag();
String photoUri = cursor.getString(LogDBAdapter.COL_PHOTO_URI_IX);
long tnid = Long.parseLong(photoUri.substring(photoUri.lastIndexOf("/") + 1));
Bitmap img = MediaStore.Images.Thumbnails.getThumbnail(mContentResolver, tnid, MediaStore.Images.Thumbnails.MICRO_KIND,null);
imgView.setImageBitmap(img);
}
}
実行結果
実行結果の画面は以下。コメントのテキスト(TextView @+id/comment)の高さ指定をwrap_contentにしているのでテキストの高さに応じて伸縮し、その下にGridViewのサムネイルが表示されている。但し、テキストが長すぎるためサムネイルの下のほうが画面に収まらず少し切れてしまっている。
長くなったので今回はここまでとして、次回スクロールバーを追加したり、サムネイルのタップで拡大画面が表示されるようにする。
コメント