Barra de búsqueda vertical en Android

Un SeekBar en Android es una extensión de ProgressBar que incluye un pulgar móvil para cambiar el progreso en tiempo real. Android ProgressBar es un control de interfaz de usuario que indica el progreso de una operación. Estas SeekBars y ProgressBars generalmente se muestran horizontalmente. Sin embargo, la orientación se puede cambiar según las necesidades del usuario.

Entonces, en este artículo, le mostraremos cómo podría implementar una SeekBar vertical en Android. Siga los pasos a continuación una vez que el IDE esté listo.

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.

Paso 2: 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 . Agregue un TextView para mostrar el progreso y una barra de búsqueda como se muestra a continuación. Tenga en cuenta agregar el atributo de rotación a SeekBar a 270 grados para que sea exactamente vertical.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="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">
  
    <TextView
        android:id="@+id/text_view_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="50sp"
        android:textSize="50sp"/>
  
    <SeekBar
        android:id="@+id/seek_bar_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:rotation="270"/>
  
</RelativeLayout>

Paso 3: trabajar con el archivo MainActivity.kt

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

package org.geeksforgeeks.verticalseekbar
  
import android.os.Build
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.SeekBar
import android.widget.TextView
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // Declaring and initializing 
        // the elements from the layout
        val mTextView = findViewById<TextView>(R.id.text_view_1)
        val mSeekBar = findViewById<SeekBar>(R.id.seek_bar_1)
  
        // Set the min, max and current
        // values to the SeekBar
        var mMin = 0
        var mMax = 100
        var mCurrent = 20
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            mSeekBar.min = mMin
            mSeekBar.max = mMax
        }
          
        // Set the current to progress
        // and display in the TextView
        mSeekBar.progress = mCurrent
        mTextView.text = mCurrent.toString()
  
        // On Change Listener to change 
        // current values as drag
        mSeekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
            override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) {
                mCurrent = p1
                mTextView.text = mCurrent.toString()
            }
  
            override fun onStartTrackingTouch(p0: SeekBar?) {}
            override fun onStopTrackingTouch(p0: SeekBar?) {}
        })
    }
}

Producción:

Puede ver que SeekBar gira 270 grados y el progreso cambia a medida que lo arrastra el usuario.