Android
 Computer >> コンピューター >  >> プログラミング >> Android

【Android】データベースとRecyclerViewを連携させる方法を実装例つきで解説

この記事では、AndroidアプリでRecyclerViewとデータベース(SQLite)を連携させて使用する方法を、実際のサンプルコードとともに解説します。連絡先の登録・表示・編集・削除ができるシンプルなアプリを題材に、実装手順をステップごとに見ていきましょう。

ステップ1:プロジェクトの作成と依存関係の追加

まず、Android Studioで新しいプロジェクトを作成します。メニューから「File → New Project」を選択し、必要事項を入力してプロジェクトを作成してください。

続いて、build.gradle(Module: app)に以下の依存関係を追加します。

implementation 'com.android.support:recyclerview-v7:28.0.0'
implementation 'com.android.support:cardview-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'

※サンプルコードではサポートライブラリとAndroidXが混在していますが、現在の開発ではAndroidXへ統一することをおすすめします。

ステップ2:メインレイアウト(activity_main.xml)の作成

res/layout/activity_main.xml に以下のコードを記述します。連絡先一覧を表示するRecyclerViewと、新規追加用のButtonをFrameLayout上に配置しています。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="4dp"
    tools:context=".MainActivity">
    <androidx.recyclerview.widget.RecyclerView
        android:layout_marginBottom="50dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="8dp"
        android:id="@+id/myContactList" />
    <Button
        android:id="@+id/btnAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="16dp"
        android:text="ADD"
        android:padding="2dp"
        android:layout_marginBottom="4dp"/>
</FrameLayout>

ステップ3:各種レイアウトリソースファイルの作成

次に、以下の2つのレイアウトファイルを作成し、それぞれ対応するコードを記述します。

add_contacts.xml

連絡先の追加・編集ダイアログで使う入力フォーム用レイアウトです。名前入力用のEditTextと電話番号入力用のEditTextを縦に並べています。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <EditText
        android:id="@+id/enterName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter Name"
        android:textSize="12sp"
        android:inputType="text"
        android:maxLines="1"
        android:layout_marginEnd="8dp"
        android:padding="12dp"/>
    <EditText
        android:id="@+id/enterPhoneNum"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter Number"
        android:layout_marginTop="10dp"
        android:textSize="12sp"
        android:inputType="phone"
        android:maxLines="1"
        android:layout_marginEnd="8dp"
        android:padding="12dp"/>
</LinearLayout>

contact_list_layout.xml

RecyclerViewの各行(カード形式)のレイアウトです。名前と電話番号を表示するTextViewに加え、編集用・削除用のアイコン(ImageView)を配置しています。

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="1dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="12dp">
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/contactName"
                android:layout_width="220dp"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:textStyle="bold" />
            <TextView
                android:layout_below="@+id/contactName"
                android:id="@+id/phoneNum"
                android:layout_width="220dp"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:textStyle="bold" />
        </RelativeLayout>
        <ImageView
            android:id="@+id/editContact"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:src="@drawable/ic_edit"
            android:contentDescription="TODO" />
        <ImageView
            android:id="@+id/deleteContact"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:src="@drawable/ic_remove"
            android:contentDescription="TODO" />
    </LinearLayout>
</androidx.cardview.widget.CardView>

ステップ4:ContactAdapter.java の作成

新しいJavaクラスを作成し、以下のコードを記述します。このアダプタは RecyclerView.Adapter を継承しており、あわせて Filterable を実装することで名前による絞り込み(検索)機能にも対応しています。各行の編集・削除ボタンのクリック処理もここに定義します。

