MiReal.me MiReal.me – Tu blog tecnológico con la más actualizada información
Este es un control deslizante de tarjeta fantástico para la plataforma Android con muchas características y atributos para obtener exactamente lo que necesita.
Componentes del control deslizante de la tarjeta
- CardSliderViewPager: un ViewPager personalizado basado en RTL ViewPager para admitir RTL y utiliza una página de transformador para aplicar la acción de escala como se muestra en GIF.
- CardSliderIndicator: diseño lineal personalizado que contiene indicadores como vistas de niños.
- CardSliderAdapter: clase abstracta que debe ampliarse y pasarse a CardSliderViewPager como su adaptador.
Características [19659007] 1- muestra la vista previa de páginas a izquierda y derecha.
2- puede cambiar el tamaño (cambiar el tamaño) de las páginas para ampliar la página enfocada en altura como se muestra en GIF.
3- personaliza completamente el aspecto de CardView y ViewPager.
4- Agregue indicador y personalícelo fácilmente.
5- Soporte RTL.
Agregar al proyecto
- Agregue su raíz build.gradle al final de los repositorios:
todos los proyectos {
repositorio {
.. .
maven {url & # 39; https://jitpack.io & # 39; }
}
}
- Agregar dependencia:
implementación & # 39; com.github.IslamKhSh: CardSlider: {latest_version} & # 39;
Encuentre la última versión aquí
Agregue
en su diseño:
< com .github.islamkhsh.CardSliderViewPager
Android : layout_width = " match_parent "
Android : layout_height " ] wrap_content "
Android : id = " @ + id / viewPager "
Android : layout_marginTop = " 24dp " [19659027] aplicación [19659024]: [19659024] cardSlider_smallScaleFactor = " 0.9 " [19659016] // escala factor de altura de página izquierda y derecha (1 si no se incorpora cambio de tamaño)
aplicación : cardSlider_otherPagesWidth = " 24dp " // ancho de las partes mostradas de las páginas izquierda y derecha
aplicación : cardSlider_pageMargin = " 12dp " // margen entre las páginas
aplicación : cardSlider_cardCornerRadius = " 5dp " /> // rayo de ángulo de cada página
- Extender [Card65] 19659058] MovieAdapter (película : ArrayList < Movie >) : CardSliderAdapter []
anular diversión bindView ( posición : Int itemContentView :
// TODO asocia el objeto objeto con la vista de diseño del objeto
}
anular diversión getItemContentLayout ( posición : Int ) : Int {
// TODO devuelve el diseño del artículo de cada posición
// Este diseño se agregará como elemento secundario de CardView
}
}
< com .github.islamkhsh.CardSliderViewPager
Android : layout_width = " match_parent "
Android : layout_height " ] wrap_content "
Android : id = " @ + id / viewPager "
Android : layout_marginTop = " 24dp " [19659027] aplicación [19659024]: [19659024] cardSlider_smallScaleFactor = " 0.9 " [19659016] // escala factor de altura de página izquierda y derecha (1 si no se incorpora cambio de tamaño)
aplicación : cardSlider_otherPagesWidth = " 24dp " // ancho de las partes mostradas de las páginas izquierda y derecha
aplicación : cardSlider_pageMargin = " 12dp " // margen entre las páginas
aplicación : cardSlider_cardCornerRadius = " 5dp " /> // rayo de ángulo de cada página
- Extender [Card65] 19659058] MovieAdapter (película : ArrayList < Movie >) : CardSliderAdapter []
anular diversión bindView ( posición : Int itemContentView :
// TODO asocia el objeto objeto con la vista de diseño del objeto
}anular diversión getItemContentLayout ( posición : Int ) : Int {
// TODO devuelve el diseño del artículo de cada posición
// Este diseño se agregará como elemento secundario de CardView
}
}
o usando Java
public clase MovieAdapter extiende CardSliderAdapter < Película > {
publica MovieAdapter ( ArrayList < Film > film ) {
super- (películas);
}
@Override
public void bindView ( int position View itemContentView [194519659084] artículo ) {
// TODO asocia el objeto objeto con la vista de diseño del objeto
}
@Override
public int getItemContentLayout ( int posición ) {
// TODO devuelve el diseño del artículo de cada posición
// Este diseño se agregará como elemento secundario de CardView
}
}
-
Crear diseño de objeto para devolverlo a
getItemContentLayout -
Agregar adaptador a CardSliderViewPager
val películas <[194590] película > (). se aplica {
// agregar elementos a la lista de arrayl
}
findViewById < CardSliderViewPager > ( R .id.viewPager) .adapter = MoviesAdapter (película)
o usando [Array19659] 19659014 ] < Película > películas = ArrayList < Película > ();
// agregue elementos a la lista
CardSliderViewPager cardSliderViewPager = ( CardSliderViewPager ) findViewBy94] [45;
cardSliderViewPager.setAdapter ( MoviesAdapter (películas));
5- Para agregar un indicador agréguelo a su diseño
< com .github.islamkhsh.CardSliderIndicator
Android : layout_width = " wrap_content "
Android : layout_height = " wrap_content "
android : id = " @ + id / indicador " > 19659071] y luego asócielo con CardSliderViewPager < com .github.islamkhsh.CardSliderViewPager
...
aplicación : cardSlider_indicator = " @ id / indicator " />
Lista de atributos
1- CardSlider13P1 Attribute [19659124] Descripción
Valor predeterminado
cardSlider_smallScaleFactor La escala reducida de las páginas siguiente y anterior.
1 (sin cambio de tamaño)
cardSlider_baseShadow La elevación de CardView 19196513] 2dp
cardSlider_minShadow La elevación de CardView de las tarjetas posteriores y anteriores.
baseShadow * smallScaleFactor
cardSlider_pageMargin El espacio entre dos páginas. Debe ser mayor que baseShadow + minShadow o se ignorará.
baseShadow + minShadow
cardSlider_otherPagesWidth El ancho de las partes mostradas por las tarjetas siguientes y anteriores.
0] cardSlider_cardBackgroundColor
El color de fondo de la tarjeta.
Blanco
cardSlider_cardCornerRadius El ángulo de visión de la tarjeta.
0
Tarjeta
1943 para trabajar con esta vista de buscapersonas. sin indicador
el relleno izquierdo y derecho se reemplazará con otherPagesWidth + pageMargin
2- CardSliderIndicator [19659321] Descripción Valor [19659321]] Valor predeterminado
default_indicator L & # 39; indicador extraíble en caso de no seleccionado
default_dot.xml
selected_indicator El indicador extraíble en caso de seleccionado.
selected_dot.xml
selected r_margin El espacio entre los indicadores
el ancho mínimo de default_indicator y selected_indicator
.
