【Android UI設計與開發】使用ViewPager實現歡迎引導頁面

標籤：列表   points   mil   功能   原始碼   資源   out   from   id3   

一、實現的

 每次看別人的代碼前，必需要先看實現的達到了一個什麼樣的效果，是不是跟自己想要實現的效果類似。有圖才有真相嘛，同一時候，最下方有原始碼的，差點兒原始碼的每一行都有凝視，寫的通俗易懂。很清晰。

      

二、編碼前的準備工作

       ViewPager是Android3.0之後提供的新特性，所以要想讓你的應用向下相容就必需要android-support-v4.jar這個包的支援。這是一個來自google提供的一個附加元件封裝。

三、項目結構圖

四、詳細的編碼實現

1、  布局介面比較簡單，增加ViewPager組件，以及底部的引導小點，activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="wrap_content"    android:layout_height="wrap_content">     <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:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_marginBottom="24.0dip"        android:orientation="horizontal"        >         <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/point"/>         <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/point"/>         <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/point"/>         <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/point"/>    </LinearLayout></RelativeLayout>

2、當中小點的圖片用一個selector來控制顏色，point.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/point_normal" />    <item android:state_enabled="false" android:drawable="@drawable/point_select" /></selector>

3、 ViewPager適配器代碼。ViewPagerAdapter.java：

package com.ting;import java.util.ArrayList;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;/** * @author yangyu *功能描寫敘述：ViewPager適配器，用來綁定資料和view */public class ViewPagerAdapter extends PagerAdapter {//介面列表    private ArrayList<View> views;        public ViewPagerAdapter (ArrayList<View> views){        this.views = views;    }       /** * 獲得當前介面數 */@Overridepublic int getCount() { if (views != null) {             return views.size();         }               return 0;}/** * 初始化position位置的介面 */    @Override    public Object instantiateItem(View view, int position) {               ((ViewPager) view).addView(views.get(position), 0);               return views.get(position);    }        /** * 推斷是否由對象產生介面 */@Overridepublic boolean isViewFromObject(View view, Object arg1) {return (view == arg1);}/** * 銷毀position位置的介面 */    @Override    public void destroyItem(View view, int position, Object arg2) {        ((ViewPager) view).removeView(views.get(position));           }}

4、主程式入口類，MainActivity.java：

package com.ting;import java.util.ArrayList;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.View;import android.view.View.OnClickListener;import android.widget.ImageView;import android.widget.LinearLayout;import com.example.myguideview01.R;/** * @author yangyu *功能描寫敘述：主程式入口類 */public class MainActivity extends Activity implements OnClickListener,OnPageChangeListener {//定義ViewPager對象private ViewPager viewPager;//定義ViewPager適配器private ViewPagerAdapter vpAdapter;//定義一個ArrayList來存放Viewprivate ArrayList<View> views;//引導圖片資源    private static final int[] pics = {R.drawable.guide1,R.drawable.guide2,R.drawable.guide3,R.drawable.guide4};        //底部小點的圖片    private ImageView[] points;        //記錄當前選中位置    private int currentIndex;    @Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();initData();}/** * 初始化組件 */private void initView(){//執行個體化ArrayList對象views = new ArrayList<View>();//執行個體化ViewPagerviewPager = (ViewPager) findViewById(R.id.viewpager);//執行個體化ViewPager適配器vpAdapter = new ViewPagerAdapter(views);}/** * 初始化資料 */private void initData(){//定義一個布局並設定參數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);        }                 //設定資料        viewPager.setAdapter(vpAdapter);        //設定監聽        viewPager.setOnPageChangeListener(this);                //初始化底部小點        initPoint();}/** * 初始化底部小點 */private void initPoint(){LinearLayout linearLayout = (LinearLayout) findViewById(R.id.ll);               points = new ImageView[pics.length];        //迴圈取得小點圖片        for (int i = 0; i < pics.length; i++) {        //得到一個LinearLayout以下的每個子項目        points[i] = (ImageView) linearLayout.getChildAt(i);        //預設都設為灰色        points[i].setEnabled(true);        //給每個小點設定監聽        points[i].setOnClickListener(this);        //設定位置tag，方便取出與當前位置相應        points[i].setTag(i);        }                //設定當面預設的位置        currentIndex = 0;        //設定為白色，即選中狀態        points[currentIndex].setEnabled(false);}/** * 當滑動狀態改變時調用 */@Overridepublic void onPageScrollStateChanged(int arg0) {}/** * 噹噹前頁面被滑動時調用 */@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}/** * 當新的頁面被選中時調用 */@Overridepublic void onPageSelected(int position) {//設定底部小點選中狀態        setCurDot(position);}/** * 通過點擊事件來切換當前的頁面 */@Overridepublic void onClick(View v) { int position = (Integer)v.getTag();         setCurView(position);         setCurDot(position);}/** * 設定當前頁面的位置 */private void setCurView(int position){         if (position < 0 || position >= pics.length) {             return;         }         viewPager.setCurrentItem(position);     }     /**     * 設定當前的小點的位置     */    private void setCurDot(int positon){         if (positon < 0 || positon > pics.length - 1 || currentIndex == positon) {             return;         }         points[positon].setEnabled(false);         points[currentIndex].setEnabled(true);         currentIndex = positon;     }}

以上僅僅是簡單的實現。沒有複雜的動畫效果。

原始碼下載

【Android UI設計與開發】使用ViewPager實現歡迎引導頁面