11.10: Un “blog” personale per Android sfruttando Firebase: l’UI parte 2

Condividi su:

Stiamo sviluppando la nostra app per la gestione di un blog cloud-based grazie a Firebase. Al punto in cui siamo arrivati, l’app è in grado di gestire il login e il logout degli utenti registrati. Quando un utente effettua il login, dovrebbe essere reindirizzato all’interno della schermata con i post già salvati, quindi una nuova activity. Inoltre ne dovremo avere un’altra per l’inserimento dei post. Occupiamoci delle loro UI.



PostListActivity

Ci serviremo di una nuova activity che chiameremo PostListActivity.
Per fare in modo di arrivare in questa activity al login, agiremo all’interno del metodo “onComplete()” del listener che monitora l’esito del login. Ovviamente ci serviremo di un intent e del metodo per avviare la nuova activity. Questo dovrà essere fatto solo nel caso in cui l’operazione abbia avuto successo, quindi:

private void login(String email, String pwd) {
    /*
     * Chiamata del metodo per effettuare l'autenticazione tramite email e password
     * con aggiunta del listener per monitorare l'esito della procedura
     */
    mAuth.signInWithEmailAndPassword(email, pwd)
            .addOnCompleteListener(MainActivity.this, new OnCompleteListener<AuthResult>() {
                @Override
                public void onComplete(@NonNull Task<AuthResult> task) {
                    if (task.isSuccessful()){
                        /* Se l'autenticazione va a buon fine lo si segnala all'utente 
                         * e si passa all'activity dedicata alla lista di post
                         */
                        Toast.makeText(MainActivity.this, getResources().getString(R.string.signed_in), Toast.LENGTH_LONG).show();
                        startActivity(new Intent(MainActivity.this, PostListActivity.class));
                        finish();
                    }else{
                        //ToDo: codice per gestire il fallimento della procedura di login
                    }
                }
            });
}

La stessa cosa andrà fatta nel caso in cui l’utente sia già autenticato, quindi agiremo all’interno del listener che monitora lo stato di autenticazione:

mAuthListener = new FirebaseAuth.AuthStateListener() {
    @Override
    public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
        //Recupero dell'utente corrente
        mUser = firebaseAuth.getCurrentUser();

        //Se mUser non è null l'utente è autenticato
        if (mUser != null){
            Toast.makeText(MainActivity.this, getResources().getString(R.string.signed_in), Toast.LENGTH_LONG).show();
            startActivity(new Intent(MainActivity.this, PostListActivity.class));
            finish();
        }else{
            Toast.makeText(MainActivity.this, getResources().getString(R.string.not_signed_in), Toast.LENGTH_LONG).show();
        }

    }
};

Essendo PostListActivity dedicata alla visualizzazione di una lista di item, in questo caso prelevati dal cloud di Firebase, all’interno del suo layout avrà ovviamente una RecyclerView. Aggiungiamo questo widget all’interno di “activity_post_list.xml” e accingiamoci a creare il layout dei singoli item. Il file che lo descriverà lo chiamiamo “post_row.xml”.

Come elemento radice sfrutteremo una CardView e al suo interno organizzeremo i vari widget attraverso un LinearLayout con disposizione verticale degli elementi. Ci serviremo di un’ImageView, poiché i post che l’utente inserirà avranno un’immagine, e tre TextView: la prima per il titolo del post, la seconda per il testo di questo e l’ultima per la data. Vediamo il layout finale dell’item:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/postImageList"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:cropToPadding="false"
            android:scaleType="centerCrop"/>
        <TextView
            android:id="@+id/postTitleList"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:textSize="18sp"
            android:textStyle="bold"/>
        <TextView
            android:id="@+id/postTextList"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:paddingTop="15dp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp" />
        <TextView
            android:id="@+id/timeStampList"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:textStyle="italic" />
    </LinearLayout>

</android.support.v7.widget.CardView>

Le novità le troviamo all’interno delle proprietà dell’ImageView. Con “adjustViewBounds” settata su true preserviamo l’aspect ratio dell’immagine, poiché l’ImageView si adatterà alle misure di questa. “cropToPadding” permette di ritagliare l’immagine per adattarla al suo padding, non desiderando questa cosa settiamo la proprietà su false. “scaleType” permette di definire il modo in cui l’immagine verrà ridimensionata o spostata per far corrispondere le dimensioni a quelle dell’ImageView. Settando questa proprietà su “centerCrop” l’immagine viene scalata uniformemente, preservando il suo aspect ratio, in modo che le due dimensioni siano uguali o superiori a quelli dell’ImageView al netto del padding; il risultato sarà un’immagine centrata all’interno della view.

AddPostActivity

Prima di concludere questo articolo, dedichiamoci anche al layout di un’altra activity, quella che permetterà all’utente di inserire un nuovo post. La chiameremo “AddPostActivity”, quindi il suo layout sarà “activity_add_post.xml”.
Per questo ci serviremo di un ImageButton, che altro non è che un’ImageView che funziona da pulsante. Tramite questo permetteremo all’utente di inserire l’immagine del post. Dopo ci saranno due EditText, una per il titolo del post, l’altra per inserire il contenuto. Infine un pulsante per salvare il post. Vediamo il layout nel complesso:

<?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="com.decodexlab.blog.AddPostActivity">

    <ImageButton
        android:id="@+id/addImageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/add_img_btn"
        android:adjustViewBounds="true"
        android:contentDescription="@string/add_an_image"
        android:cropToPadding="true"
        android:scaleType="fitCenter"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.050000012"/>

    <EditText
        android:id="@+id/titleEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/input_outline"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginLeft="8dp"
        android:padding="10dp"
        android:ems="10"
        android:hint="@string/post_title"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/addImageButton"
        app:layout_constraintVertical_bias="0.050000012" />

    <EditText
        android:id="@+id/postDescriptionET"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginLeft="8dp"
        android:background="@drawable/input_outline"
        android:ems="10"
        android:hint="@string/post_description"
        android:inputType="text"
        android:padding="15dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/titleEditText"
        app:layout_constraintVertical_bias="0.050000012" />

    <Button
        android:id="@+id/submitPost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginRight="18dp"
        android:layout_marginLeft="18dp"
        android:background="@color/colorAccent"
        android:text="@string/submit"
        android:textColor="@color/secondaryTextColor"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/postDescriptionET"
        app:layout_constraintVertical_bias="0.95" />
</android.support.constraint.ConstraintLayout>

Essendo il contenitore un ConstraintLayout questo lo costruiamo per lo più con l’editor visuale, che genera quindi tutti gli attributi. Le uniche proprietà degne di nota sono nuovamente quelle dedicate al contenitore dell’immagine, attraverso cui gli facciamo gestire l’immagine al meglio. Inizialmente sfruttiamo un placeholder, l’utente, cliccando su questa, inserirà quella del post.

Come vedete per le EditText è stato settato un drawable come background: “input_outline.xml”. Grazie a questo abbiamo definito la forma del campo di testo. Vediamo cosa contiene:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="@color/colorGrey"
        android:width="1dp" />
    <corners android:radius="20dp" />
</shape>

Come potete vedere non abbiamo fatto altro che definire una forma composta dal semplice tratto, grigio e con dimensione “1dp”. Questa forma ha inoltre gli angoli arrotondati con raggio “20dp”. L’effetto che otteniamo è il seguente:

AddPostActivity layout



Possiamo fermarci qui, abbiamo disegnato gran parte della UI dell’app, quindi è ora di ritornare al codice. Nel prossimo articolo ci occuperemo dell’adapter della RecyclerView.

Condividi su:

label, , , , ,

About the author