DevCorner620

DevCorner: apriamo l’articolo in una nuova schermata con WebView [FeedReader]

Giuseppe Tripodi -

Continua l’appuntamento settimanale con il DevCorner: questa volta si torna con il feed reader e, dopo aver creato una listview che carica i titoli e le immagini da un elenco di oggetti di tipo Articolo, passiamo ad aprire i singoli pezzi in una nuova schermata. La cosa è molto più semplice del dovuto, visto che utilizzeremo una comoda WebView: vediamo subito come fare.

Per prima cosa creiamo una nuova activity (che noi abbiamo chiamato FullArticle) e inseriamoci all’interno una WebView che occupi l’intera schermata.

A questo punto andiamo nel metodo Java della nostra activity principale e, nel metodo update che costruisce la listView aggiungiamo un OnItemClickListener che lanci un intent verso la nostra nuova classe e inserisca come Extra l’indice dell’articolo cliccato.

@Override
    public void update(Observable observable, Object data) {
        listaArticoli = (ArrayList) data;
        ArticoloAdapter mArticoloAdapter = new ArticoloAdapter(this,listaArticoli);
        listViewArticoli.setAdapter(mArticoloAdapter);
        listViewArticoli.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView> av, View view, int i, long l)
            {
                Intent toFullArticle = new Intent(ctx, FullArticle.class);
                toFullArticle.putExtra("articleIndex",i);
                startActivity(toFullArticle);
            }
        });
    }

Per rendere l’ArrayList di Articoli visibile anche da altre classi, rendiamola static.

public static ArrayList listaArticoli = null;

A questo punto andiamo sulla nostra nuova activity chiamata FullArticle e, dopo aver definito la WebView partendo dall’ID e aver impostato lo sfondo trasparente, otteniamo dagli Extra il numero che definisce l’indice dell’articolo cliccato.

Possiamo quindi riempire la nostra WebView con il  titolo dell’articolo (inserito in un tag h2) e il contenuto, che è già formattato in HTML. Per fare in modo che l’immagine venga caricata delle giuste dimensioni, aggiungiamo una riga di CSS all’inizio per specificare che i tag img non vadano oltre il 100%.

public class FullArticle extends ActionBarActivity {
    WebView article;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_full_article);
        article= (WebView) findViewById(R.id.articleTxt);
        article.setBackgroundColor(Color.TRANSPARENT);
        Bundle extras = getIntent().getExtras();
        int articleIndex= extras.getInt("articleIndex");
        Articolo a = MyActivity.listaArticoli.get(articleIndex);
        article.getSettings().setJavaScriptEnabled(true);
        article.loadDataWithBaseURL(null, "\n"+"

"+a.getTitolo()+"

"+a.getContenuto(), null, null, null); } }

Per questa settimana è tutto: il nostro feed reader si fa sempre più completo e adesso possiamo finalmente leggere gli articoli scegliendone uno dall’elenco. Come sempre, potete visualizzare il codice completo su GitHub e se avete dubbi potete chiedere aiuto all’interno della sezione sviluppo del nostro forum.