Creamos una aplicación que permite agregar y mostrar datos en Realm (base de datos) para Android.
- Consulta el artículo anterior que contiene la creación del botón Floating Action Button.
- Consulta el artículo que muestra cómo se instala Realm en la aplicación.
En primer lugar, vamos a crear un cuadro de diálogo personalizado para pedir el nombre de un “tablero” y posteriormente guardarlo en la base de datos.
Primero, crearemos un Layout con el diseño que queremos para el cuadro de diálogo y luego desde Java usaremos ese layout para inflar una vista que será pasada al componente AlertDialog de Android.
Crear un layout para crear un cuadro de diálogo en Android
Da clic derecho sobre layout (app->res->layout)
Luego en New->Layout resource file
Como nombre del layout usaremos dialog_create_board. En éste layout colocamos un EditText donde el usuario escribirá el nombre del “tablero”.
El código de éste layout es similar a éste:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/editTextNewBoard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:hint="Board title"/>
</android.support.constraint.ConstraintLayout>En MainActivity vamos a crear un método llamado showAlertForCreatingboard que nos servirá para construir un cuadro de diálogo personalizado. El código es el siguiente, y contiene las explicaciones necesarias.
public void showAlertForCreatingboard(String title, String message){
//Creo un builder para construir un cuadro de dialogo personalizado
AlertDialog.Builder builder = new AlertDialog.Builder(this);
//Si los parametros title y message no vienen vacíos, los utilizo para mi cuadro
if (title != null) builder.setTitle(title);
if (message != null) builder.setMessage(message);
// Creo una vista usando el layout dialog_create_board
View viewInflated = LayoutInflater.from(this).inflate(R.layout.dialog_create_board, null);
// Asigno esa vista al builder
builder.setView(viewInflated);
final EditText input = (EditText) viewInflated.findViewById(R.id.editTextNewBoard);
// Tendremos un botón que dice Agregar y que al dale clic...
builder.setPositiveButton("Agregar", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
// ... extrae el texto escrito en el EditText llamado editTextNewboard
String boardName = input.getText().toString().trim();
// Si el usuario escribe algo, se utiliza para crear un tablero, si no, error.
if (boardName.length() > 0)
createNewBoard(boardName);
else
Toast.makeText(getApplicationContext(), "Debe escribir un nombre", Toast.LENGTH_LONG).show();
}
});
// Muestro el cuadro de dialogo creado.
AlertDialog dialog = builder.create();
dialog.show();
}
Como puedes observar, el código anterior llama a otro método llamado createNewBoard que es el que creará un “tablero”. Veamos a continuación el código que lleva éste método que también es parte de MainActivity.
private void createNewBoard(String boardName) {
realm.beginTransaction();
Board board = new Board(boardName);
realm.copyToRealm(board);
realm.commitTransaction();
}
El código inicia una transacción (Consulta la sección de base de datos para conocer los aspectos teóricos de una transacción). Después, crea un nuevo tablero con el nombre que el usuario escribió en el EditText y confirma la transacción.
Ahora debemos lograr que el Floating Action Button llame a nuestro cuadro de diálogo personalizado (consulta el artículo Cómo crear un Floating Action Button). Para ello haremos lo siguiente:
Agrega las siguientes variables a la clase MainActivity:
private Realm realm;
private FloatingActionButton fab;
private ListView listview;
private BoardAdapter adapter;
private RealmResults<Board> boards;Éstas objetos son necesarios para: acceder a Realm, acceder al botón flotante, acceder a la listview. (La clase BoardAdapter la crearemos enseguida y se utiliza para poder mostrar los registros que se van guardando en la Base de Datos).
Agrega el siguiente código a onCreate
// Creo una instancia de Realm
realm = Realm.getDefaultInstance();
// Acceder a los datos de la BD
boards = realm.where(Board.class).findAll();
// Creo un adaptador que contiene la lista de boards y el layout diseñado
adapter = new BoardAdapter(this, boards, R.layout.list_view_board_item);
// Agrego el adaptador al listview
listview = (ListView) findViewById(R.id.listView);
listview.setAdapter(adapter);
// Enlazo el Floating Action Button (FAB) del layout
fab = (FloatingActionButton)findViewById(R.id.fabAddBoard);
// Agrego un listener para cuando se haga clic en el FAB
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
showAlertForCreatingboard("Agrega un nuevo tablero", "Escribe un nombre para el nuevo tablero");
}
});
Para poder mostrar los registros que se van guardando, necesitamos dos cosas: crear un layout para los items “tablero” y crear un adaptador que infle el listview.
Mostrar datos en Realm
En primer lugar deberemos crear un layout que utilizará cada uno de los items “tablero”.
Crear un layout para los items “tablero”
Crea un nuevo layout con el nombre list_view_board_item.xml.
El código de este layout será como el siguiente:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="@color/colorAccent"
android:layout_height="74dp"
android:orientation="vertical"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingTop="8dpb"
>
<TextView
android:id="@+id/textViewBoardTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:text="TextView"
android:textSize="18dp"/>
<TextView
android:id="@+id/textViewBoardNotes"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:text="TextView"
android:textSize="12dp"/>
</LinearLayout>
<TextView
android:id="@+id/textViewBoardDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="10dp"
android:textStyle="italic"
android:gravity="right"/>
</LinearLayout>El layout debe tener una apariencia como la siguiente:
Tendra 3 textview que mostrarán: el nombre del tablero, la cantidad de notas que contiene y la fecha en que fue creado.
Ahora crearemos un adaptador que hará uso de un ViewHolder para mostrar los datos de la Base de Datos. (Si deseas saber qué es un ViewHolder consulta el artículo: Optimizar un ListView usando ViewHolder)
Crear un adapter
Deberás crear esta nueva clase de Java dentro de una carpeta Adapters y llevará el nombre de BoardAdapter.java. El codigo será como el siguiente:
package com.example.gibgarcia.gibdata.adapters;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.BaseAdapter;
import com.example.gibgarcia.gibdata.R;
import com.example.gibgarcia.gibdata.models.Board;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.List;
/**
* Created by gibgarcia on 31/10/18.
*/
public class BoardAdapter extends BaseAdapter {
Context context;
List<Board> list;
private int layout;
public BoardAdapter (Context context, List<Board> boards, int layout){
this.context = context;
this.list = boards;
this.layout = layout;
}
@Override
public int getCount(){
return list.size();
}
@Override
public Board getItem(int position){
return list.get(position);
}
@Override
public long getItemId(int id){
return id;
}
@Override
public View getView (int position, View convertView, ViewGroup viewGroup){
ViewHolder vh;
if (convertView == null){
convertView = LayoutInflater.from(context).inflate(layout, null);
vh = new ViewHolder();
vh.title = (TextView) convertView.findViewById(R.id.textViewBoardTitle);
vh.notes = (TextView) convertView.findViewById(R.id.textViewBoardNotes);
vh.createdAt = (TextView) convertView.findViewById(R.id.textViewBoardDate);
convertView.setTag(vh);
}else{
vh = (ViewHolder) convertView.getTag();
}
Board board = list.get(position);
vh.title.setText(board.getTitle());
int numOfNotes = board.getNotes().size();
String textforNotes = (numOfNotes==1) ? numOfNotes+ " Nota" : numOfNotes+" Notas";
vh.notes.setText(textforNotes);
DateFormat df = new SimpleDateFormat("dd/MM/yyyy");
String createdAt = df.format(board.getCreatedAt());
vh.createdAt.setText(createdAt);
return convertView;
}
public class ViewHolder{
TextView title;
TextView notes;
TextView createdAt;
}
}
Resultados
Nuestra aplicación ya debería crear, guardar y mostrar los datos guardados. En apariencia se ve de ésta forma (desearás cambiar ese color, de seguro).
Tu comentario
opiniones