ViewPager創(chuàng)建步驟詳解
Android
ViewPager是android擴展包v4包中的類，這個類可以讓用戶左右切換當前的view安拟。
在應用第一次啟動時癞志，經(jīng)常會看到用ViewPager實現(xiàn)的Splash頁面萧恕。
我們首先來看看API對于這個類的表述：
Layout manager that allows the user to flip left and right through pages of data. You supply an implementation of a PagerAdapter to generate the pages that the view shows.
Note this class is currently under early design and development. The API will likely change in later updates of the compatibility library, requiring changes to the source code of apps when they are compiled against the newer version.
ViewPager is most often used in conjunction with Fragment, which is a convenient way to supply and manage the lifecycle of each page. There are standard adapters implemented for using fragments with the ViewPager, which cover the most common use cases. These are FragmentPagerAdapter andFragmentStatePagerAdapter; each of these classes have simple code showing how to build a full user interface with them.
從這個描述中我們知道幾點：
1）ViewPager類直接繼承了ViewGroup類姑子，所有它是一個容器類乎婿，可以在其中添加其他的view類。
2）ViewPager類需要一個PagerAdapter適配器類給它提供數(shù)據(jù)街佑。
3）ViewPager經(jīng)常和Fragment一起使用，并且提供了專門的FragmentPagerAdapter和FragmentStatePagerAdapter類供Fragment中的ViewPager使用捍靠。
好了沐旨，下面我們來實現(xiàn)Splash頁面吧！
步驟一：
創(chuàng)建一個Activity榨婆，并在布局文件中添加ViewPager組件：
<android.support.v4.view.ViewPager
android:id="@+id/vp_guide_guide"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
步驟二：
新建一個類并集成PagerAdapter磁携，即構建適配器
public class GuideAdapter extends PagerAdapter {
//圖片資源合集:ViewPager滾動的頁面種類
private int[] mImageId = new int[]{R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3};
private Context mContext;
public int[] getImageId() {
return mImageId;
}
//構造函數(shù)
public GuideAdapter(Context context) {
super();
this.mContext = context;
}
//返回填充ViewPager頁面的數(shù)量
@Override
public int getCount() {
return mImageId.length;
}
//銷毀ViewPager內某個頁面時調用
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;//固定是view == object
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(mContext);
//設置背景資源
imageView.setBackgroundResource(mImageId[position]);
container.addView(imageView);
return imageView;
}
}
步驟三：
在Acyivityy的Oncreate()；內獲取ViewPager控件良风，并設置適配器:
//獲取適配器
GuideAdapter mGuideAdapter = new GuideAdapter(getApplicationContext());
//獲取ViewPager控件
ViewPager mGuideVp = (ViewPager)findViewById(R.id.vp_guide_guide);
//設置適配器
mGuideVp.setAdapter(mGuideAdapter);
大功告成谊迄！
下面就是設置ViewPager上面的小紅點指示器：
步驟一：
首先，在res/drawable文件內新建兩個xml文件烟央，分別是shape_point_gray.xml和shape_point_red.xml统诺，代表指示器的兩種狀態(tài)：
- shape_point_gray.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="8dp"
android:height="8dp"/>
<solid
android:color="@android:color/darker_gray"/>
</shape>
- shape_point_red.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="8dp"
android:height="8dp"/>
<solid
android:color="@android:color/holo_red_light"/>
</shape>
步驟二：
先設置灰色狀態(tài)的圓點：在Activity的Oncreate();內添加以下代碼：
//初始化灰色小圓點
for (int i=0; i<mGuideAdapter.getImageId().length; i++){
ImageView point = new ImageView(this);
point.setBackgroundResource(R.drawable.shape_point_gray);
LinearLayout.LayoutParams params =
new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
if (i > 0){
params.leftMargin = 10;//設置左邊距
}
point.setLayoutParams(params);
mLinLayGuidepointContainer.addView(point);
}
步驟三：
設置紅色狀態(tài)的圓點：在布局文件內添加以下代碼：
<RelativeLayout
android:layout_alignParentBottom="true"
android:layout_marginBottom="50dp"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/linLay_guide_pointContainer"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:id="@+id/iv_guide_redPoint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/shape_point_red"/>
</RelativeLayout>
步驟四：
此時已經(jīng)完成了紅點和灰點的初始化工作，下面就是當ViewPager頁面左右滑動時疑俭，紅點的位置跟著變化粮呢，實現(xiàn)指示器功能：
在步驟二時已經(jīng)在頁面添加了水平居中的三個灰色的圓點，下面就是獲取相鄰兩個灰點之間的距離：
可以通過監(jiān)聽Layout執(zhí)行結束事件來獲取，代碼如下：
int mPointWidth;
ImageView mIvGuideRedPoint = (ImageView)findViewById(R.id.iv_guide_redPoint);
// meaure->layout->draw(必須在onCreate執(zhí)行結束之后才開始繪制),
// 所以不能直接在onCreate中獲取位置相關信息
// 監(jiān)聽layout執(zhí)行結束事件, 結束之后再去獲取位置信息,計算圓點間距
// 獲取視圖樹,hierarchyviewer.bat
mIvGuideRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(
new ViewTreeObserver.OnGlobalLayoutListener() {
// layout方法執(zhí)行結束之后,回調此方法
@Override
public void onGlobalLayout() {
mPointWidth = mLinLayGuidepointContainer
.getChildAt(1)
.getLeft() -
mLinLayGuidepointContainer
.getChildAt(0)
.getLeft();
}
});
然后通過ViewPager的頁面監(jiān)聽事件來更改紅點的狀態(tài)：
//頁面滑動事件
mGuideVp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
// 頁面滑動過程中回調
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
int leftMargin = (int)
(mPointWidth * positionOffset + mPointWidth * position);
//重新修改布局參數(shù)
RelativeLayout.LayoutParams params =
(RelativeLayout.LayoutParams) mIvGuideRedPoint.getLayoutParams();
params.leftMargin = leftMargin;
mIvGuideRedPoint.setLayoutParams(params);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
ok!終于完成了啄寡，好好試下豪硅！有耐心才可成功
效果圖（按鈕沒有實現(xiàn)）：
ViewPager效果圖.gif
