Android ViewPager 打造炫酷歡迎頁

Android ViewPager 打造炫酷歡迎頁

ViewPager是Android擴展v4包中的類，這個類可以讓用戶切換當前的View。對於這個類的應用場景，稍加修改就可以應用到多個環境下。比如：App的歡迎頁，App導航頁設計，app的側滑退出和app的側邊欄應用界面設計等都可以用ViewPager實現。

   

1. 關於歡迎頁的導航設計

• 設計思想：歡迎頁的導航包括幾個app說明（歡迎頁），頁面的下方有導航點，顯示當前所在的頁面數，自動跳轉下一頁，最后一頁有進入的 登陸\注冊 的按鈕。或者有提示進入的按鈕。或者有直接的登陸或者注冊的輸入框。輸入完成后進入主界面。

• 代碼設計：創建包容歡迎頁面的視圖集合，包含指示當前第幾頁的“點”的集合，包含最后一頁的跳轉設計，包含用戶當前不操作的自動跳轉，包含用戶銷毀當前應用第二次進入的跳過歡迎頁等設計。

2. 歡迎頁的引導頁設計

• 1.引導類：

//建立Guide類繼承自 AppCompatActivity，實現OnPageChangeListener 並實現OnPageChangeListener的onPageScrolled，onPageSelected，onPageScrollStateChanged類。

public class Guide extends AppCompatActivity implements ViewPager.OnPageChangeListener {
private ViewPager vp;
private ViewPagerAdapter vpAdapter;   //創建ViewPager適配器
private List<View> views;   //創建視圖集合
private ImageView[] dots;   //創建指示點集合

private int[] ids = {R.id.iv_bit1, R.id.iv_bit2, R.id.iv_bit3, R.id.iv_bit4};   //初始化指示點集合
private Button btn_start;   //初始末頁跳轉按鈕


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);   //歡迎頁無標題設置
    setContentView(R.layout.guide_layout); 
    initViews();
    initDots();
}

private void initViews() {
    LayoutInflater inflater = LayoutInflater.from(this);
    views = new ArrayList<View>();
    views.add(inflater.inflate(R.layout.one, null));
    views.add(inflater.inflate(R.layout.two, null));
    views.add(inflater.inflate(R.layout.three, null));
    views.add(inflater.inflate(R.layout.four, null));

    vpAdapter = new ViewPagerAdapter(views, this);
    vp = (ViewPager) findViewById(R.id.viewPager);
    vp.setAdapter(vpAdapter);
	//適配器適配頁面

    btn_start = (Button) views.get(3).findViewById(R.id.btn_start);
	//到第四頁點擊按鈕跳轉

    btn_start.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Intent intent = new Intent(Guide.this,MainActivity.class);
			//跳轉到主Activity
            startActivity(intent);
            finish();   //銷毀沒有用的內存占用
        }
    });


    vp.setOnPageChangeListener(this);

}

private void initDots() {
    dots = new ImageView[views.size()];
    for (int i = 0; i < views.size(); i++) {
        dots[i] = (ImageView) findViewById(ids[i]);
		   //根據當前頁面的views.size()來變化指示圖標
    }
}


@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

//指示點的變化函數
@Override
public void onPageSelected(int position) {
    for (int i = 0; i < ids.length; i++) {
        if (position == i) {
            dots[i].setImageResource(R.drawable.login_point_selected);
        } else {
            dots[i].setImageResource(R.drawable.login_point);
        }

    }

}

@Override
public void onPageScrollStateChanged(int state) {

}
}

• 2.引導視圖：

位於頁面最下方的四個點：第一個是默認被選中的點。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00333333"
    >
</android.support.v4.view.ViewPager>

<LinearLayout
    android:id="@+id/ll"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal"
    android:gravity="center_horizontal"

    >
    <ImageView
        android:id="@+id/iv_bit1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/login_point_selected"
        />
    <ImageView
        android:id="@+id/iv_bit2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/login_point"
        />
    <ImageView
        android:id="@+id/iv_bit3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/login_point"
        />
    <ImageView
        android:id="@+id/iv_bit4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/login_point"
        />
