标签栏主界面实现（三）

最新推荐文章于 2021-08-13 10:37:52 发布

原创最新推荐文章于 2021-08-13 10:37:52 发布 · 425 阅读

0 ·

CC 4.0 BY-SA版权

Android提高专栏收录该内容

4 篇文章

订阅专栏

本文介绍使用ViewPager和FragmentPagerAdapter实现带标签栏的主界面方案。通过四个Fragment展示不同功能模块，并利用ViewPager进行左右滑动切换。每个Fragment独立处理内部逻辑。

ViewPager + Fragment + FragmentPagerAdapter 实现标签栏主界面。

效果图：

代码：

主Activity

[java]view plaincopy 
   
 package com.example.mainframework03;  
   
 import java.util.ArrayList;  
 import java.util.List;  
   
 import android.os.Bundle;  
 import android.support.v4.app.Fragment;  
 import android.support.v4.app.FragmentActivity;  
 import android.support.v4.app.FragmentPagerAdapter;  
 import android.support.v4.view.ViewPager;  
 import android.support.v4.view.ViewPager.OnPageChangeListener;  
 import android.widget.ImageButton;  
 import android.widget.LinearLayout;  
   
 public class MainActivity extends FragmentActivity  
 {  
   
     private ViewPager mViewPager;  
     private FragmentPagerAdapter mAdapter;  
     private List<Fragment> mFragments = new ArrayList<Fragment>();  
       
       
     /** 
      * 底部四个按钮 
      */  
     private LinearLayout mTabBtnWeixin;  
     private LinearLayout mTabBtnFrd;  
     private LinearLayout mTabBtnAddress;  
     private LinearLayout mTabBtnSettings;  
   
   
     @Override  
     protected void onCreate(Bundle savedInstanceState)  
     {  
         super.onCreate(savedInstanceState);  
         setContentView(R.layout.activity_main);  
         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  
   
           
         initView();  
           
           
   
         mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())  
         {  
   
             @Override  
             public int getCount()  
             {  
                 return mFragments.size();  
             }  
   
             @Override  
             public Fragment getItem(int arg0)  
             {  
                 return mFragments.get(arg0);  
             }  
         };  
           
         mViewPager.setAdapter(mAdapter);  
           
           
         mViewPager.setOnPageChangeListener(new OnPageChangeListener()  
         {  
   
             private int currentIndex;  
   
             @Override  
             public void onPageSelected(int position)  
             {  
                 resetTabBtn();  
                 switch (position)  
                 {  
                 case 0:  
                     ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
                             .setImageResource(R.drawable.tab_weixin_pressed);  
                     break;  
                 case 1:  
                     ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
                             .setImageResource(R.drawable.tab_find_frd_pressed);  
                     break;  
                 case 2:  
                     ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
                             .setImageResource(R.drawable.tab_address_pressed);  
                     break;  
                 case 3:  
                     ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
                             .setImageResource(R.drawable.tab_settings_pressed);  
                     break;  
                 }  
   
                 currentIndex = position;  
             }  
   
             @Override  
             public void onPageScrolled(int arg0, float arg1, int arg2)  
             {  
   
             }  
   
             @Override  
             public void onPageScrollStateChanged(int arg0)  
             {  
             }  
         });  
   
     }  
       
     protected void resetTabBtn()  
     {  
         ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))  
                 .setImageResource(R.drawable.tab_weixin_normal);  
         ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))  
                 .setImageResource(R.drawable.tab_find_frd_normal);  
         ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))  
                 .setImageResource(R.drawable.tab_address_normal);  
         ((ImageButton) mTabBtnSettings.findViewById(R.id.btn_tab_bottom_setting))  
                 .setImageResource(R.drawable.tab_settings_normal);  
     }  
   
     private void initView()  
     {  
   
         mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);  
         mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);  
         mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);  
         mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);  
   
         MainTab01 tab01 = new MainTab01();  
         MainTab02 tab02 = new MainTab02();  
         MainTab03 tab03 = new MainTab03();  
         MainTab04 tab04 = new MainTab04();  
         mFragments.add(tab01);  
         mFragments.add(tab02);  
         mFragments.add(tab03);  
         mFragments.add(tab04);  
     }  
 }  

还有4个TabFragment，下面贴一个，四个基本一样

[java]view plaincopy 
   
 package com.example.mainframework03;  
   
 import android.os.Bundle;  
 import android.support.v4.app.Fragment;  
 import android.view.LayoutInflater;  
 import android.view.View;  
 import android.view.ViewGroup;  
   
 public class MainTab01 extends Fragment  
 {  
   
     @Override  
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
     {  
         return  inflater.inflate(R.layout.main_tab_01, container, false);  
       
     }  
   
 }  