import android.app.Activity;
import android.content.Context;
import android.content.DialogInterface;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.Filter;
import android.widget.Filterable;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.Objects;
import androidx.appcompat.app.AlertDialog;
import androidx.recyclerview.widget.RecyclerView;
class ContactAdapter extends RecyclerView.Adapter<ContactViewHolder>
implements Filterable {
    private Context context;
    private ArrayList<Contacts> listContacts;
    private ArrayList<Contacts> mArrayList;
    private SqliteDatabase mDatabase;
    ContactAdapter(Context context, ArrayList<Contacts> listContacts) {
        this.context = context;
        this.listContacts = listContacts;
        this.mArrayList = listContacts;
        mDatabase = new SqliteDatabase(context);
    }
    @Override
    public ContactViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.contact_list_layout, parent, false);
        return new ContactViewHolder(view);
    }
    @Override
    public void onBindViewHolder(ContactViewHolder holder, int position) {
        final Contacts contacts = listContacts.get(position);
        holder.tvName.setText(contacts.getName());
        holder.tvPhoneNum.setText(contacts.getPhno());
        holder.editContact.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                editTaskDialog(contacts);
            }
        });
        holder.deleteContact.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mDatabase.deleteContact(contacts.getId());
                ((Activity) context).finish();
                context.startActivity(((Activity) context).getIntent());
            }
        });
    }
    @Override
    public Filter getFilter() {
        return new Filter() {
            @Override
            protected FilterResults performFiltering(CharSequence charSequence) {
                String charString = charSequence.toString();
                if (charString.isEmpty()) {
                    listContacts = mArrayList;
                }
                else {
                    ArrayList<Contacts> filteredList = new ArrayList<>();
                    for (Contacts contacts : mArrayList) {
                        if (contacts.getName().toLowerCase().contains(charString)) {
                            filteredList.add(contacts);
                        }
                    }
                    listContacts = filteredList;
                }
                FilterResults filterResults = new FilterResults();
                filterResults.values = listContacts;
                return filterResults;
            }
            @Override
            protected void publishResults(CharSequence charSequence, FilterResults filterResults) {
                listContacts = (ArrayList<Contacts>) filterResults.values;
                notifyDataSetChanged();
            }
        };
    }
    @Override
    public int getItemCount() {
        return listContacts.size();
    }
    private void editTaskDialog(final Contacts contacts) {
        LayoutInflater inflater = LayoutInflater.from(context);
        View subView = inflater.inflate(R.layout.add_contacts, null);
        final EditText nameField = subView.findViewById(R.id.enterName);
        final EditText contactField = subView.findViewById(R.id.enterPhoneNum);
        if (contacts != null) {
            nameField.setText(contacts.getName());
            contactField.setText(String.valueOf(contacts.getPhno()));
        }
        AlertDialog.Builder builder = new AlertDialog.Builder(context);
        builder.setTitle("Edit contact");
        builder.setView(subView);
        builder.create();
        builder.setPositiveButton("EDIT CONTACT", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                final String name = nameField.getText().toString();
                final String ph_no = contactField.getText().toString();
                if (TextUtils.isEmpty(name)) {
                    Toast.makeText(context, "Something went wrong. Check your input values", Toast.LENGTH_LONG).show();
                } else {
                    mDatabase.updateContacts(new
                    Contacts(Objects.requireNonNull(contacts).getId(), name, ph_no));
                    ((Activity) context).finish();
                    context.startActivity(((Activity)
                    context).getIntent());
                }
            }
        });
        builder.setNegativeButton("CANCEL", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                Toast.makeText(context, "Task cancelled",Toast.LENGTH_LONG).show();
            }
        });
        builder.show();
    }
}

ステップ5:Contacts.java の作成

連絡先データを保持するモデルクラスです。id・名前・電話番号をフィールドとして持ち、getter/setterを備えています。

public class Contacts {
    private int id;
    private String name;
    private String phoneNumber;
    Contacts(String name, String phno) {
        this.name = name;
        this.phoneNumber = phno;
    }
    Contacts(int id, String name, String phno) {
        this.id = id;
        this.name = name;
        this.phoneNumber = phno;
    }
    int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    String getPhno() {
        return phoneNumber;
    }
    public void setPhno(String phno) {
        this.phoneNumber = phno;
    }
}

ステップ6:ContactViewHolder.java の作成

RecyclerViewの各行のビューへの参照を保持するViewHolderクラスです。findViewByIdの呼び出しを一度だけ行うことで、スクロール時のパフォーマンスを向上させます。

