Android Market公開を目指してAndroidアプリを開発する！（翻訳履歴参照編）

2010年7月12日 Android, gTranslator, Java

Follow @mojyamojya

Android Market公開を目指してAndroidアプリを開発する！（翻訳履歴保存編）では、翻訳結果をSQLiteに保存するようにしたので、今回は、その結果を参照する機能を実装していきたいと思います。

データベースは前回のサンプルで作成したものを利用します。
今回のサンプルは、ArrayAdapterとListViewコントロールを使って、翻訳履歴を一覧表示するだけという単純なのものにしました。

まず、前回作ったData Access Object（DAO)に、翻訳履歴を取得する処理を追加します。

public Cursor find(String[] columns, String order, String limit) {
    SQLiteDatabase db = connection.getWritableDatabase();
    Cursor cursor = db.query(false, ITranslate.TABLE_NAME, columns, null, null, null, null, order, limit);
 
    return cursor;
}

次に、翻訳結果の情報を格納しているTranslateModelクラスにtoString()関数をオーバーライドします。

@Override
public String toString() {
    return translated;
}

後は、SQLiteから取得した翻訳結果をArrayAdapterクラスに格納して、それをListViewコントロールにセットします。

package jp.flashcast.translator.android;
 
import jp.flashcast.translator.android.dao.TranslateDao;
import jp.flashcast.translator.android.model.TranslateModel;
import android.app.Activity;
import android.database.Cursor;
import android.os.Bundle;
import android.provider.BaseColumns;
import android.widget.ArrayAdapter;
import android.widget.ListView;
 
public class TranslatorSample5 extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        TranslateDao dao = new TranslateDao(this);
        ArrayAdapter<TranslateModel> adapter = new ArrayAdapter<TranslateModel>(this, android.R.layout.simple_list_item_1);
 
        addTranslateModel(adapter, dao.find(null, BaseColumns._ID + " DESC", null));
 
        ListView view = (ListView)findViewById(R.id.histories);
        view.setAdapter(adapter);
    }
 
    private void addTranslateModel(ArrayAdapter<TranslateModel> adapter, Cursor cursor) {
        if (cursor != null) {
            if (cursor.getCount() > 0) {
                while (cursor.moveToNext()) {
                    TranslateModel model = new TranslateModel();
                    model.setId(cursor.getInt(0));
                    model.setOriginal(cursor.getString(1));
                    model.setTranslated(cursor.getString(2));
                    model.setSrcLanguage(cursor.getString(3));
                    model.setDstLanguage(cursor.getString(4));
                    model.setDt(cursor.getString(5));
                    adapter.add(model);
                }
            }
        }
    }
}

TranslateModelクラスにtoString()関数をオーバーライドしたことで、翻訳結果だけが一覧に表示されるようになります。

画面レイアウトのXMLはこんな感じです。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <ListView
        android:id="@+id/histories"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        />
</LinearLayout>

実行結果はこちら。

あまりにシンプルすぎるので、もうちょっと工夫したいと思います。

ListViewの1行に翻訳前と翻訳後、翻訳した時間を表示し、削除ボタンもつける。
件数が増えてくると画面が長くなりすぎるので、一覧の下に「もっと読む」みたいな機能をつけて、はじめは特定の件数だけ表示する。

では、これを実現するにはどうするか？
ArrayAdapterの親クラスであるBaseAdapterを継承したクラスと、ListViewクラスを継承したクラスを実装して実現します。

前者については、こちらが非常に参考になりました。
ListViewを拡張する方法 | public static void main

まず、1行のレイアウトにあたるXMLを用意します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        >
        <TextView
            android:id="@+id/original"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:layout_marginLeft="10sp"
            android:singleLine="true"
            android:textSize="15sp"
            android:textStyle="bold"
            />
        <TextView
            android:id="@+id/translated"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:layout_marginLeft="10sp"
            android:singleLine="true"
            android:textSize="12sp"
            />
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/dt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="10sp"
                android:textSize="12sp"
                />
        </RelativeLayout>
    </LinearLayout>
    <ImageView
        android:id="@+id/delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|center_horizontal"
        android:layout_marginRight="5sp"
        />
</LinearLayout>

次に、ArrayAdapterの親クラスであるBaseAdapterを継承したクラスを作ります。1行のレイアウトはgetView()関数の中で設定(42行目)します。

