Android引導頁設計，android引導

Android引導頁設計，android引導

　　大家在安裝好一個應用後，第一次開啟時往往會出現一個使用引導頁，形式一般為三、四張圖片，隨著我們的滑動進行切換，在最後一頁會有一個進入應用的按鈕，我們通過點擊這個按鈕可以進入應用，其實這其中沒有太多的複雜的地方，切換的完成就是一個ViewPager，說了這麼多，下面開始為大家解讀代碼：
　　開始我們的設計之前我們需要做一些準備工作，首先我們建立一個工程，然後選擇工程通過按右鍵properties，然後選擇Java Build Path，點擊右側Libraries，再點擊Add jar，將我們工程lib下的Android-support-v4.jar匯入，最後不要忘了選中。

　　

　　第二步：我們需要準備6張圖片，四張用來切換，另外兩個則是我們經常看到的切換圖片下方的小圓點。

　　

　　有了上面的準備工作，下面就可以開始今天的效果製作了。

　　我們布局檔案（activity_main.xml）：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="fill_parent"    android:layout_height="fill_parent"     android:orientation="vertical" >        <android.support.v4.view.ViewPager          android:id="@+id/viewpager"          android:layout_width="fill_parent"           android:layout_height="fill_parent"           />                <LinearLayout           android:id="@+id/ll"           android:orientation="horizontal"           android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:layout_marginBottom="24.0dip"           android:layout_alignParentBottom="true"           android:layout_centerHorizontal="true">                    <ImageView              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:layout_gravity="center_vertical"              android:clickable="true"              android:padding="15.0dip"              android:src="@drawable/dot" />            <ImageView              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:layout_gravity="center_vertical"              android:clickable="true"              android:padding="15.0dip"              android:src="@drawable/dot" />            <ImageView              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:layout_gravity="center_vertical"              android:clickable="true"              android:padding="15.0dip"              android:src="@drawable/dot" />            <ImageView              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:layout_gravity="center_vertical"              android:clickable="true"              android:padding="15.0dip"              android:src="@drawable/dot" />        </LinearLayout>    <Button        android:id="@+id/button"        android:visibility="gone"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@+id/ll"        android:layout_centerHorizontal="true"        android:layout_marginBottom="52dp"        android:text="進入應用" />  </RelativeLayout>  

　　既然我們需要使用ViewPager來完成圖片的切換，這裡我們需要重寫一個PagerAdapter（ViewPagerAdapter.java）

