El Arsenal de Android – Vistas

Bienvenido al repositorio de LiveChart ?

LiveChart es una biblioteca de Android de código abierto para dibujar gráficos hermosos pero poderosos. La biblioteca permite la personalización del color y la visualización de datos, en una API descriptiva fácil de aprender.

Dibuje desde una línea simple hasta un gráfico completamente etiquetado con límites y línea de base. La biblioteca es perfecta (y nació) para dibujar gráficos financieros donde la línea de base y el color del gráfico son importantes.

Agréguelo a su aplicación

Para insertar LiveChart en su compilación:

Paso 1. Agregue el repositorio JitPack a su archivo de compilación

Agréguelo en su build.gradle raíz al final de los repositorios:

  allprojects  {
 repositorio {
   ... .
  maven {url   & # 39;  https://jitpack.io  & # 39;  }
 }
} 

Paso 2. Agregue la dependencia

  dependencias  {
   implementación   & # 39;  com.github.Pfuster12: LiveChart: 1.2.2  & # 39; 
} 

Contribuya

¡Cualquiera puede contribuir! El repositorio es compatible con Commitizen, consulte las pautas de mensajes de confirmación.

Hoja de ruta

La biblioteca LiveChart acaba de comenzar. Eche un vistazo a la hoja de ruta para ver nuevas funciones en el horizonte. ¿Tiene una solicitud? Abra un problema con una etiqueta de función.

Cómo utilizar

Necesitará una referencia a una visualización LiveChart a través de XML o mediante programación:

  <?  xml    versión  =   " 1.0 "     codificación  =   " utf-8 " [19659026]? >
< FrameLayout    xmlns [19659028]: [19659028] Android  = [19659009] " http://schemas.android.com/apk/res/android " [19659014]   xmlns :  herramientas  =   " http://schemas.android.com/tools " 
  android : [19659028] layout_width  =   " match_parent " 
  android :  layout_height  =   " match_parent"  
  android :  clipChildren  =   " false " 
  herramientas :  context  =   " .MainActivity " >

    < com  .yabu.livechart.view.LiveChart
         android :  id  =   " @ + id / live_chart " 
  android :  layout_width  =   " match_parent " 
  android :  layout_height  =   " 300dp "   />

</  FrameLayout > 
  val  liveChart  =  findViewById ( R  .id.live_chart) 

LiveChart sabe cómo dibujar de un Solo conjunto de datos . Cree un nuevo conjunto de datos que contenga una lista de DataPoints :

  val  liveChart  =  findViewById ( R  .id.live_chart)

  val  conjunto de datos  =    Conjunto de datos  ( mutableListOf  ( DataPoint  ( 0f   1f]),
     DataPoint  ( 1f   3f ),
     DataPoint  ( 2f   6f ))) 

Para iniciar la operación de dibujo, la biblioteca utiliza una API pública descriptiva y concatenable: [19659061] val liveChart = findViewById ( R .id.live_chart)

val conjunto de datos = Conjunto de datos ( mutableListOf ( DataPoint ( 0f 1f]),
DataPoint ( 1f 3f ),
DataPoint ( 2f 6f )))

// establecer conjuntos de datos, mostrar opciones y … dibujar!
livechart.setDataset (conjunto de datos)
.drawYBounds ()
.drawBaseline ()
.drawFill ()
.drawDataset ()

Opciones de dibujo

El gráfico puede ser tan simple como dibujar una línea en un lienzo en blanco:

   val  dataset  =    Dataset  ( mutableListOf  ( DataPoint  ( 0f   1f ),
     DataPoint  ( 1f   3f ),
     DataPoint  ( 2f   6f )))

livechart.setDataset (conjunto de datos)
    .drawDataset () 

O proporcione el conjunto completo de capacidades de visualización agregando una línea de base, un relleno de degradado y límites de eje con etiquetas de datos:

   val  dataset  =    Conjunto de datos  ( mutableListOf  ( DataPoint  ( 0f   1f ),
     DataPoint  ( 1f   3f ),
     DataPoint  ( 2f   6f )))

