http://www.tuicool.com/articles/7rUJfeN
第一種:單純使用ViewPager
MainActivity.java
public class MainActivity extends Activity implements OnClickListener {
//聲明ViewPager
private ViewPager mViewpager;
//聲明四個Tab
private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAddress;
private LinearLayout mTabSetting;
//聲明四個ImageButton
private ImageButton mWeixinImg;
private ImageButton mFrdImg;
private ImageButton mAddressImg;
private ImageButton mSettingImg;
//聲明ViewPager的適配器
private PagerAdapter mAdpater;
//用於裝載四個Tab的List
private List<View> mTabs = new ArrayList<View>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//去掉TitleBar
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initViews();//初始化控件
initDatas();//初始化數據
initEvents();//初始化事件
}
private void initEvents() {
//設置四個Tab的點擊事件
mTabWeixin.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabAddress.setOnClickListener(this);
mTabSetting.setOnClickListener(this);
//添加ViewPager的切換Tab的監聽事件
mViewpager.addOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//獲取ViewPager的當前Tab
int currentItem = mViewpager.getCurrentItem();
//將所以的ImageButton設置成灰色
resetImgs();
//將當前Tab對應的ImageButton設置成綠色
switch (currentItem) {
case 0:
mWeixinImg.setImageResource(R.mipmap.tab_weixin_pressed);
break;
case 1:
mFrdImg.setImageResource(R.mipmap.tab_find_frd_pressed);
break;
case 2:
mAddressImg.setImageResource(R.mipmap.tab_address_pressed);
break;
case 3:
mSettingImg.setImageResource(R.mipmap.tab_settings_pressed);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initDatas() {
//初始化ViewPager的適配器
mAdpater = new PagerAdapter() {
@Override
public int getCount() {
return mTabs.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = mTabs.get(position);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mTabs.get(position));
}
};
//設置ViewPager的適配器
mViewpager.setAdapter(mAdpater);
}
//初始化控件
private void initViews() {
mViewpager = (ViewPager) findViewById(R.id.id_viewpager);
mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);
mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);
mSettingImg = (ImageButton) findViewById(R.id.id_tab_setting_img);
//獲取到四個Tab
LayoutInflater inflater = LayoutInflater.from(this);
View tab1 = inflater.inflate(R.layout.tab1, null);
View tab2 = inflater.inflate(R.layout.tab2, null);
View tab3 = inflater.inflate(R.layout.tab3, null);
View tab4 = inflater.inflate(R.layout.tab4, null);
//將四個Tab添加到集合中
mTabs.add(tab1);
mTabs.add(tab2);
mTabs.add(tab3);
mTabs.add(tab4);
}
@Override
public void onClick(View v) {
//先將四個ImageButton都設置成灰色
resetImgs();
switch (v.getId()) {
case R.id.id_tab_weixin:
//設置viewPager的當前Tab
mViewpager.setCurrentItem(0);
//將當前Tab對應的ImageButton設置成綠色
mWeixinImg.setImageResource(R.mipmap.tab_weixin_pressed);
break;
case R.id.id_tab_frd:
mViewpager.setCurrentItem(1);
mFrdImg.setImageResource(R.mipmap.tab_find_frd_pressed);
break;
case R.id.id_tab_address:
mViewpager.setCurrentItem(2);
mAddressImg.setImageResource(R.mipmap.tab_address_pressed);
break;
case R.id.id_tab_setting:
mViewpager.setCurrentItem(3);
mSettingImg.setImageResource(R.mipmap.tab_settings_pressed);
break;
}
}
//將四個ImageButton設置成灰色
private void resetImgs () {
mWeixinImg.setImageResource(R.mipmap.tab_weixin_normal);
mFrdImg.setImageResource(R.mipmap.tab_find_frd_normal);
mAddressImg.setImageResource(R.mipmap.tab_address_normal);
mSettingImg.setImageResource(R.mipmap.tab_settings_normal);
}
}
頂部佈局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="@android:drawable/title_bar"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="45dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#ffffff"
android:textSize="20sp"
android:textStyle="bold"/>
</LinearLayout>
top.xml
四個Tab對應頁面的佈局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="30sp"
android:text="The Weixin Tab!"/>
</LinearLayout>
tab1.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="30sp"
android:text="The Friend Tab!"/>
</LinearLayout>
tab2.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="30sp"
android:text="The Address Tab!"/>
</LinearLayout>
tab3.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="30sp"
android:text="The Setting Tab!"/>
</LinearLayout>
tab4.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="55dp"
android:gravity="center"
android:background="@color/material_blue_grey_800"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/id_tab_weixin"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_weixin_img"
android:clickable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/tab_weixin_pressed"
android:background="#00000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="微信"/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_frd"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_frd_img"
android:clickable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/tab_find_frd_normal"
android:background="#00000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="朋友"/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_address"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_address_img"
android:clickable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/tab_address_normal"
android:background="#00000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="通訊錄"/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_setting"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_setting_img"
android:clickable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/tab_settings_normal"
android:background="#00000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="設置"/>
</LinearLayout>
</LinearLayout>
bottom.xml
主佈局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/top"/>
<android.support.v4.view.ViewPager
android:id="@+id/id_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<include layout="@layout/bottom"/>
</LinearLayout>
activity_main.xml
完整源碼 : 點擊下載
單純使用ViewPager的方式可以實現左右滑動切換頁面和點擊Tab切換頁面的效果。但是大家發現,這種方式需要在Activity完成所有的代碼實現,包括初始化Tab及其對應頁面的初始化控件、數據、事件及業務邏輯的處理。這樣會使得Activity看起來非常臃腫,進而造成代碼的可讀性和可維護性變得極差。
谷歌在Android 3.0時推出了Fragment。可以分別使用Fragment來管理每個Tab對應的頁面的佈局及功能的實現。然後將Fragment與Android關聯,這樣Android只需要管理Fragment就行了,起到了調度器的作用,不再關心每個Fragment裏的內容及功能實現是什麼。這樣就極大的解放了Activity,使代碼變得簡單、易讀。
下面我們通過使用Fragment的方式來實現Tab。
第二種:單純使用Fragment
MainActivity.java
public class MainActivity extends FragmentActivity implements OnClickListener {
//聲明四個Tab的佈局文件
private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAddress;
private LinearLayout mTabSetting;
//聲明四個Tab的ImageButton
private ImageButton mWeixinImg;
private ImageButton mFrdImg;
private ImageButton mAddressImg;
private ImageButton mSettingImg;
//聲明四個Tab分別對應的Fragment
private Fragment mFragWeinxin;
private Fragment mFragFrd;
private Fragment mFragAddress;
private Fragment mFragSetting;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initViews();//初始化控件
initEvents();//初始化事件
selectTab(0);//默認選中第一個Tab
}
private void initEvents() {
//初始化四個Tab的點擊事件
mTabWeixin.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabAddress.setOnClickListener(this);
mTabSetting.setOnClickListener(this);
}
private void initViews() {
//初始化四個Tab的佈局文件
mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);
//初始化四個ImageButton
mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);
mSettingImg = (ImageButton) findViewById(R.id.id_tab_setting_img);
}
//處理Tab的點擊事件
@Override
public void onClick(View v) {
//先將四個ImageButton置爲灰色
resetImgs();
switch (v.getId()) {
case R.id.id_tab_weixin:
selectTab(0);//當點擊的是微信的Tab就選中微信的Tab
break;
case R.id.id_tab_frd:
selectTab(1);
break;
case R.id.id_tab_address:
selectTab(2);
break;
case R.id.id_tab_setting:
selectTab(3);
break;
}
}
//進行選中Tab的處理
private void selectTab(int i) {
//獲取FragmentManager對象
FragmentManager manager = getSupportFragmentManager();
//獲取FragmentTransaction對象
FragmentTransaction transaction = manager.beginTransaction();
//先隱藏所有的Fragment
hideFragments(transaction);
switch (i) {
//當選中點擊的是微信的Tab時
case 0:
//設置微信的ImageButton爲綠色
mWeixinImg.setImageResource(R.mipmap.tab_weixin_pressed);
//如果微信對應的Fragment沒有實例化,則進行實例化,並顯示出來
if (mFragWeinxin == null) {
mFragWeinxin = new WeixinFragment();
transaction.add(R.id.id_content, mFragWeinxin);
} else {
//如果微信對應的Fragment已經實例化,則直接顯示出來
transaction.show(mFragWeinxin);
}
break;
case 1:
mFrdImg.setImageResource(R.mipmap.tab_find_frd_pressed);
if (mFragFrd == null) {
mFragFrd = new FrdFragment();
transaction.add(R.id.id_content, mFragFrd);
} else {
transaction.show(mFragFrd);
}
break;
case 2:
mAddressImg.setImageResource(R.mipmap.tab_address_pressed);
if (mFragAddress == null) {
mFragAddress = new AddressFragment();
transaction.add(R.id.id_content, mFragAddress);
} else {
transaction.show(mFragAddress);
}
break;
case 3:
mSettingImg.setImageResource(R.mipmap.tab_settings_pressed);
if (mFragSetting == null) {
mFragSetting = new SettingFragment();
transaction.add(R.id.id_content, mFragSetting);
} else {
transaction.show(mFragSetting);
}
break;
}
//不要忘記提交事務
transaction.commit();
}
//將四個的Fragment隱藏
private void hideFragments(FragmentTransaction transaction) {
if (mFragWeinxin != null) {
transaction.hide(mFragWeinxin);
}
if (mFragFrd != null) {
transaction.hide(mFragFrd);
}
if (mFragAddress != null) {
transaction.hide(mFragAddress);
}
if (mFragSetting != null) {
transaction.hide(mFragSetting);
}
}
//將四個ImageButton置爲灰色
private void resetImgs() {
mWeixinImg.setImageResource(R.mipmap.tab_weixin_normal);
mFrdImg.setImageResource(R.mipmap.tab_find_frd_normal);
mAddressImg.setImageResource(R.mipmap.tab_address_normal);
mSettingImg.setImageResource(R.mipmap.tab_settings_normal);
}
}
“微信”、“朋友”、“通訊錄”、“設置”所對應的Fragment
public class WeixinFragment extends Fragment{
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab1, container, false);
return view;
}
}
WeixinFragment.java
public class FrdFragment extends Fragment{
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab2, container, false);
return view;
}
}
FrdFragment.java
public class AddressFragment extends Fragment{
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab3, container, false);
return view;
}
}
AddressFragment.java
public class SettingFragment extends Fragment{
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab4, container, false);
return view;
}
}
SettingFragment.java
頂部佈局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="@android:drawable/title_bar"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="45dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#ffffff"
android:textSize="20sp"
android:textStyle="bold"/>
</LinearLayout>
top.xml
四個Tab對應頁面的佈局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="30sp"
android:text="The Weixin Tab!"/>
</LinearLayout>
tab1.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="30sp"
android:text="The Friend Tab!"/>
</LinearLayout>
tab2.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="30sp"
android:text="The Address Tab!"/>
</LinearLayout>
tab3.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="30sp"
android:text="The Setting Tab!"/>
</LinearLayout>
tab4.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="55dp"
android:gravity="center"
android:background="@color/material_blue_grey_800"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/id_tab_weixin"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_weixin_img"
android:clickable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/tab_weixin_pressed"
android:background="#00000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="微信"/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_frd"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_frd_img"
android:clickable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/tab_find_frd_normal"
android:background="#00000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="朋友"/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_address"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_address_img"
android:clickable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/tab_address_normal"
android:background="#00000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="通訊錄"/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_setting"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_setting_img"
android:clickable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/tab_settings_normal"
android:background="#00000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="設置"/>
</LinearLayout>
</LinearLayout>
bottom.xml
主佈局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/top"/>
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/bottom"/>
</LinearLayout>
activity_main.xml
完整源碼 : 點擊下載
可以看出,使用Fragment實現了Activity與Tab對應的頁面分離,特別是當Tab對應的頁面的佈局和邏輯比較複雜時更能體會到使用Fragment的好處。但是單純使用Fragment只能通過點擊Tab來切換頁面,並不能實現左右滑動進行切換。
下面我們通過使用 ViewPager + Fragment 的方式實現Tab,這也是開發中使用比較廣泛的一種方式。
第三種:使用 ViewPager + Fragment
MainActivity.java
public class MainActivity extends FragmentActivity implements OnClickListener {
//聲明ViewPager
private ViewPager mViewPager;
//適配器
private FragmentPagerAdapter mAdapter;
//裝載Fragment的集合
private List<Fragment> mFragments;
//四個Tab對應的佈局
private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAddress;
private LinearLayout mTabSetting;
//四個Tab對應的ImageButton
private ImageButton mImgWeixin;
private ImageButton mImgFrd;
private ImageButton mImgAddress;
private ImageButton mImgSetting;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initViews();//初始化控件
initEvents();//初始化事件
initDatas();//初始化數據
}
private void initDatas() {
mFragments = new ArrayList<>();
//將四個Fragment加入集合中
mFragments.add(new WeixinFragment());
mFragments.add(new FrdFragment());
mFragments.add(new AddressFragment());
mFragments.add(new SettingFragment());
//初始化適配器
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {//從集合中獲取對應位置的Fragment
return mFragments.get(position);
}
@Override
public int getCount() {//獲取集合中Fragment的總數
return mFragments.size();
}
};
//不要忘記設置ViewPager的適配器
mViewPager.setAdapter(mAdapter);
//設置ViewPager的切換監聽
mViewPager.addOnPageChangeListener(new OnPageChangeListener() {
@Override
//頁面滾動事件
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//頁面選中事件
@Override
public void onPageSelected(int position) {
//設置position對應的集合中的Fragment
mViewPager.setCurrentItem(position);
resetImgs();
selectTab(position);
}
@Override
//頁面滾動狀態改變事件
public void onPageScrollStateChanged(int state) {
}
});
}
private void initEvents() {
//設置四個Tab的點擊事件
mTabWeixin.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabAddress.setOnClickListener(this);
mTabSetting.setOnClickListener(this);
}
//初始化控件
private void initViews() {
mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);
mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);
mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);
mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img);
mImgSetting = (ImageButton) findViewById(R.id.id_tab_setting_img);
}
@Override
public void onClick(View v) {
//先將四個ImageButton置爲灰色
resetImgs();
//根據點擊的Tab切換不同的頁面及設置對應的ImageButton爲綠色
switch (v.getId()) {
case R.id.id_tab_weixin:
selectTab(0);
break;
case R.id.id_tab_frd:
selectTab(1);
break;
case R.id.id_tab_address:
selectTab(2);
break;
case R.id.id_tab_setting:
selectTab(3);
break;
}
}
private void selectTab(int i) {
//根據點擊的Tab設置對應的ImageButton爲綠色
switch (i) {
case 0:
mImgWeixin.setImageResource(R.mipmap.tab_weixin_pressed);
break;
case 1:
mImgFrd.setImageResource(R.mipmap.tab_find_frd_pressed);
break;
case 2:
mImgAddress.setImageResource(R.mipmap.tab_address_pressed);
break;
case 3:
mImgSetting.setImageResource(R.mipmap.tab_settings_pressed);
break;
}
//設置當前點擊的Tab所對應的頁面
mViewPager.setCurrentItem(i);
}
//將四個ImageButton設置爲灰色
private void resetImgs() {
mImgWeixin.setImageResource(R.mipmap.tab_weixin_normal);
mImgFrd.setImageResource(R.mipmap.tab_find_frd_normal);
mImgAddress.setImageResource(R.mipmap.tab_address_normal);
mImgSetting.setImageResource(R.mipmap.tab_settings_normal);
}
}
“微信”、“朋友”、“通訊錄”、“設置”所對應的Fragment
public class WeixinFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab1, container, false);
return view;
}
}
WeixinFragment.java
public class FrdFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab2, container, false);
return view;
}
}
FrdFragment.java
public class AddressFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab3, container, false);
return view;
}
}
AddressFragment.java
public class SettingFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab4, container, false);
return view;
}
}
SettingFragment.java
頂部佈局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="@android:drawable/title_bar"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="45dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#ffffff"
android:textSize="20sp"
android:textStyle="bold"/>
</LinearLayout>
top.xml
四個Tab對應頁面的佈局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="30sp"
android:text="The Weixin Tab!"/>
</LinearLayout>
tab1.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="30sp"
android:text="The Friend Tab!"/>
</LinearLayout>
tab2.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="30sp"
android:text="The Address Tab!"/>
</LinearLayout>
tab3.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="30sp"
android:text="The Setting Tab!"/>
</LinearLayout>
tab4.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="55dp"
android:gravity="center"
android:background="@color/material_blue_grey_800"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/id_tab_weixin"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_weixin_img"
android:clickable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/tab_weixin_pressed"
android:background="#00000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="微信"/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_frd"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_frd_img"
android:clickable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/tab_find_frd_normal"
android:background="#00000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="朋友"/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_address"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_address_img"
android:clickable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/tab_address_normal"
android:background="#00000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="通訊錄"/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_setting"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_setting_img"
android:clickable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/tab_settings_normal"
android:background="#00000000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="設置"/>
</LinearLayout>
</LinearLayout>
bottom.xml
主佈局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/top"/>
<android.support.v4.view.ViewPager
android:id="@+id/id_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<include layout="@layout/bottom"/>
</LinearLayout>
activity_main.xml