package jp.flashcast.translator.android.adapter;
 
import java.util.ArrayList;
 
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import jp.flashcast.translator.android.R;
import jp.flashcast.translator.android.manager.HistoryManager;
import jp.flashcast.translator.android.model.TranslateModel;
import jp.flashcast.translator.android.view.TranslateListView;
 
public class TranslateAdapter extends BaseAdapter {
    private LayoutInflater inflater;
    private ArrayList<TranslateModel> list;
    private HistoryManager manager;
 
    public TranslateAdapter(Context context, ArrayList<TranslateModel> list, HistoryManager manager) {
        this.list = list;
        this.manager = manager;
        this.inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }
 
    public int getCount() {
        return list.size();
    }
 
    public Object getItem(int position) {
        return list.get(position);
    }
 
    public long getItemId(int position) {
        return list.get(position).getId();
    }
 
    public View getView(int position, View convertView, ViewGroup parent) {
        convertView = inflater.inflate(R.layout.list_item, null);
 
        TextView original = (TextView)convertView.findViewById(R.id.original);
        TextView translated = (TextView)convertView.findViewById(R.id.translated);
        TextView dt = (TextView)convertView.findViewById(R.id.dt);
        ImageView image = (ImageView)convertView.findViewById(R.id.delete);
 
        original.setText(list.get(position).getOriginal());
        translated.setText(list.get(position).getTranslated());
        dt.setText(list.get(position).getDt());
        image.setImageResource(android.R.drawable.ic_menu_delete);
        image.setId(list.get(position).getId());
 
        image.setOnClickListener(new OnClickListener() {
 
            public void onClick(View v) {
                manager.delete(v.getId());
                int max = manager.getHistoriesCount();
                int len = manager.setTranslateAdapter(TranslateAdapter.this, true);
                int pos = HistoryManager.HISTORY_LIST_VIEW_COUNT * (manager.getPage() - 1);
                TranslateListView view = ((TranslateListView)v.getParent().getParent());
                view.setAdapter(TranslateAdapter.this);
                view.setFooterVisible(!(len == max));
                view.setSelection((max > pos) ? pos : max);
            }
 
        });
 
        return convertView;
    }
 
    public void add(TranslateModel model) {
        list.add(model);
    }
 
    public void clear() {
        list.clear();
    }
}

55～68行目が削除ボタンクリック時の処理になります。

続いて、後者のほうです。

件数が増えてくると画面が長くなりすぎるので、一覧の下に「もっと読む」みたいな機能をつけて、はじめは特定の件数だけ表示する。

こちらのサイトが非常に参考になりました。
tappli blog: [Android] ListViewとFooterView
サンプルソースがダウンロードできるのはとてもありがたいです！

ListViewを継承したクラスを作ります。

package jp.flashcast.translator.android.view;
 
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.ListView;
import jp.flashcast.translator.android.R;
 
public class TranslateListView extends ListView {
    private View footer;
    private boolean visible;
 
    public TranslateListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
 
    @Override
    public void addFooterView(View footer) {
        super.addFooterView(footer);
 
        if (this.footer != null) {
            removeFooterView(this.footer);
        }
 
        this.footer = footer;
        ImageView img = (ImageView)this.footer.findViewById(R.id.more);
        img.setImageResource(android.R.drawable.ic_menu_more);
    }
 
    public void setFooterVisible(boolean visible) {
        if (this.footer != null) {
            if (!visible) {
                removeFooterView(this.footer);
            }
        }
 
        this.visible = visible;
    }
 
    public boolean isFooterVisible() {
        return this.visible;
    }
}

実行結果はこちら。

●初期表示

※ ここでは、翻訳履歴が少なくてもいいように、2件づつ表示されるようににしています。

●一覧の一番下の行（もっと読むのような）を押した後

●削除ボタンを押して履歴をすべて削除した後

さっきよりも、使い勝手も良くなったのではないかと思います！

サンプルソース

TranslatorSample5（シンプルな翻訳履歴一覧）：ダウンロード
TranslatorSample6（表示を工夫した翻訳履歴一覧）：ダウンロード

株式会社ライブキャスト

Android Market公開を目指してAndroidアプリを開発する！（翻訳履歴参照編）

サンプルソース

関連記事