English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Prima di tutto, guardiamo l'interfaccia che stiamo sviluppando (tre immagini, scorrendo fino all'ultima apparirà il pulsante Inizia l'esperienza, il piccolo punto rosso seguirà lo scorrimento):
Prima di tutto, guardiamo il file di layout:
<?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="Inizia l'esperienza"
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>
Poi è il codice:
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);
// Ascolta se la layout è completata e la posizione è stabilita;
ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
// Evita i callback duplicati. Utilizzato un metodo obsoleto per motivi di compatibilità;
ivRedPoint.getViewTreeObserver().removeGlobalOnLayoutListener(this);
//布局完成了就获取第一个小灰点和第二个之间left的距离
mPaintDis = llContainer.getChildAt(1).getLeft() - llContainer.getChildAt(0).getLeft();
System.out.println("距离：" + mPaintDis);
}
});
//ViewPager滑动Pager监听
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
//滑动过程中的回调
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//当滑到第二个Pager的时候，positionOffset百分比会变成0，position会变成1，所以后面要加上position*mPaintDis
int letfMargin = (int)(mPaintDis*positionOffset)+position*mPaintDis;
//在父布局控件中设置他的leftMargin边距
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)ivRedPoint.getLayoutParams();
params.leftMargin = letfMargin;
ivRedPoint.setLayoutParams(params);
}
@Override
public void onPageSelected(int position) {
System.out.println("position:\
if (position==mImageViewList.size()-1){
start_btn.setVisibility(View.VISIBLE);
}
}
@Override
public void onPageScrollStateChanged(int state) {
System.out.println("state:\
}
});
}
private void initData(){
mImageViewList = new ArrayList<>();
for (int i=0; i<mImageIds.length; i++){
//Crea ImageView e metti mImgaeViewIds dentro
ImageView view = new ImageView(this);
view.setBackgroundResource(mImageIds[i]);
//Aggiungi alla raccolta di ImageView
mImageViewList.add(view);
//Punto piccolo Un punto grigio è un ImageView
ImageView pointView = new ImageView(this);
pointView.setImageResource(R.drawable.shape);
//Inizializza i parametri di layout, il padre del controllo, inizializza i parametri del controllo
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
if (i>0){
//Quando il numero di punti grigi aggiunti supera uno, imposta la margine sinistra del punto corrente a 10dp;
params.leftMargin=10;
}
//Imposta le dimensioni del punto grigio in base al contenuto
pointView.setLayoutParams(params);
//Aggiungi il punto grigio alla LinearLayout
llContainer.addView(pointView);
}
}
class GuideAdapter extends PagerAdapter{
//Numero di item
@Override
public int getCount() {
return mImageViewList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
//Inizializza la layout dell'item
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView view = mImageViewList.get(position);
container.addView(view);
return view;
}
//Distruggi item
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
}
}
Punto grigio:
<?xml version="1.0" encoding="utf-8"?> <shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android"> <!--Punto grigio--> <solid android:color="#cccccc"/> <size android:width="10dp" android:height="10dp"/> </shape>
Punto rosso:
<?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>
ViewPage sono molto semplici, l'articolo precedente ha spiegato in dettaglio, qui non lo ripeterò, ma principalmente il punto rosso piccolo che si muove insieme al Pager.
In realtà ci sono tre punti grigi piccoli, quindi sopra i punti grigi piccoli c'è un punto rosso piccolo. Calcolando la distanza tra il primo punto grigio piccolo e il secondo punto grigio piccolo, possiamo impostare l'ascoltatore di scorrimento di ViewPager e far muovere il punto rosso piccolo insieme al pager (quello che cambia è il margine interno del contenitore padre).
Quando si calcola la distanza tra i punti grigi piccoli, è necessario attendere che la posizione di layout sia determinata prima di ottenere la distanza tra i punti grigi piccoli (il processo di generazione dell'interfaccia utente measure->layout(determinare la posizione)->draw(la fine dell'esecuzione del metodo onCreate dell'activity, dopo di che verrà eseguito questo flusso)), quindi è necessario impostare l'ascoltatore di layout:
ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener()
Poi, calcolare la distanza tra i punti grigi piccoli:
mPaintDis = llContainer.getChildAt(1).getLeft()-llContainer.getChildAt(0).getLeft();
Occorre notare questa riga di codice:
int letfMargin = (int)(mPaintDis*positionOffset)+position*mPaintDis;
positionOffset è la percentuale di scorrimento corrente, quando arrivo alla seconda pagina, il valore è 0,
position rappresenta la pagina corrente, inizia da 0, quindi quando arrivo alla seconda pagina mPaintDis*0+1*mPaintDis;
PS: Sommario delle idee:
1. La pagina è composta da ViewPager + Button + RelativeLayout(LinearLayout + TextView),
2. LinearLayout contiene i punti grigi, il numero di punti grigi è determinato dal numero di ViewPager, quindi quando si aggiungono i punti grigi a LinearLayout è contemporaneamente che le risorse di immagine delle immagini di ViewPager vengono aggiunte alla raccolta.
3. Poi il punto rosso è un TextView a causa del layout relativo, la posizione iniziale del punto rosso coincide con il primo punto grigio.
4. Poi ascoltare l'evento di scorrimento di ViewPager, calcolare la differenza di margine tra il lato sinistro del primo e del secondo punto grigio rispetto al lato sinistro di LinearLayout per spostare la posizione del punto rosso, ma il controllo della posizione deve essere assicurato che la posizione del layout sia già determinata, quindi dobbiamo ascoltare se il layout è già determinato, e poi calcolare la differenza di posizione.
Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento e che tu supporti fortemente la guida Yellowsound.
Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il diritto d'autore spetta ai rispettivi proprietari, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata la veridicità, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.