簡單使用XML文件,使用ViewPagerAdapter適配器盾计,來適配不同的page
具體實現(xiàn)方法:
- 設(shè)置相應的xml文件,幾個page以及title和bottom
- 在MainActivity.xml中加入Title和bottom還有viewPager
- 在MainActivity中初始化相應的View派敷,實現(xiàn)ViewPager需要實現(xiàn)的Adapter其中需要復寫幾個方法
destroyItem(), 移除指定位置的頁面所刀。該 Adapter 負責在 finishUpdate() 方法返回時從容器刪除視圖。
container.removeView(mViews.get(position));
instantiateItem(), 創(chuàng)建指定位置的頁面瓶埋,該 Adapter 負責將視圖添加進當前的容器(container)希柿,并返回一個鍵(key),用來關(guān)聯(lián)當前的頁面視圖 View.直接在mViews里面取出相應的View养筒,并且在container里面添加進去
View view = mViews.get(position);container.addView(view);return view;```
getCount(), 返回可用視圖的數(shù)量曾撤。
isViewFromObject(),判斷instantiateItem(ViewGroup, int) 方法所返回來的 Key 與一個頁面視圖是否是代表的同一個視圖(即它倆是否是對應的,對應的表示同一個View)晕粪。
```java
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}```
- 現(xiàn)在實現(xiàn)初始化View的方法
//初始化View挤悉,包括ViewPager和相應的幾個控件
private void initView() {
mViewPager = (ViewPager) findViewById(R.id.view_pager);
mTabWinxin = (LinearLayout) findViewById(R.id.id_tab_weixin);
mTabWinAddres = (LinearLayout) findViewById(R.id.id_tab_contacts);
mTabWinFrd = (LinearLayout) findViewById(R.id.id_tab_friend);
mTabWinSetting = (LinearLayout) findViewById(R.id.id_tab_setting);
mWinxinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
mAddresImg = (ImageButton) findViewById(R.id.id_tab_contacts_img);
mFrdImg = (ImageButton) findViewById(R.id.id_tab_friend_img);
mSettingImg = (ImageButton) findViewById(R.id.id_tab_setting_img);
LayoutInflater mInflater = LayoutInflater.from(this);
View tab01 = mInflater.inflate(R.layout.tab01, null);
View tab02 = mInflater.inflate(R.layout.tab02, null);
View tab03 = mInflater.inflate(R.layout.tab03, null);
View tab04 = mInflater.inflate(R.layout.tab04, null);
mViews.add(tab01);
mViews.add(tab02);
mViews.add(tab03);
mViews.add(tab04);
mAdapter = new PagerAdapter() {
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mViews.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = mViews.get(position);
container.addView(view);
return view;
}
@Override
public int getCount() {
return mViews.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
};
mViewPager.setAdapter(mAdapter);
}```
- 到現(xiàn)在,我們就實現(xiàn)了Viewpager的滑動巫湘,但是底部欄的變化和點擊事件都沒有寫装悲,下面對LinearLayout寫入點擊事件(如果LinearLayout里面有Button的點擊沖突事件,那么要在Button里面寫入Clickable為false尚氛,因為Layout首先處理有點擊事件的控件)
private void initEvent() {
//處理每一個的LinearLayout的點擊事件
mTabWinxin.setOnClickListener(this);
mTabWinAddres.setOnClickListener(this);
mTabWinFrd.setOnClickListener(this);
mTabWinSetting.setOnClickListener(this);
/**
* 在設(shè)置好每次點擊Bottom的點擊事件后诀诊,如果想要拖動ViewPager同時bottom也發(fā)生改變
* 那么就要重寫PageChangeListener的PageSelected方法
* 讓在PageChange頁面改變的時候,改變Bottom的圖片
*
* Notice 注意SetOnPageChangeListener已經(jīng)遺棄阅嘶,用AddOnPageChangeListener替換
*/
ViewPager.OnPageChangeListener listener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
int currentItem = mViewPager.getCurrentItem();
resetImg();
switch (currentItem) {
case 0:
mWinxinImg.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
mAddresImg.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
};
mViewPager.addOnPageChangeListener(listener);
}
注意Activity實現(xiàn)OnClickListener方法畏梆,重寫OnClick()方法,當每次監(jiān)聽到點擊事件奈懒,都會實現(xiàn)resetImg()方法奠涌,即重置每一個ImageButton成灰色,然后監(jiān)聽到的那個按鈕的點擊磷杏,即將那個ImageButton換成亮色
@Override
public void onClick(View v) {
resetImg();
switch (v.getId()){
case R.id.id_tab_weixin:
mViewPager.setCurrentItem(0);
mWinxinImg.setImageResource(R.drawable.tab_weixin_pressed);
break;
case R.id.id_tab_contacts:
mViewPager.setCurrentItem(2);
mAddresImg.setImageResource(R.drawable.tab_address_pressed);
break;
case R.id.id_tab_friend:
mViewPager.setCurrentItem(1);
mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case R.id.id_tab_setting:
mViewPager.setCurrentItem(3);
mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
break;
}
}```
重置每一個Image溜畅,相應的resetImg()方法
```java
private void resetImg() {
mWinxinImg.setImageResource(R.drawable.tab_weixin_normal);
mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
mAddresImg.setImageResource(R.drawable.tab_address_normal);
mSettingImg.setImageResource(R.drawable.tab_settings_normal);
} ```
這樣整個Viewpager配合適配器的滑動界面就完成了
未完待續(xù)(挖坑):ViewPager配合Fragment實現(xiàn)滑動不同界面
-----更新-----
####終極使用ViewPager實現(xiàn)頁面滑動
#####ViewPager結(jié)合Fragment
此方法為上述方法的升級版极祸,在View的管理上慈格,使用Fragment管理會更清晰怠晴,而且更利于后期代碼的修繕
主要是這樣幾個步驟:
1. 初始化View,創(chuàng)建需要的Fragment和xml布局,加入ViewPager布局
```java
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
- 創(chuàng)建Fragment的List,并且初始化ViewPager和FragmentPagerAdapter
private List<Fragment> mFragments;
onCreate(...){
...
mFragments = new ArrayList<>();
Fragment mTab01 = new WeixinFragment();
Fragment mTab02 = new FrdFragment();
Fragment mTab03 = new AddressFragment();
Fragment mTab04 = new SettingFragment();
mFragments.add(mTab01);
mFragments.add(mTab02);
mFragments.add(mTab03);
mFragments.add(mTab04);
... }```
3. 設(shè)置ViewPager的監(jiān)聽事件梯捕,重寫onPageSelected()方法
```java
mPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
@Override
public int getCount() {
return mFragments.size();
}
};
mViewPager.setAdapter(mPagerAdapter);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//用來監(jiān)聽ViewPager的改變短曾,通常用來改變Tab的樣式
int current = mViewPager.getCurrentItem();
setTab(current);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});```
4. 設(shè)置Tab的點擊事件(如果在點擊或者滑動有特效错英,需要進一步去實現(xiàn))這里只介紹,如何實現(xiàn)ViewPager和Fragment的組合效果
```java
public void setSelect(int select) {
mViewPager.setCurrentItem(select);
}```
5. 如果你想實現(xiàn)相應的通過ViewPager的監(jiān)聽碉考,來改變Tab的樣式墙贱,這里提供了代碼參考,對應的是ViewPager的addOnPageChangeListener中onPageSelected()中用到的方法
```java
private void setTab(int select) {
resetImg();
switch (select){
case 0:
mTabWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
mTabFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
mTabAdressImg.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
mTabSettingImg.setImageResource(R.drawable.tab_settings_pressed);
break;
}
}```
以上總結(jié)參考自[慕課網(wǎng)](http://www.imooc.com/video/5904)中[hyman](http://www.imooc.com/u/320852/courses?sort=publish)的課程
后續(xù)會更新熱門開源項目[FlycoTabLayout](https://github.com/H07000223/FlycoTabLayout)的使用教程(挖坑)纯蛾,這個相對于ViewPager來說更酷炫,更方便使用堕扶,本文的代碼參考在我的GitHub上,歡迎留言提出意見,感謝您的閱讀