import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.recyclerview.widget.RecyclerView;
class ContactViewHolder extends RecyclerView.ViewHolder {
    TextView tvName, tvPhoneNum;
    ImageView deleteContact;
    ImageView editContact;
    ContactViewHolder(View itemView) {
        super(itemView);
        tvName = itemView.findViewById(R.id.contactName);
        tvPhoneNum = itemView.findViewById(R.id.phoneNum);
        deleteContact = itemView.findViewById(R.id.deleteContact);
        editContact = itemView.findViewById(R.id.editContact);
    }
}

ステップ7:SqliteDatabase.java の作成

SQLiteOpenHelper を継承したデータベース操作クラスです。テーブルの作成に加え、連絡先の一覧取得・追加・更新・削除という一連のCRUD処理を実装しています。

import android.content.ContentValues;
import android.content.Context;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;
import java.util.ArrayList;
public class SqliteDatabase extends SQLiteOpenHelper {
    private static final int DATABASE_VERSION = 5;
    private static final String DATABASE_NAME = "Contacts";
    private static final String TABLE_CONTACTS = "Contacts";
    private static final String COLUMN_ID = "_id";
    private static final String COLUMN_NAME = "contactName";
    private static final String COLUMN_NO = "phoneNumber";
    SqliteDatabase(Context context) {
        super(context, DATABASE_NAME, null, DATABASE_VERSION);
    }
    @Override
    public void onCreate(SQLiteDatabase db) {
        String CREATE_CONTACTS_TABLE = "CREATE TABLE "
            + TABLE_CONTACTS + "(" + COLUMN_ID
            + " INTEGER PRIMARY KEY,"
            + COLUMN_NAME + " TEXT,"
            + COLUMN_NO + " INTEGER" + ")";
        db.execSQL(CREATE_CONTACTS_TABLE);
    }
    @Override
    public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
        db.execSQL("DROP TABLE IF EXISTS " + TABLE_CONTACTS);
        onCreate(db);
    }
    ArrayList<Contacts> listContacts() {
        String sql = "select * from " + TABLE_CONTACTS;
        SQLiteDatabase db = this.getReadableDatabase();
        ArrayList<Contacts> storeContacts = new ArrayList<>();
        Cursor cursor = db.rawQuery(sql, null);
        if (cursor.moveToFirst()) {
            do {
                int id = Integer.parseInt(cursor.getString(0));
                String name = cursor.getString(1);
                String phno = cursor.getString(2);
                storeContacts.add(new Contacts(id, name, phno));
            }
            while (cursor.moveToNext());
        }
        cursor.close();
        return storeContacts;
    }
    void addContacts(Contacts contacts) {
        ContentValues values = new ContentValues();
        values.put(COLUMN_NAME, contacts.getName());
        values.put(COLUMN_NO, contacts.getPhno());
        SQLiteDatabase db = this.getWritableDatabase();
        db.insert(TABLE_CONTACTS, null, values);
    }
    void updateContacts(Contacts contacts) {
        ContentValues values = new ContentValues();
        values.put(COLUMN_NAME, contacts.getName());
        values.put(COLUMN_NO, contacts.getPhno());
        SQLiteDatabase db = this.getWritableDatabase();
        db.update(TABLE_CONTACTS, values, COLUMN_ID + " = ?", new String[]{String.valueOf(contacts.getId())});
    }
    void deleteContact(int id) {
        SQLiteDatabase db = this.getWritableDatabase();
        db.delete(TABLE_CONTACTS, COLUMN_ID + " = ?", new String[]{String.valueOf(id)});
    }
}

ステップ8:MainActivity.java の実装

src/MainActivity.java に以下のコードを記述します。起動時にデータベースから連絡先を読み込んでRecyclerViewに表示し、データが一件もない場合はToastでその旨を通知します。「ADD」ボタンを押すとダイアログが開き、新しい連絡先を登録できます。

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.content.DialogInterface;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
    private SqliteDatabase mDatabase;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RecyclerView contactView = findViewById(R.id.myContactList);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        contactView.setLayoutManager(linearLayoutManager);
        contactView.setHasFixedSize(true);
        mDatabase = new SqliteDatabase(this);
        ArrayList<Contacts> allContacts = mDatabase.listContacts();
        if (allContacts.size() > 0) {
            contactView.setVisibility(View.VISIBLE);
            ContactAdapter mAdapter = new ContactAdapter(this, allContacts);
            contactView.setAdapter(mAdapter);
        }
        else {
            contactView.setVisibility(View.GONE);
            Toast.makeText(this, "There is no contact in the database. Start adding now", Toast.LENGTH_LONG).show();
        }
        Button btnAdd = findViewById(R.id.btnAdd);
        btnAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                addTaskDialog();
            }
        });
    }
    private void addTaskDialog() {
        LayoutInflater inflater = LayoutInflater.from(this);
        View subView = inflater.inflate(R.layout.add_contacts, null);
        final EditText nameField = subView.findViewById(R.id.enterName);
        final EditText noField = subView.findViewById(R.id.enterPhoneNum);
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("Add new CONTACT");
        builder.setView(subView);
        builder.create();
        builder.setPositiveButton("ADD CONTACT", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                final String name = nameField.getText().toString();
                final String ph_no = noField.getText().toString();
                if (TextUtils.isEmpty(name)) {
                    Toast.makeText(MainActivity.this, "Something went wrong. Check your input values", Toast.LENGTH_LONG).show();
                }
                else {
                    Contacts newContact = new Contacts(name, ph_no);
                    mDatabase.addContacts(newContact);
                    finish();
                    startActivity(getIntent());
                }
            }
        });
        builder.setNegativeButton("CANCEL", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                Toast.makeText(MainActivity.this, "Task cancelled", Toast.LENGTH_LONG).show();
            }
        });
        builder.show();
    }
    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (mDatabase != null) {
            mDatabase.close();
        }
    }
}

ステップ9:AndroidManifest.xml の設定

androidManifest.xml に以下のコードを記述します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

アプリの実行と動作確認

それではアプリを実行してみましょう。実機のAndroidスマートフォンをパソコンに接続しているものとします。Android Studioから実行するには、プロジェクト内のアクティビティファイルを開き、ツールバーのRunアイコンをクリックします。デバイスを選択して実行すると、モバイル端末に以下のような初期画面が表示されます。

【Android】データベースとRecyclerViewを連携させる方法を実装例つきで解説

【Android】データベースとRecyclerViewを連携させる方法を実装例つきで解説

まとめ

このように、SQLiteOpenHelperによるデータベース操作RecyclerView.Adapterを組み合わせることで、データベースの内容をリスト形式で効率よく表示できます。今回のサンプルは、追加・編集・削除に加えて名前での絞り込み検索まで実装した実用的な内容なので、実際のアプリ開発の参考にぜひ活用してください。

  1. AndroidアプリでSQLiteデータベースを使う方法を徹底解説【CRUD実装の手順】

    この記事では、AndroidアプリケーションでSQLiteデータベースを活用する方法を、実際のコード例とともに段階的に解説します。データの追加・一覧表示・更新・削除(CRUD操作)をすべて網羅したサンプルアプリを作成しながら、SQLiteの基本的な使い方をマスターしましょう。全体の流れ本チュートリアルでは、サッカー選手の名前と所属国を管理するシンプルなアプリを題材にします。主な構成要素は以下の通りです。DatabaseHelper:SQLiteOpenHelperを継承し、データベースの作成・管理を行うクラスDataBaseManager:データの挿入・取得・更新・削除を担当するクラスMain

  2. 【Android】RecyclerViewで無限スクロール(無限リスト)を実装する方法を徹底解説

    はじめに 本記事では、AndroidアプリでRecyclerViewを使って無限リスト(エンドレススクロール)を実装する方法を、サンプルコード付きでステップごとに解説します。リストの最下部までスクロールすると自動的に次のデータが読み込まれるこの仕組みは、SNSやニュース系アプリなどで広く採用されている定番のUIパターンです。 今回実装する主な要素は以下のとおりです。 スクロール位置の検出による追加データ読み込みのトリガー処理 読み込み中に表示するプログレスバー(LoadingViewHolder) 複数のViewTypeを持つRecyclerView.Adapterの実装 手順1:プロジ