TreeView en Android con ejemplo

Si está buscando los nuevos diseños de interfaz de usuario para la representación de grandes datos, hay muchas formas de representar este tipo de datos. Puede usar gráficos circulares, gráficos y muchos más tipos de vista para la implementación de estas vistas. Para mostrar datos tan grandes, podemos preferir usar TreeView. TreeView es similar a la de un árbol en el que tiene un Node principal y dentro de ese Node principal, puede crear varios Nodes según los requisitos. En este ejemplo, podemos echar un vistazo a la creación de un TreeView en su aplicación de Android. Ahora avanzaremos hacia la implementación de Tree View.

¿Qué es TreeView y cómo se ve? 

TreeView es un patrón para la representación de datos en forma de árbol para que sea más fácil para los usuarios comprender la organización de los datos en nuestra aplicación. de miradas

Ejemplo

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: Agregar dependencia a build.gradle (Módulo: aplicación)

Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.    

implementación ‘de.blox.treeview:treeview:0.1.0’

Después de agregar esta dependencia, sincronice su proyecto y ahora avanzaremos hacia su implementación. 

Paso 3: Modifique el archivo strings.xml

A continuación se muestra el código del archivo strings.xml .

<resources>
    <string name="app_name">GFG App</string>
    <string name="my_node">Node</string>
</resources>

Paso 4: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo    activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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=".MainActivity">
      
    <!--Below is the code for tree view-->
    <de.blox.treeview.TreeView
        android:id="@+id/idTreeView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
  
</RelativeLayout>

Paso 5: Cree un nuevo archivo XML

Después de agregar este TreeView, cree un nuevo archivo XML para su Node que debemos mostrar dentro de nuestro TreeView. Para crear un nuevo archivo XML, vaya a app > res > layout > Haga clic con el botón derecho en > New > Layout Resource file . Asigne un nombre a su archivo (aquí le hemos dado tree_view_node ) y haga clic en crear. Después de crear este archivo, agregue el siguiente código. A continuación se muestra el código para el  archivo tree_view_node.xml . 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
  
    <TextView
        android:id="@+id/idTvnode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@color/purple_500"
        android:padding="8dp"
        android:text="@string/my_node"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:textStyle="bold" />
  
</RelativeLayout>

Paso 6: crea una nueva clase de Java 

Ahora cree una nueva clase de Java como titular de vista para manejar nuestros Nodes en la vista de árbol. Para crear una nueva clase Java, consulte Cómo crear clases en Android Studio . Después de crear una nueva clase Java, agregue el siguiente código. Aquí hemos nombrado a la clase como Viewholder . Visor.java 

import android.view.View;
import android.widget.TextView;
  
public class Viewholder {
      
    TextView textView;
  
    Viewholder(View view) {
        textView = view.findViewById(R.id.idTvnode);
    }
}

Después de crear la clase Viewholder, avanzaremos hacia la implementación de TreeView en nuestro archivo MainActivity.java. 

Paso 7: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.view.View;
  
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
  
import de.blox.treeview.BaseTreeAdapter;
import de.blox.treeview.TreeNode;
import de.blox.treeview.TreeView;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // creating a variable for tree view.
        TreeView treeView = findViewById(R.id.idTreeView);
          
        // creating adapter class for our treeview using basetree adapter.
        // inside base tree adapter you have to pass viewholder class along 
        // with context and your layout file for treeview node.
        BaseTreeAdapter<Viewholder> adapter = new BaseTreeAdapter<Viewholder>(this, R.layout.tree_view_node) {
            @NonNull
            @Override
            public Viewholder onCreateViewHolder(View view) {
                return new Viewholder(view);
            }
  
            @Override
            public void onBindViewHolder(Viewholder viewHolder, Object data, int position) {
                // inside our on bind view holder method we
                // are setting data from object to text view.
                viewHolder.textView.setText(data.toString());
  
            }
        };
          
        // below line is setting adapter for our tree.
        treeView.setAdapter(adapter);
          
        // below tree node is a parent node of our tree 
        // node which is Geeks for Geeks.
        TreeNode root = new TreeNode("Geeks for Geeks");
          
        // below node is the first child node of our root node ie Geeks for Geeks.
        TreeNode DSAchildNode = new TreeNode("DSA");
          
        // below node is the second child of our 
        // root node ie Geeks for Geeks.
        TreeNode AlgoChildNode = new TreeNode("Algorithm");
          
        // below node is the third child of our
        // root node ie Geeks for Geeks.
        TreeNode languageNode = new TreeNode("Language");
          
        // below node is the first child of our language node.
        TreeNode CchildNode = new TreeNode("C++");
          
        // below node is the second child of our language node.
        TreeNode javaChildNode = new TreeNode("Java");
          
        // below node is the first child of our DSA node.
        TreeNode arrayChild = new TreeNode("Arrays");
          
        // below node is the second child of our DSA node.
        TreeNode stringChild = new TreeNode("Strings");
          
        // below node is the first child of our Algorithm node.
        TreeNode sortingChildNode = new TreeNode("Sorting");
  
        // below lines is used for adding child
        // nodes to our root nodes.
        root.addChild(DSAchildNode);
        root.addChild(languageNode);
        root.addChild(AlgoChildNode);
          
        // below lines is used to add languages
        // to our Language node. we are adding c++,
        // java to our language node.
        languageNode.addChild(CchildNode);
        languageNode.addChild(javaChildNode);
          
        // below line isused to add arrays, 
        // strings to our dsa node. we are 
        // adding Arrays,Strings to our DSA node.
        DSAchildNode.addChild(arrayChild);
        DSAchildNode.addChild(stringChild);
          
        // below line is used for adding sorting
        // algo to our Algorithm node.
        AlgoChildNode.addChild(sortingChildNode);
  
        // below line is for setting our root node.
        // Inside our root node we are passing "root"
        // as our root node.
        adapter.setRootNode(root);
    }
}

Producción: