【威哥說】大家早上好！奧運進行時齿椅，咱們國家金牌是一個接一個琉挖，騰訊QQ小窗是一個接一個，身為國人涣脚，我感到無比自豪示辈、驕傲，國家越來越強大遣蚀，人民越來越幸福矾麻，咳咳纱耻。。险耀。停弄喘。。甩牺。咱們的項目依然要繼續(xù)蘑志，有沒有？也提醒大家在看奧運的同時不要忘了學習贬派，學習才是根本急但，知識改變命運，技術成就夢想搞乏。波桩。。
上節(jié)給大家講解了Android項目工具的使用和框架的搭建请敦，本節(jié)咱們來完成每個項目都會有的引導頁的實現(xiàn)镐躲，動態(tài)加載圓點標記效果。
具體實現(xiàn)的功能如下：
1.可以左右滑動圖片冬三。
2.圖片的索引圓點顯示匀油，看出當前圖片所在的位置和圖片的數量缘缚。
3.可任意左右滑動勾笆。
4.圖片的索引圓點帶有動畫效果。
5.最后一頁顯示按鈕桥滨，點擊進入應用窝爪。
本次學習主要是利用ViewPager實現(xiàn)用戶引導界面
在這里，我們需要用到google提到的一個支持包—Android-support-v4.jar齐媒，這個包包含了一些非常有用的類蒲每，其中ViewPager類來實現(xiàn)頁面之間的切換操作。
下面是我的實現(xiàn)喻括，用一個xml布局邀杏，一個ViewPagerActivity和一個pageradapter即可。
首先是xml布局,這里我用相對布局唬血，全屏放一個viewpager望蜡，用一個viewGroup（LinearLayout）在底部來放置圓點View，在viewpager的上面拷恨。最后再放一個Button脖律，位置在LinearLayout的上面，設置為visibility="gone"腕侄，當滑動到最后一頁就顯示小泉，布局搞定芦疏。
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".guide.ViewPagerActivity">
android:id="@+id/first_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/viewpager_tag_viewgroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:layout_marginBottom="40dp">
android:id="@+id/view_pager_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="立即體驗"
android:layout_above="@id/viewpager_tag_viewgroup"
android:layout_centerHorizontal="true"
android:visibility="gone" />
再準備好一個Adapter,這個沒有什么可說的，直接繼承PagerAdapter重寫以下4個方法
package com.moliying.androidlifehelper.guide;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;
public class GuidePagerAdapter extends PagerAdapter {
private List viewList;
public GuidePagerAdapter(List viewList) {
this.viewList = viewList;
}
/**
* 返回頁面的個數
*
* @return
*/
@Override
public int getCount() {
if (viewList != null) {
return viewList.size();
}
return 0;
}
/**
* 判斷是否由對象生成界面
*
* @param view
* @param object
* @return
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
/**
* 初始化position位置的界面
*
* @param container
* @param position
* @return
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager) container).addView(viewList.get(position), 0);
return viewList.get(position);
}
/**
* 移除頁面
*
* @param container
* @param position
* @param object
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView(viewList.get(position));
}
}
一切就緒微姊，最后實現(xiàn)我們的ViewPagerActivity,為了大家看著方便酸茴，這里直接貼代碼了，注釋已經非常詳細兢交，大家仔細看弊决，后面為大家解讀代碼。
package com.moliying.androidlifehelper.guide;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import com.moliying.androidlifehelper.R;
import com.moliying.androidlifehelper.activity.LoginActivity;
import java.util.ArrayList;
import java.util.List;
public class ViewPagerActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
private ViewPager mViewPager;
//圖片資源的數組
private int[] mImageIdArray;
//圖片的集合
private List mViewList;
//放置圓點
private ViewGroup mViewGroup;
//實例化圓點View
private ImageView mImageView;
private ImageView[] mImageViewArray;
//最后一頁的按鈕
private Button mButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_pager);
mButton = (Button) findViewById(R.id.view_pager_button);
mButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(ViewPagerActivity.this, LoginActivity.class));
finish();
}
});
//加載ViewPager
initViewpager();
//加載底部圓點
initViewPagerTag();
}
/**
* 加載底部圓點
*/
private void initViewPagerTag() {
//這里實例化LinearLayout
mViewGroup = (ViewGroup) findViewById(R.id.viewpager_tag_viewgroup);
//根據ViewPager的item數量實例化數組
mImageViewArray = new ImageView[mViewList.size()];
//循環(huán)新建底部圓點imageview魁淳，將生成的imageview保存到數組中
for (int i = 0; i < mViewList.size(); i++) {
mImageView = new ImageView(this);
mImageView.setLayoutParams(new ViewGroup.LayoutParams(20, 20));
mImageView.setPadding(30, 0, 30, 0);
mImageViewArray[i] = mImageView;
//第一個頁面需要設為選中狀態(tài)飘诗，這里要使用兩張不同的圖片（選中與未選中）
if (i == 0) {
mImageView.setBackgroundResource(R.mipmap.viewpager_tag_on);
} else {
mImageView.setBackgroundResource(R.mipmap.viewpager_tag_off);
}
//將數組中的imageview加入到viewgroup
mViewGroup.addView(mImageViewArray[i]);
}
}
/**
* 加載ViewPager
*/
private void initViewpager() {
mViewPager = (ViewPager) findViewById(R.id.first_viewpager);
//實例化圖片資源
mImageIdArray = new int[]{R.drawable.guide01, R.drawable.guide02, R.drawable.guide03, R.drawable.guide04, R.drawable.guide05};
mViewList = new ArrayList();
//獲取一個layout參數，設置為match_parent
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT
, LinearLayout.LayoutParams.MATCH_PARENT);
//循環(huán)創(chuàng)建view并進入集合
for (int i = 0; i < mImageIdArray.length; i++) {
//new imageview并設置全屏和圖片資源
ImageView imageView = new ImageView(this);
imageView.setLayoutParams(params);
imageView.setBackgroundResource(mImageIdArray[i]);
//將imageview加入到View集合中
mViewList.add(imageView);
}
//View集合數據初始化好界逛，setAdapter就可以了
mViewPager.setAdapter(new GuidePagerAdapter(mViewList));
//添加ViewPager的滑動監(jiān)聽昆稿，注意是.add...以前是setOnPageChangeListener方法，已過時
mViewPager.addOnPageChangeListener(this);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//滑動后的監(jiān)聽
@Override
public void onPageSelected(int position) {
//循環(huán)設置當前頁的標記圖
for (int i = 0; i < mImageViewArray.length; i++) {
mImageViewArray[position].setBackgroundResource(R.mipmap.viewpager_tag_on);
if (position != i) {
mImageViewArray[i].setBackgroundResource(R.mipmap.viewpager_tag_off);
}
}
//判斷是否最后一頁息拜，是則顯示button
if (position == mImageViewArray.length - 1) {
mButton.setVisibility(View.VISIBLE);
} else {
mButton.setVisibility(View.GONE);
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
代碼的實現(xiàn)流程分3步
1.首先加載ViewPager溉潭，新建imageview添加到List中，然后設置adapter并顯示少欺。
2.然后加載LinearLayout（ViewGroup）喳瓣，放置圓點圖片，同樣新建imageview設置背景后放入到圓點圖集合中赞别，這里要使用兩張圖片畏陕，選中和未選中。
3.最后設置ViewPager的滑動監(jiān)聽事件仿滔，在滑動完成的監(jiān)聽OnPageSelected方法中惠毁，做兩件事贝咙，一個判斷當前頁是哪一頁柔袁，設置對應的圓點為選中，第二個是如果是最后一頁祠挫，要顯示Button按鈕飒焦。
? ? ? Ok蜈膨，咱們本節(jié)課程就先到這里，下節(jié)要為大家講解的是Android xutils3.0框架最新版本的使用牺荠，xutils3變化較多翁巍，而且開源中的simple有很多細節(jié)沒有提到，我經過在項目中的使用遇到了一些坑志电，分享給你們曙咽，希望大家關注并轉發(fā)，感謝挑辆！
本文出自微信公眾號mjw-java例朱，更多內容關注微信公眾號或訪問www.moliying.com