public class ViewPagerAdapter extends PagerAdapter{            //介面列表      private List<View> views;            public ViewPagerAdapter (List<View> views){          this.views = views;      }        //銷毀arg1位置的介面      @Override      public void destroyItem(View arg0, int arg1, Object arg2) {          ((ViewPager) arg0).removeView(views.get(arg1));           }        @Override      public void finishUpdate(View arg0) {          // TODO Auto-generated method stub                }        //獲得當前介面數      @Override      public int getCount() {          if (views != null)          {              return views.size();          }                    return 0;      }              //初始化arg1位置的介面      @Override      public Object instantiateItem(View arg0, int arg1) {                    ((ViewPager) arg0).addView(views.get(arg1), 0);                    return views.get(arg1);      }        //判斷是否由對象產生介面      @Override      public boolean isViewFromObject(View arg0, Object arg1) {          return (arg0 == arg1);      }        @Override      public void restoreState(Parcelable arg0, ClassLoader arg1) {          // TODO Auto-generated method stub                }        @Override      public Parcelable saveState() {          // TODO Auto-generated method stub          return null;      }        @Override      public void startUpdate(View arg0) {          // TODO Auto-generated method stub                }    }

　　下面我們為了實現小圓點的變化，寫一個自訂的屬性，放置在drawable檔案下（dot.xml）

<?xml version="1.0" encoding="UTF-8"?>  <selector      xmlns:android="http://schemas.android.com/apk/res/android">      <item android:state_enabled="true" android:drawable="@drawable/white" />      <item android:state_enabled="false" android:drawable="@drawable/blank" />  </selector>

　　最後我們的MainActivity.java:

public class MainActivity extends Activity implements OnClickListener, OnPageChangeListener{          private ViewPager vp;      private ViewPagerAdapter vpAdapter;      private List<View> views;      private Button button;          //引導圖片資源      private static final int[] pics = { R.drawable.imager1,              R.drawable.imager2, R.drawable.imager3,              R.drawable.imager4 };            //底部小店圖片      private ImageView[] dots ;            //記錄當前選中位置      private int currentIndex;            /** Called when the activity is first created. */      @Override      public void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);
　　　　 requestWindowFeature(Window.FEATURE_NO_TITLE);//去標題          setContentView(R.layout.activity_main);                    views = new ArrayList<View>();                   LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT,                  LinearLayout.LayoutParams.FILL_PARENT);                    //初始化引導圖片列表          for(int i=0; i<pics.length; i++) {              ImageView iv = new ImageView(this);              iv.setLayoutParams(mParams);              iv.setImageResource(pics[i]);              views.add(iv);          }                  //跳轉按鈕        button = (Button)findViewById(R.id.button);        button.setOnClickListener(new OnClickListener() {                        @Override            public void onClick(View v) {                Toast.makeText(getApplication(), "進入應用", Toast.LENGTH_SHORT).show();//                MainActivity.this.startActivity(new Intent().setClass(MainActivity.this, LoginActivity.class));//                MainActivity.this.finish();            }        });                vp = (ViewPager) findViewById(R.id.viewpager);          //初始化Adapter          vpAdapter = new ViewPagerAdapter(views);          vp.setAdapter(vpAdapter);          //綁定回調          vp.setOnPageChangeListener(this);                    //初始化底部小點          initDots();                    }            private void initDots() {          LinearLayout ll = (LinearLayout) findViewById(R.id.ll);            dots = new ImageView[pics.length];            //迴圈取得小點圖片          for (int i = 0; i < pics.length; i++) {              dots[i] = (ImageView) ll.getChildAt(i);              dots[i].setEnabled(true);//都設為灰色              dots[i].setOnClickListener(this);              dots[i].setTag(i);//設定位置tag，方便取出與當前位置對應          }            currentIndex = 0;          dots[currentIndex].setEnabled(false);//設定為白色，即選中狀態      }            /**      *設定當前的引導頁       */      private void setCurView(int position)      {          if (position < 0 || position >= pics.length) {              return ;        }            vp.setCurrentItem(position);      }        /**      *這隻當前引導小點的選中       */      private void setCurDot(int positon)      {          if (positon < 0 || positon > pics.length - 1 || currentIndex == positon) {              return;          }            //當滑動到最後一張圖片時，將隱藏的Button顯示出來        if(positon == pics.length - 1){            button.setVisibility(1);        }else{            button.setVisibility(View.GONE);        }                //繪製底部的小圓點        dots[positon].setEnabled(false);          dots[currentIndex].setEnabled(true);            currentIndex = positon;              }        //當滑動狀態改變時調用      @Override      public void onPageScrollStateChanged(int arg0) {          // TODO Auto-generated method stub                }        //噹噹前頁面被滑動時調用      @Override      public void onPageScrolled(int arg0, float arg1, int arg2) {          // TODO Auto-generated method stub                }        //當新的頁面被選中時調用      @Override      public void onPageSelected(int arg0) {          //設定底部小點選中狀態          setCurDot(arg0);                 }        @Override      public void onClick(View v) {          int position = (Integer)v.getTag();          setCurView(position);          setCurDot(position);      }  } 

　　：

　　

　　深夜奉上，希望對大家有協助，最後再囉嗦一句，這樣的切換看上去很單調，大家可以查閱一下之前我奉上的關於ViewPager切換動畫效果的部落格。