Creación de un cliente de noticias con los protocolos QUIC, MVVM y Data Binding [parte 2] | Daniel Mendoza Desarrolladores de Huawei Latinoamérica Octubre 2020

Autor del blog Ilustraciones de Gráficos de diseño

Envíe 1 archivo de configuración según el estado actual y la construcción del el. Cliente con notas notariales en relación con el servicio de newsapi.org. Definición visual de la montaña desde el punto de vista de la aplicación visual y vista ViewModel que conecta con la fuente de datos.

  • activity_news: Vea la vista principal de nuestra aplicación. Para generar este archivo, refactorice -> Cambie el nombre del archivo activity_main.xml
  • item_view: Vea la vista de cada una de nuestras noticias.

activity_news.xml

Agregaremos un SwipeRefresh Preview Layout Nuestra Colouremos Nuestro RecyclerView.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".NewsActivity">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="@+id/swipeRefreshLayout">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerNews"
android:layout_width="match_parent"
android:layout_height="match_parent">

</androidx.recyclerview.widget.RecyclerView>

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</FrameLayout>

item_view.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<data class="ArticleBinding">

<variable
name="article"
type="com.hms.demo.hquicnews.Article" />
</data>

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:background="@color/gray"
android:clickable="true"
android:elevation="5dp"
android:padding="5dp">

<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="@{article.title}"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="@{article.description}"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/title" />

<TextView
android:id="@+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="@{article.time}"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/content" />

</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Tan pronto como sea posible, el texto Text de cada TextView se asocia con una propiedad de nuestra instancia de Artículo definida dentro de la etiqueta .

class NewsViewModel : ViewModel(), NewsClient.NewsClientListener {
private val API_KEY="YOUR_API_KEY" //get your API key here: https://newsapi.org/register
private val URL = "https://newsapi.org/v2/top-headlines?apiKey=$API_KEY"
private val METHOD = "GET"
var newsClient:NewsClient?=null

private val _news=MutableLiveData<ArrayList<Article>>().apply{
value= ArrayList()
}
val news: LiveData<ArrayList<Article>> = _news
}

Nota: Para demostrar efectos efectivos, la clave API de newsapi.org de la clase NewsViewModel, sin embargo, para conservar sus claves y guardarla, es muy recomendable esta guía.

Comunicarse con la actividad

interface NewsViewModelListener{
fun onNewsDownloadComplete()
fun onItemClick(article: Article)
}

Descargando la noticia

public fun getNews(context: Context,country:String=Locale.getDefault().country) {
if(newsClient==null){
newsClient=NewsClient(context)
}
val url= "$URL&country=$country"
newsClient?.apply {
[email protected]
getNews(url,METHOD)
}
}

Escuchando la respuesta

override fun onSuccess(news: ArrayList<Article>) {
_news.postValue(news)
listener?.onNewsDownloadComplete()
}

override fun onFailure(error: String) {
listener?.onNewsDownloadComplete()
}

Gestionar la rotación de la pantalla

public fun loadNews(context: Context){
news.value?.apply {
if(isEmpty()) getNews(context)
else listener?.onNewsDownloadComplete()
}
}

Este formulario cargará loadingNews de nuestro video de actividad y getNews solo cuando use SwipeRefreshLayout para reflejar las noticias.

Escuchando las noticias

public fun onItemClick(article:Article){
listener?.onItemClick(article)
}

Cambios reservados al archivo item_view.xml para notificar los eventos onClick al ViewModel. Primero necesitamos agregar una variable en el elemento

<data class="ArticleBinding">

<variable
name="article"
type="com.hms.demo.hquicnews.Article" />

<variable
name="mainVM"
type="com.hms.demo.hquicnews.NewsViewModel" />
</data>

Ahora es posible acordar el evento onClick a nuestro ConstraintLayout para informar al ViewModel cuando vea que el usuario hace clic en un mensaje.

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:background="@color/gray"
android:clickable="true"
android:elevation="5dp"
android:onClick="@{()->mainVM.onItemClick(article)}" android:padding="5dp">

Eso es todo por ahora. En la Parte 3 crearemos nuestro adaptador RecyclerView y acordaremos la funcionalidad de la Actividad para completar nuestra aplicación.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *