Android中ViewPager實(shí)現(xiàn)滑動(dòng)指示條及與Fragment的配合
自主實(shí)現(xiàn)滑動(dòng)指示條
先上效果圖：
1、XML布局
布局代碼如下：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.testviewpage_2.MainActivity" > <ImageView android:id="@+id/cursor" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="matrix" android:src="@drawable/a" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"/> </LinearLayout>
采用線性垂直布局，在滑動(dòng)頁(yè)面的上方添加一個(gè)小水平條。
2、JAVA代碼
先給出全部代碼，然后再逐步講解。
public class MainActivity extends Activity {
private View view1, view2, view3;
private List<View> viewList;// view數(shù)組
private ViewPager viewPager; // 對(duì)應(yīng)的viewPager
private ImageView cursor;
private int bmpw = 0; // 游標(biāo)寬度
private int offset = 0;// // 動(dòng)畫圖片偏移量
private int currIndex = 0;// 當(dāng)前頁(yè)卡編號(hào)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewpager);
LayoutInflater inflater = getLayoutInflater();
view1 = inflater.inflate(R.layout.layout1, null);
view2 = inflater.inflate(R.layout.layout2, null);
view3 = inflater.inflate(R.layout.layout3, null);
viewList = new ArrayList<View>();// 將要分頁(yè)顯示的View裝入數(shù)組中
viewList.add(view1);
viewList.add(view2);
viewList.add(view3);
//初始化指示器位置
initCursorPos();
viewPager.setAdapter(new MyPagerAdapter(viewList));
viewPager.setOnPageChangeListener(new MyPageChangeListener());
}
//初始化指示器位置
public void initCursorPos() {
// 初始化動(dòng)畫
cursor = (ImageView) findViewById(R.id.cursor);
bmpw = BitmapFactory.decodeResource(getResources(), R.drawable.a)
.getWidth();// 獲取圖片寬度
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int screenW = dm.widthPixels;// 獲取分辨率寬度
offset = (screenW / viewList.size() - bmpw) / 2;// 計(jì)算偏移量
Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
cursor.setImageMatrix(matrix);// 設(shè)置動(dòng)畫初始位置
}
//頁(yè)面改變監(jiān)聽(tīng)器
public class MyPageChangeListener implements OnPageChangeListener {
int one = offset * 2 + bmpw;// 頁(yè)卡1 -> 頁(yè)卡2 偏移量
int two = one * 2;// 頁(yè)卡1 -> 頁(yè)卡3 偏移量
@Override
public void onPageSelected(int arg0) {
Animation animation = null;
switch (arg0) {
case 0:
if (currIndex == 1) {
animation = new TranslateAnimation(one, 0, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, 0, 0, 0);
}
break;
case 1:
if (currIndex == 0) {
animation = new TranslateAnimation(offset, one, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, one, 0, 0);
}
break;
case 2:
if (currIndex == 0) {
animation = new TranslateAnimation(offset, two, 0, 0);
} else if (currIndex == 1) {
animation = new TranslateAnimation(one, two, 0, 0);
}
break;
}
currIndex = arg0;
animation.setFillAfter(true);// True:圖片停在動(dòng)畫結(jié)束位置
animation.setDuration(300);
cursor.startAnimation(animation);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
}
/**
* ViewPager適配器
*/
public class MyPagerAdapter extends PagerAdapter {
public List<View> mListViews;
public MyPagerAdapter(List<View> mListViews) {
this.mListViews = mListViews;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return mListViews.size();
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
container.removeView(mListViews.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
container.addView(mListViews.get(position));
return mListViews.get(position);
}
}
}
從易到難一步步來(lái)講。
1、MyPagerAdapter類
一般我們對(duì)于適配器的實(shí)現(xiàn)總是new一個(gè)PageAdapter的實(shí)例。我們這里做了一點(diǎn)稍微的更改，將其集合成一個(gè)類，內(nèi)容都沒(méi)變，只是多了一個(gè)構(gòu)造函數(shù)而已。所以針對(duì)這個(gè)類的具體代碼，我就不再細(xì)講，如果對(duì)其中的復(fù)寫的函數(shù)為什么要這么寫不理解的同學(xué)，請(qǐng)看《ViewPager 詳解（二）---詳解四大函數(shù)》
2、initCursorPos（）---初始化指示器位置
游標(biāo)在初始化顯示時(shí)，我們要根據(jù)屏幕寬度來(lái)顯示游標(biāo)位置。先看看這部分代碼：
//初始化指示器位置
public void initCursorPos() {
// 初始化動(dòng)畫
cursor = (ImageView) findViewById(R.id.cursor);
bmpw = BitmapFactory.decodeResource(getResources(), R.drawable.a)
.getWidth();// 獲取圖片寬度
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int screenW = dm.widthPixels;// 獲取分辨率寬度
offset = (screenW / viewList.size() - bmpw) / 2;// 計(jì)算偏移量
Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
cursor.setImageMatrix(matrix);// 設(shè)置動(dòng)畫初始位置
}
可能有些同學(xué)不明白的位置在于，初始化位置的偏移量為什么這么算，下面，我畫了張圖，看下就應(yīng)該明白了。
最后對(duì)于偏移的方法，可用的很多，這里仿網(wǎng)上的代碼用了matrix；當(dāng)然大家可以用其它的偏移方法，一樣。
3、MyPageChangeListener（）---頁(yè)面改變監(jiān)聽(tīng)器
代碼如下 ：
public class MyPageChangeListener implements OnPageChangeListener {
int one = offset * 2 + bmpw;// 頁(yè)卡1 -> 頁(yè)卡2 偏移量
int two = one * 2;// 頁(yè)卡1 -> 頁(yè)卡3 偏移量
@Override
public void onPageSelected(int arg0) {
Animation animation = null;
switch (arg0) {
case 0:
if (currIndex == 1) {
animation = new TranslateAnimation(one, 0, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, 0, 0, 0);
}
break;
case 1:
if (currIndex == 0) {
animation = new TranslateAnimation(offset, one, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, one, 0, 0);
}
break;
case 2:
if (currIndex == 0) {
animation = new TranslateAnimation(offset, two, 0, 0);
} else if (currIndex == 1) {
animation = new TranslateAnimation(one, two, 0, 0);
}
break;
}
currIndex = arg0;
animation.setFillAfter(true);// True:圖片停在動(dòng)畫結(jié)束位置
animation.setDuration(300);
cursor.startAnimation(animation);
}
原理是這樣，根據(jù)滑動(dòng)到的頁(yè)面，把游標(biāo)滑動(dòng)找指定位置。
這里可能有難度的地方在于，數(shù)學(xué)……
我畫了一張圖，解釋從第一個(gè)頁(yè)面到第二個(gè)頁(yè)面時(shí)的距離為什么是“游標(biāo)寬度+offset*2”，其它距離類似。
這篇就到這了，而且這個(gè)難度不太大，講的可能不太細(xì)。
源碼中，給大家列出了一個(gè)有Tab交互的Demo，圖片如下：
使用Fragment實(shí)現(xiàn)ViewPager滑動(dòng)
使用Fragment實(shí)現(xiàn)ViewPager滑動(dòng)是Android官方比較推薦的一種做法，我們先再來(lái)看一下效果圖：
在第一個(gè)頁(yè)面加一個(gè)Btn
第一頁(yè)面向第二頁(yè)面滑動(dòng)
第二頁(yè)面向第三個(gè)頁(yè)面滑動(dòng)
1、適配器實(shí)現(xiàn)——FragmentPagerAdapter
先看完整代碼，再細(xì)講：
public class FragAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragments;
public FragAdapter(FragmentManager fm,List<Fragment> fragments) {
super(fm);
// TODO Auto-generated constructor stub
mFragments=fragments;
}
@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return mFragments.get(arg0);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return mFragments.size();
}
}
這里有三個(gè)函數(shù)，根據(jù)第一部分的官方文檔，可知，對(duì)于FragmentPagerAdapter的派生類，只重寫getItem(int)和getCount()就可以了。
對(duì)于構(gòu)造函數(shù)，這里申請(qǐng)了一個(gè)Fragment的List對(duì)象，用于保存用于滑動(dòng)的Fragment對(duì)象，并在創(chuàng)造函數(shù)中初始化：
public FragAdapter(FragmentManager fm,List<Fragment> fragments) {
super(fm);
// TODO Auto-generated constructor stub
mFragments=fragments;
}
然后在getItem(int arg0)中，根據(jù)傳來(lái)的參數(shù)arg0，來(lái)返回當(dāng)前要顯示的fragment,下面是getItem的官方解釋，難度不大，不再細(xì)講。
public abstract Fragment getItem (int position)
Return the Fragment associated with a specified position.
最后，getCount()返回用于滑動(dòng)的fragment總數(shù)；
從構(gòu)造函數(shù)所以看出，我們要構(gòu)造Fragment的集合才行，所以下面我們就先產(chǎn)生我們所需要的Fragment類；
2、三個(gè)Fragment類
第一個(gè)Fragment類：
XML：（layout1.xml）
<?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:background="#ffffff" android:orientation="vertical" > <Button android:id="@+id/fragment1_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="show toast" /> </LinearLayout>
在其中加入了一個(gè)Btn
Java代碼：
public class Fragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View view= inflater.inflate(R.layout.layout1, container, false);
//對(duì)View中控件的操作方法
Button btn = (Button)view.findViewById(R.id.fragment1_btn);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(getActivity(), "點(diǎn)擊了第一個(gè)fragment的BTN", Toast.LENGTH_SHORT).show();
}
});
return view;
}
}
在onCreateView()中返回要顯示的View，上面這段代碼簡(jiǎn)單演示了如何對(duì)視圖里的控件進(jìn)行操作，難度不大，不再細(xì)講。第二個(gè)Fragment類：
XML代碼：（layout2.xml）原生代碼，沒(méi)有做任何更改
<?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:background="#ffff00" android:orientation="vertical" > </LinearLayout>
java代碼：
public class Fragment2 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View view=inflater.inflate(R.layout.layout2, container, false);
return view;
}
}
第三個(gè)Fragment類：
XML代碼：（layout3.xml）同樣，原生代碼，沒(méi)做任何更改
<?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:background="#ff00ff" android:orientation="vertical" > </LinearLayout>
java代碼：
public class Fragment3 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View view=inflater.inflate(R.layout.layout3, container, false);
return view;
}
}
3、主activity實(shí)現(xiàn)
核心代碼：
public class MainActivity extends FragmentActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//構(gòu)造適配器
List<Fragment> fragments=new ArrayList<Fragment>();
fragments.add(new Fragment1());
fragments.add(new Fragment2());
fragments.add(new Fragment3());
FragAdapter adapter = new FragAdapter(getSupportFragmentManager(), fragments);
//設(shè)定適配器
ViewPager vp = (ViewPager)findViewById(R.id.viewpager);
vp.setAdapter(adapter);
}
}
首先有一個(gè)最值得注意的地方：Activity派生自FragmentActivity，其實(shí)這是有關(guān)Fragment的基礎(chǔ)知識(shí)，只有FragmentActivity才能內(nèi)嵌fragment頁(yè)面，普通Activity是不行的。
這段代碼主要分為兩步，第一步：構(gòu)造適配器；第二步：設(shè)定適配器。
先看構(gòu)造適配器的過(guò)程：
//構(gòu)造適配器 List<Fragment> fragments=new ArrayList<Fragment>(); fragments.add(new Fragment1()); fragments.add(new Fragment2()); fragments.add(new Fragment3()); FragAdapter adapter = new FragAdapter(getSupportFragmentManager(), fragments);
構(gòu)造一個(gè)fragment列表，然后將上面的三個(gè)Fragment類對(duì)應(yīng)的實(shí)例添加進(jìn)去，最后生成FragAdapter實(shí)例。
至于第二步，設(shè)定適配器，沒(méi)什么好講的。
4、可能出現(xiàn)的問(wèn)題
問(wèn)題：在MainActivity中，當(dāng)寫到這句：fragments.add(new Fragment1()); 向Fragment列表中添加Fragement對(duì)象實(shí)例時(shí)，會(huì)提示“無(wú)法將Fragment1()轉(zhuǎn)換為fragment”
解決辦法 ：這是因?yàn)閷?dǎo)入包不一致，一般的問(wèn)題在于：在Fragment1中導(dǎo)入的是android.app.Fragment， 而在這里導(dǎo)入類確是：android.support.v4.app.Fragment,包不同當(dāng)然無(wú)法轉(zhuǎn)換，統(tǒng)一導(dǎo)入為android.support.v4.app.Fragment之后就正常了
相關(guān)文章
Android Fragment動(dòng)態(tài)創(chuàng)建詳解及示例代碼
這篇文章主要介紹了Android Fragment動(dòng)態(tài)創(chuàng)建詳解的相關(guān)資料,并附實(shí)例代碼及實(shí)現(xiàn)效果圖，需要的朋友可以參考下2016-11-11
Android使用Spinner控件實(shí)現(xiàn)下拉列表的案例
今天小編就為大家分享一篇關(guān)于Android使用Spinner控件實(shí)現(xiàn)下拉列表的案例，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-03-03
這篇文章主要將從源碼的角度帶大家一起分析Android?rinflate的使用，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的可以了解一下2023-04-04
Android?AIDL通信DeadObjectException解決方法示例
這篇文章主要為大家介紹了Android?AIDL通信DeadObjectException解決的方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Android 實(shí)現(xiàn)掃雷小游戲?qū)嵗a
這篇文章主要介紹了Android 實(shí)現(xiàn)掃雷小游戲?qū)嵗a的相關(guān)資料,需要的朋友可以參考下2016-12-12
Android基于繪制緩沖實(shí)現(xiàn)煙花效果
這篇文章主要介紹了Android基于繪制緩沖實(shí)現(xiàn)煙花效果,文中通過(guò)代碼示例和圖文結(jié)合介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,感興趣的同學(xué)可以自己動(dòng)手嘗試一下2024-03-03
這篇文章主要介紹了Android Studio模擬器運(yùn)行apk文件，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-09-09
Android自定義View實(shí)現(xiàn)可拖拽縮放的矩形框
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)可拖拽縮放的矩形框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要為大家詳細(xì)解析了Android指紋解鎖方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Android?WebView的使用與后退鍵處理詳細(xì)討論
在android開發(fā)中我們有時(shí)候根據(jù)項(xiàng)目的需求多少會(huì)加載一些webview,加載webview,我們有時(shí)候會(huì)根據(jù)UI來(lái)自定義返回鍵,下面這篇文章主要給大家介紹了關(guān)于Android?WebView的使用與后退鍵處理的相關(guān)資料,需要的朋友可以參考下2024-04-04