¿Cómo puedo crear un ListView con esquinas redondeadas en Android?

  • Esta pregunta es realmente útil,así es tu respuesta..!!
InformationsquelleAutor Legend | 2009-11-05

10 Comentarios

  1. 366

    Aquí es una forma de hacerlo (Gracias a Android Documentación, aunque!):

    Agregar lo siguiente en un archivo (por ejemplo customshape.xml) y luego se coloca en (res/drawable/customshape.xml)

    <?xml version="1.0" encoding="UTF-8"?> 
    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
         android:shape="rectangle"> 
         <gradient 
             android:startColor="#SomeGradientBeginColor"
             android:endColor="#SomeGradientEndColor" 
             android:angle="270"/> 
    
        <corners 
             android:bottomRightRadius="7dp" 
             android:bottomLeftRadius="7dp" 
             android:topLeftRadius="7dp" 
             android:topRightRadius="7dp"/> 
    </shape> 

    Una vez que haya terminado con la creación de este archivo, sólo tienes que configurar el fondo en una de las siguientes maneras:

    A Través De Código:
    listView.setBackgroundResource(R.drawable.customshape);

    A través de XML, sólo tiene que añadir el siguiente atributo del contenedor (ex: LinearLayout o a alguno de los campos):

    android:background="@drawable/customshape"

    Espero que alguien la encuentre útil…

    • Gracias por el gran consejo. Sólo para tu INFORMACIÓN, copiar-pegar me dio una excepción en tiempo de ejecución, diciendo: «XmlPullParserException: Binario archivo XML de la línea #4<gradiente> etiqueta requiere que el ‘ángulo’ atributo a un múltiplo de 45».. remediar Fácilmente cambiando el ángulo de 270.
    • Gracias por la corrección… Pero no sé por qué, que podría estar sucediendo.. ¿encuentra alguna razón específica?
    • En cualquier momento pal 🙂
    • Gracias por la sugerencia! Sólo hay un problema, a pesar de que he creado un roundedrectangle.xml pero el eclipse de la finalización de código no estaba disponible en ese archivo. Funciona muy bien en el main.xml el archivo de diseño. Yo un poco dependen de la finalización de código para aprender y experimentar. Alguna idea de por qué no funciona en mi archivo nuevo? Gracias, D.
    • android:ángulo=»250″ está haciendo que la aplicación se bloquee, se ha cambiado a 45 y funcionaba bien.
    • No estoy seguro de por qué está sucediendo. Funcionó muy bien para mí en 5 diferentes instancias. ¿Tiene el registro de adb por casualidad?
    • mismo como allclaws, el ángulo debe ser múltiplo de 45 : «XmlPullParserException: Binario archivo XML de la línea #4<gradiente> etiqueta requiere que el ‘ángulo’ atributo a un múltiplo de 45»
    • No funciona bien con la selección, destacando, sin embargo: Cuando la parte superior o inferior elemento está seleccionado, el color de fondo es rectangular y se dibujan en la parte superior de las esquinas redondeadas de fondo.
    • el cambio a 45 grados trabajó también para mí.
    • sería bueno si la gente de proporcionar una vista previa en estos casos 🙂
    • Hola, ¿sabe usted por qué no se pueden utilizar las diferentes gradientes? Thanxs.
    • excelente y hace el truco 😀
    • Gracias por el código. Funciona a la perfección. Pero, ¿cómo hacer la selección también curva?
    • +1 Buena Información.!!
    • y cómo asegurarse de que todavía en la primera ronda de la esquina, incluso la parte superior/inferior del elemento de que se hace clic?
    • Hay alguna posibilidad de establecer diferentes colores para cada una de las filas y tener las esquinas redondeadas?
    • Sí, los hay. Acaba de establecer xml con las esquinas redondeadas para diseño de los elementos y, a continuación, en el adaptador de llamada: GradientDrawable dibujable = (GradientDrawable)rowView.getBackground(); imagen.setColor(Color.parseColor(myObject.getBackgroundColor())); rowView.setBackground(dibujable);

  2. 56

    A pesar de que hizo el trabajo, se llevó a cabo todo el color de fondo también. Yo estaba buscando una manera de hacer precisamente de la frontera y reemplazar sólo que XML de diseño de código con esto y yo era bueno para ir!

    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <stroke android:width="4dp" android:color="#FF00FF00" />
        <padding android:left="7dp" android:top="7dp"
                android:right="7dp" android:bottom="7dp" />
        <corners android:radius="4dp" />
    </shape> 
  3. 12

    @kris-van-bael

    Para aquellos que tienen problemas con la selección de relieve en la parte superior y la parte inferior de la fila donde el rectángulo de fondo se muestra en la selección que usted necesita para ajustar el selector para su listview a color transparente.

    listView.setSelector(R.color.transparent);

    En color.xml basta con agregar la siguiente –

    <color name="transparent">#00000000</color>
    • no funcionó para mí. He añadido la siguiente línea, sin embargo, y se deshizo de él: android:cacheColorHint="@android:color/transparent"
    • Esto definitivamente solucionado el problema de selección para mí – ¡gracias! También puede utilizar android.R.color.transparente para el Selector de color en lugar de crear su propio.
    • En lugar de hacerlo mediante programación, añade esto a tu ListView en el XML de diseño para ocultar el color de selección: android:listSelector=»#00000000″
    • Hay alguna forma de hacer Diseño seleccionables para destacar como la vista de lista elemento?
    • ¿qué debo hacer si quiero usar un color opaco para listSelector?
  4. 3

    Las otras respuestas son muy útiles, gracias a los autores!

    Pero yo no podía ver cómo personalizar el rectángulo al resaltar un elemento en la selección en lugar de deshabilitar el resaltado @alvins @bharat dojeha.

    Las siguientes obras para mí para crear un redondeado de la vista de lista elemento contenedor, sin contorno y un encendedor de color gris cuando se selecciona de la misma forma:

    El xml que debe contener un selector como por ejemplo, ( en res/drawable/customshape.xml):

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" >
        <shape xmlns:android="http://schemas.android.com/apk/res/android" >
            <stroke android:width="8dp" android:color="@android:color/transparent" />
            <padding android:left="14dp" android:top="14dp"
                    android:right="14dp" android:bottom="14dp" />
            <corners android:radius="10dp" />
            <gradient 
                 android:startColor="@android:color/background_light"
                 android:endColor="@android:color/transparent" 
                 android:angle="225"/> 
        </shape>
    </item>
    <item android:state_pressed="false">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" >
            <stroke android:width="8dp" android:color="@android:color/transparent" />
            <padding android:left="14dp" android:top="14dp"
                    android:right="14dp" android:bottom="14dp" />
            <corners android:radius="10dp" />
            <gradient 
                 android:startColor="@android:color/darker_gray"
                 android:endColor="@android:color/transparent" 
                 android:angle="225"/> 
        </shape>        
    </item>

    Entonces usted necesita para implementar una lista adaptador y reemplazar el método getView para establecer la costumbre selector de fondo

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            //snip
            convertView.setBackgroundResource(R.drawable.customshape);
            //snip
        }

    y además la necesidad de «ocultar» el defecto selector de rectángulo e.g en onCreate (yo también ocultar mi delgada gris línea divisoria entre los elementos):

    listView.setSelector(android.R.color.transparent);
    listview.setDivider(null);

    Este enfoque resuelve una solución general para dibujables, no sólo ListViewItem con diversos estados de selección.

  5. 3

    Actualización

    La solución de estos días es el uso de un CardView con soporte para las esquinas redondeadas construido en.


    Respuesta Original*

    Otra manera que encontré fue que la máscara de su diseño mediante el dibujo de una imagen a través de la parte superior de la presentación. Puede ser que te ayude. Echa un vistazo Android XML redondeado de esquinas recortadas

  6. 2

    Otra solución a la selección de manifiesto los problemas con el primero, y el último elemento en la lista:

    Agregar relleno a la parte superior y la parte inferior de su lista de fondo igual o mayor que el radio. Esto asegura que el resaltado de la selección no se solapa con el de la esquina de las curvas.

    Esta es la solución más fácil cuando usted necesita no es transparente, el resaltado de la selección.

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
        <solid android:color="@color/listbg" />
        <stroke
            android:width="2dip"
            android:color="#D5D5D5" />
        <corners android:radius="10dip" />
    
        <!-- Make sure bottom and top padding match corner radius -->
        <padding
            android:bottom="10dip"
            android:left="2dip"
            android:right="2dip"
            android:top="10dip" />
    </shape>
  7. 1

    Esto fue muy útil para mí. Me gustaría sugerir otra solución perfecta para resaltar las esquinas redondeadas si usted está utilizando su propio CustomAdapter.

    La definición de los Archivos XML

    Primero de todo, ir dentro de la carpeta de dibujable y crear 4 formas diferentes:

    • shape_top

      <gradient
          android:startColor="#ffffff"
          android:endColor="#ffffff"
          android:angle="270"/>
      <corners
          android:topLeftRadius="10dp"
          android:topRightRadius="10dp"/>

    • shape_normal

      <gradient
          android:startColor="#ffffff"
          android:endColor="#ffffff"
          android:angle="270"/>
      <corners
          android:topLeftRadius="10dp"
          android:topRightRadius="10dp"/>

    • shape_bottom

      <gradient
          android:startColor="#ffffff"
          android:endColor="#ffffff"
          android:angle="270"/>
      <corners
          android:bottomRightRadius="10dp"
          android:bottomRightRadius="10dp"/>

    • shape_rounded

      <gradient
          android:startColor="#ffffff"
          android:endColor="#ffffff"
          android:angle="270"/>
      <corners
          android:topLeftRadius="10dp"
          android:topRightRadius="10dp"
          android:bottomRightRadius="10dp"
          android:bottomRightRadius="10dp"/>

    Ahora, crear una fila diferente diseño para cada forma, es decir, para shape_top :

    • También puede hacerlo a través de programación de cambiar el fondo.

      <TextView
          android:id="@+id/textView1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          android:layout_marginLeft="20dp"
          android:layout_marginRight="10dp"
          android:fontFamily="sans-serif-light"
          android:text="TextView"
          android:textSize="22dp" />
      
      <TextView
          android:id="@+id/txtValue1"
          android:layout_width="match_parent"
          android:layout_height="48dp"
          android:textSize="22dp"
          android:layout_gravity="right|center"
          android:gravity="center|right"
          android:layout_marginLeft="20dp"
          android:layout_marginRight="35dp"
          android:text="Fix"
          android:scaleType="fitEnd" />

    Y definir un selector para cada forma de lista, es decir, para shape_top:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- Selected Item -->
    
        <item android:state_selected="true"
            android:drawable="@drawable/shape_top" />
        <item android:state_activated="true"
            android:drawable="@drawable/shape_top" />
    
        <!-- Default Item -->
        <item android:state_selected="false"
            android:drawable="@android:color/transparent" />
    </selector>

    Cambiar su CustomAdapter

    Por último, definir las opciones de distribución dentro de su CustomAdapter:

    if(position==0)
    {
     convertView = mInflater.inflate(R.layout.list_layout_top, null);
    }
    else
    {
     convertView = mInflater.inflate(R.layout.list_layout_normal, null);
    }
    
    if(position==getCount()-1)
    {
    convertView = mInflater.inflate(R.layout.list_layout_bottom, null);
    }
    
    if(getCount()==1)
    {
    convertView = mInflater.inflate(R.layout.list_layout_unique, null);
    }

    Y que hace!

  8. 1

    para hacer de la frontera u tiene que hacer otro archivo xml con la propiedad de los sólidos y las esquinas de la imagen de la carpeta y la llama en el fondo

  9. 0

    Estoy usando una vista personalizada que yo diseño en la parte superior de los demás y que sólo atrae a los 4 pequeños rincones en el mismo color que el fondo. Esto funciona sea cual sea el contenido de la vista están y no asignar la cantidad de memoria.

    public class RoundedCornersView extends View {
    private float mRadius;
    private int mColor = Color.WHITE;
    private Paint mPaint;
    private Path mPath;
    public RoundedCornersView(Context context) {
    super(context);
    init();
    }
    public RoundedCornersView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
    TypedArray a = context.getTheme().obtainStyledAttributes(
    attrs,
    R.styleable.RoundedCornersView,
    0, 0);
    try {
    setRadius(a.getDimension(R.styleable.RoundedCornersView_radius, 0));
    setColor(a.getColor(R.styleable.RoundedCornersView_cornersColor, Color.WHITE));
    } finally {
    a.recycle();
    }
    }
    private void init() {
    setColor(mColor);
    setRadius(mRadius);
    }
    private void setColor(int color) {
    mColor = color;
    mPaint = new Paint();
    mPaint.setColor(mColor);
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setAntiAlias(true);
    invalidate();
    }
    private void setRadius(float radius) {
    mRadius = radius;
    RectF r = new RectF(0, 0, 2 * mRadius, 2 * mRadius);
    mPath = new Path();
    mPath.moveTo(0,0);
    mPath.lineTo(0, mRadius);
    mPath.arcTo(r, 180, 90);
    mPath.lineTo(0,0);
    invalidate();
    }
    @Override
    protected void onDraw(Canvas canvas) {
    /*Paint paint = new Paint();
    paint.setColor(Color.RED);
    canvas.drawRect(0, 0, mRadius, mRadius, paint);*/
    int w = getWidth();
    int h = getHeight();
    canvas.drawPath(mPath, mPaint);
    canvas.save();
    canvas.translate(w, 0);
    canvas.rotate(90);
    canvas.drawPath(mPath, mPaint);
    canvas.restore();
    canvas.save();
    canvas.translate(w, h);
    canvas.rotate(180);
    canvas.drawPath(mPath, mPaint);
    canvas.restore();
    canvas.translate(0, h);
    canvas.rotate(270);
    canvas.drawPath(mPath, mPaint);
    }
    }

Dejar respuesta

Please enter your comment!
Please enter your name here