English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Primero, echemos un vistazo a la interfaz que vamos a desarrollar (tres imágenes, al deslizar hasta la última aparecerá el botón de comenzar a experimentar, y los puntos rojos pequeños se deslizarán junto con él):
Primero, echemos un vistazo al archivo de diseño:
<?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:id="@"+id/activity_guide"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.coderwei.a71_zhbj.activity.GuideActivity">
<android.support.v4.view.ViewPager
android:id="@"+id/vp_guide"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<Button
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="70dp"
android:padding="10dp"
android:id="@"+id/start_btn"
android:textColor="#f1eaea"
android:background="#e71616"
android:text="开始体验"
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp">
<LinearLayout
android:id="@"+id/ll_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>
<ImageView
android:id="@"+id/iv_red"
android:src="@drawable/shap_red"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>
Luego viene el código: }}
public class GuideActivity extends Activity {
private ViewPager mViewPager;
private int[] mImageIds = new int[]{R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3};
private ArrayList<ImageView> mImageViewList;
private LinearLayout llContainer;
private ImageView ivRedPoint;
private int mPaintDis;
private Button start_btn;
@Override
protected void onCreate(Bundle savedInstanceState) {
uper.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_guide);
mViewPager = (ViewPager)findViewById(R.id.vp_guide);
llContainer = (LinearLayout) findViewById(R.id.ll_container);
ivRedPoint = (ImageView) findViewById(R.id.iv_red);
start_btn = (Button) findViewById(R.id.start_btn);
initData();
GuideAdapter adapter = new GuideAdapter();
mViewPager.setAdapter(adapter);
//Escuchar si el diseño se ha completado y si la posición del diseño se ha determinado
ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
//Evitar llamadas de retroalimentación repetidas. Debido a la compatibilidad, se utilizó el método obsoleto
ivRedPoint.getViewTreeObserver().removeGlobalOnLayoutListener(this);
//Al completar el diseño, se obtiene la distancia left entre el primer punto gris y el segundo
mPaintDis = llContainer.getChildAt(1).getLeft();-llContainer.getChildAt(0).getLeft();
System.out.println("Distancia:");+mPaintDis);
}
});
//Escucha de deslizamiento de ViewPager
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
//Vuelta de llamada durante el deslizamiento
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//Cuando se desliza al segundo Pager, el porcentaje de positionOffset se convertirá a 0 y position se convertirá a1por lo que hay que agregar position*mPaintDis
int letfMargin = (int)(mPaintDis*positionOffset)+position*mPaintDis;
//En el controlador de diseño del padre se establece el margen izquierdo leftMargin
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)ivRedPoint.getLayoutParams();
params.leftMargin = letfMargin;
ivRedPoint.setLayoutParams(params);
}
@Override
public void onPageSelected(int position) {
System.out.println("position:");+position);
if (position==mImageViewList.size())-1{
start_btn.setVisibility(View.VISIBLE);
}
}
@Override
public void onPageScrollStateChanged(int state) {
System.out.println("state:");+state);
}
});
}
private void initData(){
mImageViewList = new ArrayList<>();
for (int i=0; i<mImageIds.length; i++{
//Crear ImageView y agregar mImgaeViewIds
ImageView view = new ImageView(this);
view.setBackgroundResource(mImageIds[i]);
//Agregar a la colección de ImageView
mImageViewList.add(view);
//Punto pequeño Un punto gris pequeño es un ImageView
ImageView pointView = new ImageView(this);
pointView.setImageResource(R.drawable.shape);
//Inicializar parámetros de diseño, según el controlador padre, inicializar los parámetros de diseño del controlador
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
if (i>0){
//Cuando el número de puntos pequeños agregados exceda uno, establecer la distancia lateral izquierda del punto pequeño actual10dp;
params.leftMargin=10;
}
//Establecer el ancho y alto del punto gris pequeño para que se ajusten al contenido
pointView.setLayoutParams(params);
//Agregar el punto gris pequeño al LinearLayout
llContainer.addView(pointView);
}
}
class GuideAdapter extends PagerAdapter{
//Número de ítems
@Override
public int getCount() {
return mImageViewList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
//Inicializar diseño del ítem
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView view = mImageViewList.get(position);
container.addView(view);
return view;
}
//Destruir ítem
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
}
}
Punto gris:
<?xml version="1.0" encoding="utf-8"?> <shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android"> <!--Punto gris--> <solid android:color="#cccccc"/> <size android:width="10dp" android:height="10dp"/> </shape>
Punto rojo:
<?xml version="1.0" encoding="utf-8"?> <shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#f00"/> <size android:width="10dp" android:height="10dp"/> </shape>
ViewPager es muy simple, se ha explicado en detalle en el artículo anterior, aquí no se detallará, lo principal es que el punto rojo pequeño sigue al Pager.
En realidad hay tres puntos grises pequeños aquí, y encima de ellos hay un punto rojo pequeño. Al calcular la distancia entre el primer punto gris pequeño y el segundo, podemos configurar el listener de deslizamiento de ViewPager y hacer que el punto rojo pequeño siga al pager (lo que cambia es el margen interno del controlador padre).
Al calcular la distancia entre los puntos grises pequeños, es necesario esperar a que se confirme la posición del layout para obtener la distancia entre los puntos grises pequeños (el proceso de generación de la interfaz measure->layout(Confirmar posición)->draw(Después de que se ejecuta el método onCreate del activity, se seguirá este flujo) por lo que se debe configurar el listener de layout:
ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener()
Luego, la distancia entre los puntos grises pequeños:
mPaintDis = llContainer.getChildAt(1).getLeft();-llContainer.getChildAt(0).getLeft();
Es necesario prestar atención a este código:
int letfMargin = (int)(mPaintDis*positionOffset)+position*mPaintDis;
positionOffset es el porcentaje de deslizamiento actual, cuando entro en la segunda página, el valor es 0,
position representa la página actual, comienza en 0, es decir, cuando me deslizo a la segunda página, mPaintDis*0+1*mPaintDis;
PS: Resumen de ideas:
1La página se compone de ViewPager + Button + RelativeLayout(LinearLayout + compuesto por TextView)
2LinearLayout contiene puntos grises, el número de puntos grises depende del número de ViewPager, por lo que cuando LinearLayout agrega puntos grises, es al mismo tiempo que los recursos de imágenes de ViewPager se agregan a la colección.
3Luego, el punto rojo es un TextView, debido a la razón del diseño relativo, la posición inicial del punto rojo se superpondrá con el primer punto del punto gris.
4Luego, escuchar el evento de deslizamiento de ViewPager, calcular la diferencia de margen entre el lado izquierdo del primer y segundo punto gris al lado izquierdo de LinearLayout para mover la posición del punto rojo, pero el punto de verificación debe ser que la posición del diseño ya se ha determinado, por lo que debemos escuchar si el diseño ya se ha determinado, y luego calcular la diferencia de posición.
Este es el contenido completo del artículo, espero que sea útil para su aprendizaje y que todos apoyen el tutorial de alarido.
Declaración: Este artículo se ha redactado en línea, pertenece al propietario original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume la responsabilidad legal relevante. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#w proporcionando la evidencia relevante.3Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume la responsabilidad legal relevante. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#w proporcionando la evidencia relevante, una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.