</LinearLayout>
</RelativeLayout>

• 3.打造視圖適配器：

//建立ViewPagerAdapter繼承自 PagerAdapter,並實現其destroyItem，instantiateItem，getCount，isViewFromObject方法。構造ViewPagerAdapter的內部類，創建View的數組類和聯系上下文的Context。

public class ViewPagerAdapter extends PagerAdapter {

private List<View> views;
private Context context;

public ViewPagerAdapter(List<View> views,Context context){
    this.views = views;
    this.context = context;
}

@Override
public void destroyItem(View container, int position, Object object) {
    ((ViewPager)container).removeView(views.get(position));
}

@Override
public Object instantiateItem(View container, int position) {
    ((ViewPager)container).addView(views.get(position));
    return views.get(position);
}

@Override
public int getCount() {
    return views.size();
}

@Override
public boolean isViewFromObject(View view, Object object) {

    return (view == object);
}
}

• 4.分別實現四個歡迎視圖：

第一個歡迎界面：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_one"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/guide_one"
/>
</LinearLayout>

第四（末）個歡迎界面：

<?xml version="1.0" encoding="utf-8"?>
RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
    android:id="@+id/iv_four"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/guide_four"
    />
<LinearLayout
    android:id="@+id/btn_welcome"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:gravity="center_horizontal"
    android:orientation="horizontal"
    >
    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="welcome"
        />
</LinearLayout>
</RelativeLayout>

• 5.建立控制進入與跳轉變化的類WelCome：

//用異步的方法來實現跳轉的判斷

public class Welcome extends AppCompatActivity {
private boolean isFirstIn = false;   //設置第一次進入為false
private static final int TIME = 2300;   //從logo界面到歡迎頁的時間為2.3秒
private static final int GO_HOME = 1000;   //到主頁的時間
private static final int GO_GUIDE = 1001;   //到歡迎頁的時間多1來判斷

private Handler mHandler = new Handler(){   //異步信息
    @Override
    public void handleMessage(Message msg) {
        switch (msg.what){
            case GO_HOME:
                goHome();
            break;
            case GO_GUIDE:
                goGuide();
                break;

            default:
                break;
        }

    }
};



@Override
protected void onCreate(Bundle savedInstanceState) {
    final Intent intent = new Intent(Welcome.this,MainActivity.class);
    super.onCreate(savedInstanceState);
    setContentView(R.layout.welcome_layout);
    init();   //自定義方法判斷是否第一次開啟App

	//設置自動跳轉時間Timer 無響應后10秒自動跳轉
    Timer timer = new Timer();
    TimerTask task = new TimerTask() {
        @Override
        public void run() {
           startActivity(intent);
        }
    };
    timer.schedule(task,1000*10);
    finish();

}

private void init(){
    SharedPreferences preferences = getPreferences(MODE_PRIVATE);
    isFirstIn = preferences.getBoolean("isFirstIn",true);

    if (!isFirstIn){
        mHandler.sendEmptyMessageDelayed(GO_HOME,TIME);
    }else {
        mHandler.sendEmptyMessageDelayed(GO_GUIDE,TIME);
        SharedPreferences.Editor editor = preferences.edit();
        editor.putBoolean("isFirstIn",false);
        editor.commit();
    }

}

private void goHome() {
    Intent intent = new Intent(Welcome.this,MainActivity.class);
    startActivity(intent);
    finish();
}

private void goGuide() {
    Intent intent = new Intent(Welcome.this,Guide.class);
    startActivity(intent);
    finish();
}
}

• 6.WelCome視圖：

加入logo的ImageView視圖：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/welcome_android"
    />
</LinearLayout>

• 7.修改AndroidManifest.xml 注冊信息以及首選開啟項：

修改主題為NoTitleBar，修改引導頁為WelCome類：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.asdemot">

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen">
    <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:theme="@style/AppTheme.NoActionBar">
    </activity>
    <activity android:name="com.example.asdemot.Guide">

    </activity>
    <activity android:name="com.example.asdemot.Welcome">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>
</manifest>

• 8.總結：

需要導入V4的jar包。至此，一個熱氣騰騰的歡迎頁就完成了。