livechart.setDataset (conjunto de datos)
       //  Dibuja los límites del eje Y con puntos de datos de texto. 
    .drawYBounds ()
      //  Dibuja una línea de base personalizable desde el primer punto del conjunto de datos o establece manualmente un punto de datos 
    .drawBaseline ()
      //  Establezca manualmente el punto de datos desde el que dibujar la línea de base, 
    .setBaselineManually ( 1.5f )
      //  Dibuja un relleno en la línea del gráfico. Puede establecer si se dibuja con un degradado transparente 
      //  o un relleno sólido. El valor predeterminado es degradado. 
    .drawFill (withGradient  =    true )
      //  dibuja el color de la ruta y el relleno en función de si está por encima o por debajo del punto de datos base 
    .drawBaselineConditionalColor ()
    .drawDataset () 

Consulte la captura de pantalla para ver las diferentes opciones y el cambio de color por debajo de la línea de base / por encima de la línea de base.

Puede encontrar todas las opciones de dibujo posibles en la referencia API.

Estilo

Nivel de código de estilo

Desde v1.1.0 LiveChart admite el estilo personalizado de casi toda su interfaz a través de la clase LiveChartStyle . El objeto de estilo contiene todas las opciones de estilo disponibles como propiedades editables:

  val  style  =    LiveChartStyle  ().  aplicar  {
    textColor  =    Color .  AZUL 
    textHeight  =    30f 
    mainColor  =    Color .  VERDE 
    mainFillColor  =    Color .  MAGENTA 
    baselineColor  =    Color .  AZUL 
    pathStrokeWidth  =    12f 
    baselineStrokeWidth  =    6f 
}

  //  Pase el objeto de estilo para verlo mediante el método setLiveChartStyle (estilo: LiveChartStyle) 
livechart.setDataset (conjunto de datos)
    .setLiveChartStyle (estilo)
    .drawBaseline ()
    .drawFill (withGradient  =    true )
    .drawYBounds ()
    .drawDataset () 

El ejemplo anterior daría como resultado una vista bastante horrible (pero precisa) de:

Para ver el conjunto completo de atributos disponibles para personalizar, consulte Referencia de LiveChartStyle . Cualquier atributo que no se establezca explícitamente como alternativa a los valores predeterminados del objeto LiveChartAttributes también puede aparecer en la referencia.

Estilo con XML

También es posible aplicar estilo a varios atributos mediante atributos de diseño XML. Por ejemplo:

  < com  .yabu.livechart.view.LiveChart
         android :  id  =   " @ + id / live_chart " 
  android :  layout_width  =   " match_parent " 
  android :  layout_height  =   " 300dp " 
  app :  labelTextColor  =   " @ color / colorAccent " 
  app :  pathColor  =   " @ color / colorAccent " 
  aplicación :  pathStrokeWidth  =   " 4dp " 
  aplicación :  baselineStrokeWidth  =   " 4dp " 
  aplicación :  baselineDashGap  =   " 8dp  "
  aplicación [19659028]:  labelTextHeight  =   " 14sp " 
  aplicación :  baselineColor  =   " @ color / colorPrimaryDark  "[19659014]   aplicación :  overlayCircleColor  =  "  @ color / colorPrimaryDark  "
  aplicación : [19659028] overlayLineColor ] =   " @ color / colorPrimary " 
  aplicación :  overlayCircleDiameter  =   "  "[19659026] /> 

Para obtener un conjunto completo de atributos disponibles, puede consultar la referencia LiveChartView .

Segundo conjunto de datos

La biblioteca permite la comparación de datos trazando un segundo conjunto de datos en el mismo gráfico. El segundo conjunto de datos tiene de forma predeterminada un color gris, pero puede establecer el color manualmente mediante el objeto de estilo:

   val  firstDataset  =    Conjunto de datos  ( mutableListOf  ( DataPoint  ( 0f   1f ),
     DataPoint  ( 1f   2f ),
     DataPoint  ( 2f   3f ),
     DataPoint  ( 3f   4f ),
     DataPoint  ( 4f   5f ),
     DataPoint  ( 5f   8f ),
     DataPoint  ( 6f   13f ),
     DataPoint  ( 7f   21f )
))

 val  secondDataset  =    Dataset  ( mutableListOf  ( DataPoint  ( 0f   0f]),
     DataPoint  ( 1f   1f ),
     DataPoint  ( 2f   2f ),
     DataPoint  ( 3f   3f ),
     DataPoint  ( 4f   4f ),
     DataPoint  ( 5f   5f ),
     DataPoint  ( 6f   10f ),
     DataPoint  ( 7f   18f )
))

 val  style  =    LiveChartStyle  ().  aplicar  {
    mainColor  =    Color .  GRIS 
    secondColor  =    Color .  MAGENTA 
    pathStrokeWidth  =    8f 
    secondPathStrokeWidth  =    8f 
}

