11.18: Un “blog” personale per Android sfruttando Firebase: aggiungere una foto profilo, il crop dell’immagine

Condividi su:

Nello scorso articolo abbiamo iniziato ad implementare il codice necessario all’inserimento di un’immagine profilo contestualmente alla creazione di un nuovo account. In questo articolo vedremo come dare la possibilità all’utente di effettuare un crop di quell’immagine prima di salvarla e creare l’account.





Per queste operazioni ci avvarremo di una delle tante librerie liberamente disponibili. Non avrebbe senso riscrivere da zero del codice, quando qualcun altro l’ha già fatto. Non sfrutteremmo appieno le potenzialità della programmazione orientata agli oggetti, che fa del suo cavallo di battaglia proprio il riutilizzo del codice, reso possibile dalle sue peculiarità.

La libreria in questione è ancora una volta open source e si chiama Android Image Cropper. Questa rende disponibili tutti quegli strumenti di modifica basilare delle immagini, cioè per l’appunto il crop, la modifica dell’orientamento e lo zoom.

La documentazione fornita è anche molto esaustiva e permette di utilizzare tutti gli strumenti forniti senza alcuna fatica, con pochissime righe di codice.

Per prima cosa va aggiunta al progetto, inserendo nella sezione “dependencies” dello script “build.gradle” relativo ai moduli la seguente direttiva:

compile 'com.theartofdev.edmodo:android-image-cropper:2.5.+'

Questa libreria non mette a disposizione solo dei semplici metodi da richiamare dove necessario, ma una vera e propria activity che verrà richiamata quando richiesto. Questa activity farà parte a tutti gli effetti del nostro progetto, quindi va dichiarato all’interno dell’AndroidManifest. Nella sezione “application” andrà quindi aggiunta alle altre già presenti:

<activity android:name="com.theartofdev.edmodo.cropper.CropImageActivity" />

Adesso possiamo sfruttare la libreria. Tra le varie opzioni rese disponibili, a noi interessa quella che ci permette il crop dell’immagine di cui forniamo l’URI. Quindi agiremo all’interno del metodo “onActivityResult()” che verrà invocato nel momento in cui l’utente seleziona l’immagine dalla galleria:

if (requestCode == GALLERY_CODE && resultCode == RESULT_OK){
    //Preleviamo l'URI dell'immagine dai dati ricevuti
    Uri mImageUri = data.getData();
    //Crop dell'immagine attraverso l'apposita libreria
    CropImage.activity(mImageUri)
            .setAspectRatio(1, 1)
            .setGuidelines(CropImageView.Guidelines.ON)
            .start(this);
}

Come vedete non abbiamo usato alcun intent, pur avviando di fatto una nuova activity, questo perché il tutto è gestito in maniera trasparente. Di fatto richiamiamo una serie di metodi statici. Il primo avvia il setup dell’activity fornendole l’URI dell’immagine da trattare; con “setAspectRatio()” fissiamo le proporzioni della griglia utilizzata per il ritaglio, con i parametri così settati otteniamo una griglia quadrata; “setGuidelines()” permette di abilitare o meno dei tratti guida; infine avviamo l’activity con “start()”.

Tutto qui. Se provate l’app e all’atto della creazione di un account cliccate sull’ImageButton e poi selezionate un’immagine, vedrete che si aprirà una nuova activity con gli strumenti necessari al cropping. Ovviamente effettuando l’operazione e cliccando su “CROP” non succederà nulla, poiché questa activity fornirà come risposta l’immagine modificata, ma la nostra activity non è ancora pronta a riceverla, quindi continuiamo ad adattarla:

if (requestCode == CropImage.CROP_IMAGE_ACTIVITY_REQUEST_CODE) {
    CropImage.ActivityResult result = CropImage.getActivityResult(data);
    if (resultCode == RESULT_OK) {
        resultUri = result.getUri();
        avatarPic.setImageURI(resultUri);
    } else if (resultCode == CropImage.CROP_IMAGE_ACTIVITY_RESULT_ERROR_CODE) {
        Exception error = result.getError();
    }
}

“resultUri” non è stato dichiarato, quindi lo aggiungeremo tra i field:

private Uri resultUri = null;

Come vedete la stessa modalità usata per intercettare l’immagine ricevuta dalla galleria, con la differenza che stavolta il request code sarà diverso, quindi anche le operazioni da eseguire (siamo ovviamente all’interno di “onActivityResuòt()”). Per prima cosa recuperiamo il dato di risposta attraverso l’oggetto e il metodo fornito dalla libreria; dopo da questo ricaviamo l’URI dell’immagine modificata e infine la settiamo sull’ImageButton.

Non abbiamo finito qui, poiché adesso tocca salvare l’immagine nello storage di Firebase e un suo riferimento nel database tra i dati dell’utente. Di questo ci occuperemo nel prossimo articolo.


Conclusioni

Le potenzialità del riutilizzo di codice già scritto le avevamo già constatate, il tutto si traduce nell’importazione della libreria e nella chiamata di alcuni metodi. Ciò che succede sotto il cofano a noi non interessa minimamente, anche se essendo una libreria open-source possiamo esplorarne tranquillamente il codice. Quel poco di cui abbiamo bisogno è fornito tramite la documentazione, così facendo risparmiamo una marea di lavoro e fatica.

Queste poche righe di codice ci hanno permesso di apprezzare anche un’altra cosa. La nostra activity può essere predisposta per ricevere dati diversi da activity diverse. Ogni richiesta verrà contrassegnata da request code diversi, cosicché nel momento in cui vengono consegnati dati, controllando quel valore possiamo sapere cos’è e da chi arriva, agendo di conseguenza.

Condividi su:

label, ,

About the author