TextView expandible en Android

ExpandableTextView es una biblioteca de Android que nos permite crear fácilmente un TextView que puede expandirse/contraerse cuando el usuario hace clic en él. Podemos usar esta función en muchas aplicaciones, como la aplicación de revisión de películas o la aplicación de narración de historias y en muchas otras aplicaciones. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el  lenguaje Java 

Expandable TextView in Android Sample GIF

Acercarse

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: antes de ir a la sección de codificación, primero haga una tarea previa

Vaya a aplicación -> res -> valores -> archivo colors.xml y configure los colores para la aplicación.

XML

<?xml version="1.0" encoding="utf-8"?>
<resources>
  
    <color name="colorPrimary">#0F9D58</color>
    <color name="colorPrimaryDark">#0F9D58</color>
    <color name="colorAccent">#05af9b</color>
  
</resources>

Vaya a aplicación -> res -> valores -> archivo strings.xml y configure la string para la aplicación.

XML

<resources>
    <string name="app_name">Manabu-GT Expandable Text View </string>
    <string name="expandable_text">We Sanchhaya Education Pvt. Ltd., are registered and headquartered
        at BC 227, 2nd Floor, Matrix Business Tower, B4, Sector 132, Noida, UP-201301, hereinafter 
        referred to as GeeksforGeeks. We also offer paid Courses managed by Sanchhaya Classes Pvt. Ltd.
        with registered office address B-142, Vishwash Park, Uttam Nagar, New Delhi, North Delhi, Delhi, India, 110059.
        At GeeksforGeeks, we value your trust and  respect your privacy. This privacy statement (“Privacy Statement”)
        applies to the treatment of personally identifiable information submitted by, or otherwise obtained from, 
        you in connection with the associated application (“Application”). The Application is 
        provided by GeeksforGeeks (and may be provided by Geeksforgeeks on behalf 
        of a GeeksforGeeks licensor or partner (“Application Partner”). 
        By using or otherwise accessing the Application, you acknowledge that you accept the practices
        and policies outlined in this Privacy Statement.</string>
</resources>

Vaya a la sección Gradle Scripts -> build.gradle (Módulo: aplicación) e importe las siguientes dependencias y haga clic en » sincronizar ahora » en la ventana emergente anterior.

implementación ‘com.ms-square:expandableTextView:0.1.4’

Paso 3: Diseño de la interfaz de usuario

En el archivo activity_main.xml, elimine el TextView predeterminado y cambie el diseño a RelativeLayout y agregue el ExpandableTextView   y dentro de él, agregamos un TextView y un ImageButton como se muestra a continuación. aplicación > res > diseño > actividad_principal.xml actividad_principal.xml 

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:expandableTextView="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!--  ExpandableTextView Container -->
    <com.ms.square.android.expandabletextview.ExpandableTextView
        android:id="@+id/expand_text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        expandableTextView:animDuration="100"
        expandableTextView:maxCollapsedLines="5">
  
        <!-- simple text view  -->
        <TextView
            android:id="@id/expandable_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:textColor="#666666"
            android:textSize="16sp" />
  
        <!-- expandable ImageButton -->
        <ImageButton
            android:id="@id/expand_collapse"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|bottom"
            android:background="@android:color/transparent" />
          
    </com.ms.square.android.expandabletextview.ExpandableTextView>
  
</RelativeLayout>

Nota: la identificación de ImageButton debe expandirse y la identificación de TextView debe ser texto expandible 

Propiedades de ExpandableTextView

  • expandableTextView:collapseDrawable: personalice un conjunto dibujable en ImageButton para colapsar TextView
  • expandableTextView:expandDrawable: se usa para establecer dibujable en ImageButton para expandir TextView
  • expandableTextView:maxCollapsedLines: el número máximo de líneas de texto que se pueden mostrar cuando TextView se colapsa (el valor predeterminado es 8 )
  • expandableTextView:animDuration: se utiliza para establecer la duración de la animación para la expansión/colapso (predeterminado en 300 ms )
  • expandableTextView:animAlphaStart: el valor alfa de TextView cuando comienza la animación ( NOTA ) Establezca este valor en 1 si desea deshabilitar la animación alfa (predeterminado en 0.7f )

Paso 4: Parte de codificación

Abra el archivo MainActivity.java y dentro de Create()  cree e inicialice la vista de texto expandible y ajústelo desde strings.xml (R.string.expandable_text) como se muestra a continuación  .

Java

// getting reference of  ExpandableTextView
ExpandableTextView expTv = (ExpandableTextView) findViewById(R.id.expand_text_view).findViewById(R.id.expand_text_view);
  
// calling setText on the ExpandableTextView so that 
// text content will be  displayed to the user
expTv.setText(getString(R.string.expandable_text));

MainActivity.java

Java

import android.os.Bundle;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.ms.square.android.expandabletextview.ExpandableTextView;
  
public class MainActivity extends AppCompatActivity {
  
  
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // getting reference of  ExpandableTextView
        ExpandableTextView expTv = (ExpandableTextView) findViewById(R.id.expand_text_view).findViewById(R.id.expand_text_view);
  
        // calling setText on the ExpandableTextView so that
        // text content will be  displayed to the user
        expTv.setText(getString(R.string.expandable_text));
    }
}

Producción: 

Publicación traducida automáticamente

Artículo escrito por onlyklohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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