English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
First, let's take a look at the interface we are going to develop (three images, at the end of the slide, there will be a start experience button, and the little red dot will slide along with it):
First, let's take a look at the layout file:
<?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>
Ensuite, c'est le code :]}
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);
//Écouteur de mise en page globale pour vérifier si le layout est terminé et si la position du layout est déterminée
ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
//Éviter les rappels répétés Pour des raisons de compatibilité, une méthode obsolète a été utilisée
ivRedPoint.getViewTreeObserver().removeGlobalOnLayoutListener(this);
//Obtenir la distance entre le premier et le deuxième petit point gris après la fin de la mise en page
mPaintDis = llContainer.getChildAt(1).getLeft();-llContainer.getChildAt(0).getLeft();
System.out.println("Distance : ");+mPaintDis);
}
});
//Listener du défilement ViewPager
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
//Callback pendant le défilement
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//Lorsque vous glissez vers le deuxième Pager, le pourcentage de positionOffset deviendra 0, et position deviendra1donc il faut ajouter position*mPaintDis
int letfMargin = (int)(mPaintDis*positionOffset)+position*mPaintDis;
//Dans le contrôle du parent, définir le marges 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++{
//Créer un ImageView et mettre mImgaeViewIds dedans
ImageView view = new ImageView(this);
view.setBackgroundResource(mImageIds[i]);
//Ajouter à la collection d'ImageView
mImageViewList.add(view);
//Point gris Un point gris est un ImageView
ImageView pointView = new ImageView(this);
pointView.setImageResource(R.drawable.shape);
//Initialiser les paramètres de layout, le parent contrôleur est qui, initializez les paramètres de layout de qui
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
if (i>0){
//Lorsque le nombre de points ronds ajoutés dépasse un, définir la marge de gauche du point rond courant10dp;
params.leftMargin=10;
}
//Définir la largeur et la hauteur du point gris pour englober le contenu
pointView.setLayoutParams(params);
//Ajouter le point gris à la LinearLayout
llContainer.addView(pointView);
}
}
class GuideAdapter extends PagerAdapter{
//Nombre d'éléments de l'item
@Override
public int getCount() {
return mImageViewList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
//Initialiser le layout de l'élément
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView view = mImageViewList.get(position);
container.addView(view);
return view;
}
//Détruire l'élément
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
}
}
Point gris :
<?xml version="1.0" encoding="utf-8"?> <shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android"> <!--Point gris--> <solid android:color="#cccccc"/> <size android:width="10dp" android:height="10dp"/> </shape>
Point rouge :
<?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 est très simple, comme détaillé dans un article précédent, ici, nous ne le détaillemoins, c'est principalement le point rouge suivant le Pager.
Il s'agit en fait de trois petits points gris, puis il y a un petit point rouge au-dessus des petits points gris, en calculant la distance entre le premier point gris et le deuxième point gris, nous pouvons configurer l'écouteur de défilement de ViewPager, puis faire suivre le point rouge au pager (ce qui change est la marge interne du contrôleur parent).
Lors du calcul de la distance entre les petits points gris, il faut noter que vous devez attendre que la position de mise en page soit déterminée avant de pouvoir obtenir la distance entre les petits points gris (le processus de génération de l'interface measure->layout(déterminer la position)->draw(l'après l'exécution de la méthode onCreate de l'activité)），donc il faut configurer l'écouteur de layout :
ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener()
Ensuite, calculer la distance entre les petits points gris :
mPaintDis = llContainer.getChildAt(1).getLeft();-llContainer.getChildAt(0).getLeft();
Il faut noter ce code :
int letfMargin = (int)(mPaintDis*positionOffset)+position*mPaintDis;
positionOffset est le pourcentage de glissement actuel, lorsque je pénètre dans la deuxième page, la valeur est 0,
position représente le numéro de page actuel, commence à 0, donc lorsque je glisse vers la deuxième page, mPaintDis*0+1*mPaintDis;
PS : Sommaire des idées :
1La page est composée de ViewPager + Bouton + RelativeLayout(LinearLayout + composé de TextView)
2LinearLayout contient des points gris, le nombre de points gris est déterminé par le nombre de ViewPager, donc l'ajout de points gris à LinearLayout est fait en même temps que l'ajout de ressources d'images ViewPager à la collection.
3Ensuite, le point rouge est un TextView, en raison de la mise en page relative, la position initiale du point rouge coïncide avec le premier point du point gris.
4Ensuite, écoutez l'événement de glissement ViewPager, en calculant la différence de marge gauche entre le premier et le deuxième point gris par rapport au LinearLayout de gauche, pour déplacer la position du point rouge, mais il est nécessaire de déterminer que la position de la vérification est déjà déterminée par le layout, donc nous devons écouter si le layout est déjà déterminé, puis calculer la différence de position après confirmation.
C'est tout pour cet article, j'espère que cela pourra aider à votre apprentissage, et j'espère que vous soutiendrez également le tutoriel d'alarme.
Déclaration : Le contenu de cet article est issu du réseau, propriété de l'auteur original, le contenu est apporté par les utilisateurs d'Internet et téléversé spontanément. Ce site ne détient pas de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de copyright, veuillez envoyer un e-mail à : notice#w3Déclaration : Le contenu de cet article est issu du réseau, propriété de l'auteur original, le contenu est apporté par les utilisateurs d'Internet et téléversé spontanément. Ce site ne détient pas de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de copyright, veuillez envoyer un e-mail à : notice#w