livechart.setDataset (primer conjunto de datos)
    .setSecondDataset (secondDataset)
    .setLiveChartStyle (estilo)
    .drawYBounds ()
    .drawDataset () 

El resultado es el siguiente gráfico:

NOTA ¿Desea más de dos conjuntos de datos? No se preocupe, la hoja de ruta del proyecto está destinada a respaldar la elaboración de un número ilimitado de conjuntos de datos proporcionados en una lista.

Eventos táctiles

Desde v1.2.0 LiveChart admite eventos táctiles y puede dibujar un cursor DataPoint visual que se mueve con el dedo.

La superposición táctil está incorporada en la clase LiveChart . Puede definir el estilo del control deslizante vertical y el círculo mediante el objeto LiveChartStyle o mediante los atributos XML (ver arriba):

  val  chartStyle  = [19659062] LiveChartStyle  ().  se aplica  {
    overlayLineColor  =    Color .  AZUL 
    overlayCircleDiameter  =    32f 
    overlayCircleColor  =    Color .  VERDE 
}

livechart.setDataset (conjunto de datos)
    .setLiveChartStyle (chartStyle)
    .drawDataset () 

Sin embargo, dibujar el cursor horizontal no nos dice mucho. Podemos agregar un oyente para obtener el DataPoint actual del evento táctil con LiveChart.OnTouchCallback :

  val  textView  =  findViewById ( R  .id.text_view)

livechart.setDataset (conjunto de datos)
        .setLiveChartStyle (chartStyle)
        .setOnTouchCallbackListener ( objeto  :    LiveChart.OnTouchCallback  {
            sobrescribe la diversión en TouchCallback (punto :    DataPoint ) {
                textView.text  =    " ( $ {" %. 2f  "  .format (point.x)} [19659028] $ {  "%. 2f "   .format (point.y)} )  "
}
        })
        .drawDataset () 

Esto nos permite mostrar el punto actual que el usuario está arrastrando.

Desactivación de la superposición táctil

Si no desea la superposición táctil, se puede desactivar fácilmente:

  livechart .setDataset (conjunto de datos)
        .disableTouchOverlay ()
        .drawDataset () 

Es posible que desee hacer esto cuando la vista del gráfico sea demasiado pequeña para aprovechar las interacciones táctiles, o si necesita una optimización adicional al dibujar la vista y requeriría la menor sobrecarga posible.

Consideraciones sobre las cosas

LiveChart intenta dejar la menor huella posible, extendiéndose desde la clase View integrada de Android para realizar operaciones de dibujo. A continuación se muestran los consejos de mejores prácticas para realizar solo operaciones de dibujo y evitar establecer variables en la memoria al llamar a onDraw () .

SIN EMBARGO dibujar grandes conjuntos de datos es una operación costosa y la interfaz de usuario de Android hará que parezca "janky" si no tiene cuidado con la cantidad de datos que ingresa.

Un buen ciudadano de Android dibujará solo los puntos de datos necesarios, evitará llamar repetidamente a drawDataset () y no animará LiveChartView en exceso.

Solo con LiveChartView

Aunque el punto de entrada principal a esta biblioteca es la clase de diseño LiveChart que contiene funcionalidad táctil adicional, la clase básica View ] LiveChartView que en realidad hace el dibujo, se mantiene público en caso de que existan requisitos de rendimiento y no sea necesario que las vistas táctiles superpuestas estén sobrecargadas (también puede deshabilitarlo, ver más arriba).

También le permite anularlo y agregar funcionalidad personalizada a esta clase base, ya que LiveChart se mantiene final.

La vista tiene exactamente los mismos atributos xml y API pública que la clase LiveChart por lo que son casi intercambiables.

.

Compruebe también

Nuevos gadgets de Android y wearables en el Mobile World Congress + ¡Sintoniza un nuevo episodio de #TheAndroidShow la próxima semana!

Publicado por Anirudh Dewani, Director de Relaciones con Desarrolladores de Android Hoy, en el Mobile …

Deja una respuesta

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