备案控制台
探索云世界
开发者社区 云原生 文章 正文

TextView+Fragment实现底部导航栏

2016-04-29 4110
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以后参考.也可以给没有做过的朋友进行参考.以后大家有类似的功能就可以在我的demo上就行修改.


一.先上效果图:   本来是打算用FragmentTabHost实现的,但是中间那个按钮有点麻烦,想到我们项目好几个产品经理,并且经常改需求,于是最后决定  用 TextView+Fragment去实现.                     



二.查看代码实现.代码是我们最好的老师.

主界面布局文件  activity_main.xml   外层一个FrameLayout+ImageView+LinearLayout     TextView选中跟未选中时 图片和颜色 切换都用布局去实现.

1).FrameLayout  用于显示fragment

2).ImageView  显示底部最中间那个图标

3).LinearLayout  显示底部四个图标   我这里用weight分成了5份,第三个控件啥都没有就用View控件占了一个位置

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.   
  6.     <FrameLayout  
  7.         android:id="@+id/main_container"  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent"  
  10.         android:layout_above="@+id/view_line"/>  
  11.   
  12.     <View  
  13.         android:id="@+id/view_line"  
  14.         android:layout_height="1dp"  
  15.         android:layout_width="match_parent"  
  16.         android:background="#DCDBDB"  
  17.         android:layout_above="@+id/rl_bottom"/>  
  18.       
  19.     <LinearLayout  
  20.         android:id="@+id/rl_bottom"  
  21.         android:layout_width="match_parent"  
  22.         android:layout_height="wrap_content"  
  23.         android:layout_alignParentBottom="true"  
  24.         android:paddingTop="5dp"  
  25.         android:paddingBottom="5dp"  
  26.         android:background="#F2F2F2"  
  27.         android:orientation="horizontal" >  
  28.   
  29.         <TextView  
  30.             android:id="@+id/tv_main"  
  31.             android:layout_width="0dp"  
  32.             android:layout_height="wrap_content"  
  33.             android:layout_gravity="center"  
  34.             android:layout_weight="1"  
  35.             android:drawableTop="@drawable/tab_item_main_img_selector"  
  36.             android:drawablePadding="@dimen/main_tab_item_image_and_text"  
  37.             android:focusable="true"  
  38.             android:gravity="center"  
  39.             android:text="@string/main"  
  40.             android:textColor="@drawable/tabitem_txt_sel" />  
  41.   
  42.         <TextView  
  43.             android:id="@+id/tv_dynamic"  
  44.             android:layout_width="0dp"  
  45.             android:layout_height="wrap_content"  
  46.             android:layout_gravity="center"  
  47.             android:layout_weight="1"  
  48.             android:drawableTop="@drawable/tab_item_dynamic_img_selector"  
  49.             android:drawablePadding="@dimen/main_tab_item_image_and_text"  
  50.             android:focusable="true"  
  51.             android:gravity="center"  
  52.             android:text="@string/dynamic"  
  53.             android:textColor="@drawable/tabitem_txt_sel" />  
  54.   
  55.         <View  
  56.             android:layout_width="0dp"  
  57.             android:layout_height="match_parent"  
  58.             android:layout_weight="1" />  
  59.   
  60.         <TextView  
  61.             android:id="@+id/tv_message"  
  62.             android:layout_width="0dp"  
  63.             android:layout_height="wrap_content"  
  64.             android:layout_gravity="center"  
  65.             android:layout_weight="1"  
  66.             android:drawableTop="@drawable/tab_item_message_img_selector"  
  67.             android:drawablePadding="@dimen/main_tab_item_image_and_text"  
  68.             android:focusable="true"  
  69.             android:gravity="center"  
  70.             android:text="@string/message"  
  71.             android:textColor="@drawable/tabitem_txt_sel" />  
  72.   
  73.         <TextView  
  74.             android:id="@+id/tv_person"  
  75.             android:layout_width="0dp"  
  76.             android:layout_height="wrap_content"  
  77.             android:layout_gravity="center"  
  78.             android:layout_weight="1"  
  79.             android:drawableTop="@drawable/tab_item_person_img_selector"  
  80.             android:drawablePadding="@dimen/main_tab_item_image_and_text"  
  81.             android:focusable="true"  
  82.             android:gravity="center"  
  83.             android:text="@string/person"  
  84.             android:textColor="@drawable/tabitem_txt_sel"/>  
  85.     </LinearLayout>  
  86.   
  87.     <ImageView  
  88.         android:id="@+id/iv_make"  
  89.         android:layout_width="wrap_content"  
  90.         android:layout_height="wrap_content"  
  91.         android:layout_alignParentBottom="true"  
  92.         android:layout_centerHorizontal="true"  
  93.         android:paddingBottom="10dp"  
  94.         android:src="@drawable/icon_tab_make_select"/>  
  95.   
  96. </RelativeLayout>  


图片选择器   tab_item_main_img_selector.xml

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <!-- Non focused states -->  
  4.     <item android:drawable="@drawable/icon_tab_main_normal" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>  
  5.     <item android:drawable="@drawable/icon_tab_main_select" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>  
  6.     <!-- Focused states -->  
  7.     <item android:drawable="@drawable/icon_tab_main_select" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>  
  8.     <item android:drawable="@drawable/icon_tab_main_select" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>  
  9.     <!-- Pressed -->  
  10.     <item android:drawable="@drawable/icon_tab_main_select" android:state_pressed="true" android:state_selected="true"/>  
  11.     <item android:drawable="@drawable/icon_tab_main_select" android:state_pressed="true"/>  
  12. </selector>  


文字颜色选择器   tabitem_txt_sel.xml

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.   
  4.     <!-- Non focused states -->  
  5.     <item android:state_focused="false" android:state_pressed="false" android:state_selected="false" android:color="@color/main_tab_item_text_normal"/>  
  6.     <item android:state_focused="false" android:state_pressed="false" android:state_selected="true" android:color="@color/main_tab_item_text_select"/>  
  7.       
  8.     <!-- Focused states -->  
  9.     <item android:state_focused="true" android:state_pressed="false" android:state_selected="false" android:color="@color/main_tab_item_text_select"/>  
  10.     <item android:state_focused="true" android:state_pressed="false" android:state_selected="true" android:color="@color/main_tab_item_text_select"/>  
  11.       
  12.     <!-- Pressed -->  
  13.     <item android:state_pressed="true" android:state_selected="true" android:color="@color/main_tab_item_text_select"/>  
  14.     <item android:state_pressed="true" android:color="@color/main_tab_item_text_select"/>  
  15.   
  16. </selector>  


MainActivity.java   对fragment的切换,底部图标颜色的切换.我也不详细介绍了.代码里面我都有写注释.

  1. /** 
  2.  * 对fragment的切换,底部图标颜色的切换 
  3.  * @author ansen 
  4.  * @create time 2015-09-08 
  5.  */  
  6. public class MainActivity extends FragmentActivity {  
  7.     //要切换显示的四个Fragment  
  8.     private MainFragment mainFragment;  
  9.     private DynamicFragment dynamicFragment;  
  10.     private MessageFragment messageFragment;  
  11.     private PersonFragment personFragment;  
  12.   
  13.     private int currentId = R.id.tv_main;// 当前选中id,默认是主页  
  14.   
  15.     private TextView tvMain, tvDynamic, tvMessage, tvPerson;//底部四个TextView  
  16.   
  17.     @Override  
  18.     protected void onCreate(Bundle savedInstanceState) {  
  19.         super.onCreate(savedInstanceState);  
  20.         setContentView(R.layout.activity_main);  
  21.   
  22.         tvMain = (TextView) findViewById(R.id.tv_main);  
  23.         tvMain.setSelected(true);//首页默认选中  
  24.         tvDynamic = (TextView) findViewById(R.id.tv_dynamic);  
  25.         tvMessage = (TextView) findViewById(R.id.tv_message);  
  26.         tvPerson = (TextView) findViewById(R.id.tv_person);  
  27.   
  28.         /** 
  29.          * 默认加载首页 
  30.          */  
  31.         mainFragment = new MainFragment();  
  32.         getSupportFragmentManager().beginTransaction().add(R.id.main_container, mainFragment).commit();  
  33.   
  34.         tvMain.setOnClickListener(tabClickListener);  
  35.         tvDynamic.setOnClickListener(tabClickListener);  
  36.         tvMessage.setOnClickListener(tabClickListener);  
  37.         tvPerson.setOnClickListener(tabClickListener);  
  38.         findViewById(R.id.iv_make).setOnClickListener(onClickListener);  
  39.     }  
  40.       
  41.     private OnClickListener onClickListener=new OnClickListener() {  
  42.         @Override  
  43.         public void onClick(View v) {  
  44.             switch (v.getId()) {  
  45.             case R.id.iv_make:  
  46.                 Intent intent=new Intent(MainActivity.this, MakeActivity.class);  
  47.                 startActivity(intent);  
  48.                 break;  
  49.             }  
  50.         }  
  51.     };  
  52.   
  53.     private OnClickListener tabClickListener = new OnClickListener() {  
  54.         @Override  
  55.         public void onClick(View v) {  
  56.             if (v.getId() != currentId) {//如果当前选中跟上次选中的一样,不需要处理  
  57.                 changeSelect(v.getId());//改变图标跟文字颜色的选中   
  58.                 changeFragment(v.getId());//fragment的切换  
  59.                 currentId = v.getId();//设置选中id  
  60.             }  
  61.         }  
  62.     };  
  63.   
  64.     /** 
  65.      * 改变fragment的显示 
  66.      *  
  67.      * @param resId 
  68.      */  
  69.     private void changeFragment(int resId) {  
  70.         FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();//开启一个Fragment事务  
  71.           
  72.         hideFragments(transaction);//隐藏所有fragment  
  73.         if(resId==R.id.tv_main){//主页  
  74.             if(mainFragment==null){//如果为空先添加进来.不为空直接显示  
  75.                 mainFragment = new MainFragment();  
  76.                 transaction.add(R.id.main_container,mainFragment);  
  77.             }else {  
  78.                 transaction.show(mainFragment);  
  79.             }  
  80.         }else if(resId==R.id.tv_dynamic){//动态  
  81.             if(dynamicFragment==null){  
  82.                 dynamicFragment = new DynamicFragment();  
  83.                 transaction.add(R.id.main_container,dynamicFragment);  
  84.             }else {  
  85.                 transaction.show(dynamicFragment);  
  86.             }  
  87.         }else if(resId==R.id.tv_message){//消息中心  
  88.             if(messageFragment==null){  
  89.                 messageFragment = new MessageFragment();  
  90.                 transaction.add(R.id.main_container,messageFragment);  
  91.             }else {  
  92.                 transaction.show(messageFragment);  
  93.             }  
  94.         }else if(resId==R.id.tv_person){//我  
  95.             if(personFragment==null){  
  96.                 personFragment = new PersonFragment();  
  97.                 transaction.add(R.id.main_container,personFragment);  
  98.             }else {  
  99.                 transaction.show(personFragment);  
  100.             }  
  101.         }  
  102.         transaction.commit();//一定要记得提交事务  
  103.     }  
  104.       
  105.     /** 
  106.      * 显示之前隐藏所有fragment 
  107.      * @param transaction 
  108.      */  
  109.     private void hideFragments(FragmentTransaction transaction){  
  110.         if (mainFragment != null)//不为空才隐藏,如果不判断第一次会有空指针异常  
  111.             transaction.hide(mainFragment);  
  112.         if (dynamicFragment != null)  
  113.             transaction.hide(dynamicFragment);  
  114.         if (messageFragment != null)  
  115.             transaction.hide(messageFragment);  
  116.         if (personFragment != null)  
  117.             transaction.hide(personFragment);  
  118.     }  
  119.   
  120.     /** 
  121.      * 改变TextView选中颜色 
  122.      * @param resId 
  123.      */  
  124.     private void changeSelect(int resId) {  
  125.         tvMain.setSelected(false);  
  126.         tvDynamic.setSelected(false);  
  127.         tvMessage.setSelected(false);  
  128.         tvPerson.setSelected(false);  
  129.   
  130.         switch (resId) {  
  131.         case R.id.tv_main:  
  132.             tvMain.setSelected(true);  
  133.             break;  
  134.         case R.id.tv_dynamic:  
  135.             tvDynamic.setSelected(true);  
  136.             break;  
  137.         case R.id.tv_message:  
  138.             tvMessage.setSelected(true);  
  139.             break;  
  140.         case R.id.tv_person:  
  141.             tvPerson.setSelected(true);  
  142.             break;  
  143.         }  
  144.     }  
  145. }  


MainFragment.java  首页有三个页面(关注,推荐,动态),我用到了ViewPager滑动,增加了滑动指示状态.并且给标题栏的三个TextView设置了点击效果.

  1. /** 
  2.  * 首页 
  3.  * @author Ansen 
  4.  * @create time 2015-09-08 
  5.  */  
  6. public class MainFragment extends Fragment {  
  7.     private ViewPager vPager;  
  8.     private List<Fragment> list = new ArrayList<Fragment>();  
  9.     private MessageGroupFragmentAdapter adapter;  
  10.   
  11.     private ImageView ivShapeCircle;  
  12.     private TextView tvFollow,tvRecommend,tvLocation;  
  13.       
  14.     private int offset=0;//偏移量216  我这边只是举例说明,不同手机值不一样  
  15.     private int currentIndex=1;  
  16.   
  17.     @Override  
  18.     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {  
  19.         View rootView = inflater.inflate(R.layout.fragment_main, null);  
  20.           
  21.   
  22.         /** 
  23.          * 初始化三个Fragment  并且填充到ViewPager 
  24.          */  
  25.         vPager = (ViewPager) rootView.findViewById(R.id.viewpager_home);  
  26.         DynamicFragment dynamicFragment = new DynamicFragment();  
  27.         MessageFragment messageFragment = new MessageFragment();  
  28.         PersonFragment personFragment = new PersonFragment();  
  29.         list.add(dynamicFragment);  
  30.         list.add(messageFragment);  
  31.         list.add(personFragment);  
  32.         adapter = new MessageGroupFragmentAdapter(getActivity().getSupportFragmentManager(), list);  
  33.         vPager.setAdapter(adapter);  
  34.         vPager.setOffscreenPageLimit(2);  
  35.         vPager.setCurrentItem(1);  
  36.         vPager.setOnPageChangeListener(pageChangeListener);  
  37.   
  38.           
  39.         ivShapeCircle = (ImageView) rootView.findViewById(R.id.iv_shape_circle);  
  40.           
  41.         tvFollow=(TextView) rootView.findViewById(R.id.tv_follow);  
  42.         tvRecommend=(TextView) rootView.findViewById(R.id.tv_recommend);  
  43.         tvRecommend.setSelected(true);//推荐默认选中  
  44.         tvLocation=(TextView) rootView.findViewById(R.id.tv_location);  
  45.           
  46.         /** 
  47.          * 标题栏三个按钮设置点击效果 
  48.          */  
  49.         tvFollow.setOnClickListener(clickListener);  
  50.         tvRecommend.setOnClickListener(clickListener);  
  51.         tvLocation.setOnClickListener(clickListener);  
  52.   
  53.         initCursorPosition();  
  54.         return rootView;  
  55.     }  
  56.       
  57.     private OnClickListener clickListener=new OnClickListener() {  
  58.         @Override  
  59.         public void onClick(View v) {  
  60.             switch (v.getId()) {  
  61.             case R.id.tv_follow:  
  62.                 //当我们设置setCurrentItem的时候就会触发viewpager的OnPageChangeListener借口,  
  63.                 //所以我们不需要去改变标题栏字体啥的  
  64.                 vPager.setCurrentItem(0);  
  65.                 break;  
  66.             case R.id.tv_recommend:  
  67.                 vPager.setCurrentItem(1);  
  68.                 break;  
  69.             case R.id.tv_location:  
  70.                 vPager.setCurrentItem(2);  
  71.                 break;  
  72.             }  
  73.         }  
  74.     };  
  75.   
  76.     private void initCursorPosition() {  
  77.         DisplayMetrics metric = new DisplayMetrics();  
  78.         getActivity().getWindowManager().getDefaultDisplay().getMetrics(metric);  
  79.         int width = metric.widthPixels;  
  80.         Matrix matrix = new Matrix();  
  81.           
  82.         //标题栏我用weight设置权重  分成5份  
  83.         //(width / 5) * 2  这里表示标题栏两个控件的宽度  
  84.         //(width / 10)  标题栏一个控件的2分之一  
  85.         //7  约等于原点宽度的一半  
  86.         matrix.postTranslate((width / 5) * 2 + (width / 10)-7,0);//图片平移  
  87.         ivShapeCircle.setImageMatrix(matrix);  
  88.           
  89.         //一个控件的宽度  我的手机宽度是1080/5=216 不同的手机宽度会不一样哦  
  90.         offset=(width / 5);  
  91.     }  
  92.   
  93.     /** 
  94.      * ViewPager滑动监听,用位移动画实现指示器效果 
  95.      *  
  96.      * TranslateAnimation 强调一个地方,无论你移动了多少次,现在停留在哪里,你的起始位置从未变化过. 
  97.      * 例如:我这个demo里面  推荐移动到了同城,指示器也停留到了同城下面,但是指示器在屏幕上的位置还是推荐下面. 
  98.      */  
  99.     private OnPageChangeListener pageChangeListener = new OnPageChangeListener() {  
  100.         @Override  
  101.         public void onPageSelected(int index) {  
  102.             changeTextColor(index);  
  103.             translateAnimation(index);  
  104.         }  
  105.   
  106.         @Override  
  107.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
  108.         }  
  109.   
  110.         @Override  
  111.         public void onPageScrollStateChanged(int arg0) {  
  112.         }  
  113.     };  
  114.       
  115.     /** 
  116.      * 改变标题栏字体颜色 
  117.      * @param index 
  118.      */  
  119.     private void changeTextColor(int index){  
  120.         tvFollow.setSelected(false);  
  121.         tvRecommend.setSelected(false);  
  122.         tvLocation.setSelected(false);  
  123.           
  124.         switch (index) {  
  125.         case 0:  
  126.             tvFollow.setSelected(true);  
  127.             break;  
  128.         case 1:  
  129.             tvRecommend.setSelected(true);  
  130.             break;  
  131.         case 2:  
  132.             tvLocation.setSelected(true);  
  133.             break;  
  134.         }  
  135.     }  
  136.       
  137.     /** 
  138.      * 移动标题栏点点点... 
  139.      * @param index 
  140.      */  
  141.     private void translateAnimation(int index){  
  142.         TranslateAnimation animation = null;  
  143.         switch(index){  
  144.         case 0:  
  145.             if(currentIndex==1){//从推荐移动到关注   X坐标向左移动216  
  146.                 animation=new TranslateAnimation(0,-offset,0,0);  
  147.             }else if (currentIndex == 2) {//从同城移动到关注   X坐标向左移动216*2  记住起始x坐标是同城那里  
  148.                 animation = new TranslateAnimation(offset, -offset, 0, 0);    
  149.             }  
  150.             break;  
  151.         case 1:  
  152.             if(currentIndex==0){//从关注移动到推荐   X坐标向右移动216  
  153.                     animation=new TranslateAnimation(-offset,0,0,0);  
  154.             }else if(currentIndex==2){//从同城移动到推荐   X坐标向左移动216  
  155.                 animation=new TranslateAnimation(offset, 0,0,0);  
  156.             }  
  157.             break;  
  158.         case 2:  
  159.             if (currentIndex == 0) {//从关注移动到同城   X坐标向右移动216*2  记住起始x坐标是关注那里  
  160.                 animation = new TranslateAnimation(-offset, offset, 0, 0);  
  161.             } else if(currentIndex==1){//从推荐移动到同城   X坐标向右移动216  
  162.                 animation=new TranslateAnimation(0,offset,0,0);  
  163.             }  
  164.             break;  
  165.         }  
  166.         animation.setFillAfter(true);  
  167.         animation.setDuration(300);  
  168.         ivShapeCircle.startAnimation(animation);  
  169.           
  170.         currentIndex=index;  
  171.     }  
  172. }  

首页显示的MainFragment.java的布局文件  fragment_main.xml 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.   
  6.     <LinearLayout  
  7.         android:id="@+id/ll_title"  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="44dp"  
  10.         android:background="#00ceaa"  
  11.         android:orientation="vertical" >  
  12.   
  13.         <LinearLayout  
  14.             android:layout_width="match_parent"  
  15.             android:layout_height="30dp"  
  16.             android:orientation="horizontal" >  
  17.   
  18.             <View  
  19.                 android:id="@+id/view_empty"  
  20.                 android:layout_width="0dp"  
  21.                 android:layout_height="wrap_content"  
  22.                 android:layout_weight="1" />  
  23.   
  24.             <TextView  
  25.                 android:id="@+id/tv_follow"  
  26.                 android:layout_width="0dp"  
  27.                 android:layout_height="wrap_content"  
  28.                 android:layout_weight="1"  
  29.                 android:paddingTop="5dp"  
  30.                 android:text="关注"  
  31.                 android:gravity="center_horizontal"  
  32.                 android:textColor="@drawable/main_title_txt_sel"  
  33.                 android:textSize="20sp" />  
  34.   
  35.             <TextView  
  36.                 android:id="@+id/tv_recommend"  
  37.                 android:layout_width="0dp"  
  38.                 android:layout_height="wrap_content"  
  39.                 android:layout_weight="1"  
  40.                 android:paddingTop="5dp"  
  41.                 android:text="推荐"  
  42.                 android:gravity="center_horizontal"  
  43.                 android:textColor="@drawable/main_title_txt_sel"  
  44.                 android:textSize="20sp" />  
  45.   
  46.             <TextView  
  47.                 android:id="@+id/tv_location"  
  48.                 android:layout_width="0dp"  
  49.                 android:layout_height="wrap_content"  
  50.                 android:layout_weight="1"  
  51.                 android:paddingTop="5dp"  
  52.                 android:text="同城"  
  53.                 android:gravity="center_horizontal"  
  54.                 android:textColor="@drawable/main_title_txt_sel"  
  55.                 android:textSize="20sp" />  
  56.   
  57.             <View  
  58.                 android:layout_width="0dp"  
  59.                 android:layout_height="wrap_content"  
  60.                 android:layout_weight="1" />  
  61.         </LinearLayout>  
  62.   
  63.         <ImageView  
  64.             android:id="@+id/iv_shape_circle"  
  65.             android:layout_width="fill_parent"  
  66.             android:layout_height="wrap_content"  
  67.             android:layout_marginTop="2dp"  
  68.             android:scaleType="matrix"  
  69.             android:src="@drawable/shape_circle" />  
  70.     </LinearLayout>  
  71.   
  72.     <android.support.v4.view.ViewPager  
  73.         android:id="@+id/viewpager_home"  
  74.         android:layout_width="match_parent"  
  75.         android:layout_height="match_parent"  
  76.         android:layout_below="@+id/ll_title" />  
  77.   
  78. </RelativeLayout>  

MessageGroupFragmentAdapter.java    ViewPager的适配器.

  1. public class MessageGroupFragmentAdapter extends FragmentStatePagerAdapter {  
  2.     private List<Fragment>list;  
  3.     public MessageGroupFragmentAdapter(FragmentManager fm, List<Fragment> list) {  
  4.         super(fm);  
  5.         this.list = list;  
  6.     }  
  7.   
  8.     public MessageGroupFragmentAdapter(FragmentManager fm) {  
  9.         super(fm);  
  10.     }  
  11.   
  12.     @Override  
  13.     public Fragment getItem(int arg0) {  
  14.         return list.get(arg0);  
  15.     }  
  16.   
  17.     @Override  
  18.     public int getCount() {  
  19.         return list.size();  
  20.     }  
  21. }  

这个demo的核心代码就在这里了,其他几个Fragment的代码跟布局文件我就不贴出来了....有需要的可以去下载我的源码.....又到了10点半了....回家.....


点击下载源码


相关文章:EventBus实现activity跟fragment交互数据


后记:如果你运行之后首页会出现空白的情况,viewpager滑动也会出现问题了,那是MainFragment类初始化viewpager的adpater有问题.

修改后代码如下,大概在MainFragment中125行:

adapter = new MessageGroupFragmentAdapter(getChildFragmentManager(), list);
文章标签：
Android开发
容器
ansen_666
目录
相关文章
路宇
|
8月前
|
Android开发
Android 中使用RadioGroup+Fragment实现底部导航栏的功能
Android 中使用RadioGroup+Fragment实现底部导航栏的功能
路宇
75 0
格蕾修
|
11月前
|
XML Java 数据格式
Fragment底部导航栏
一个页面以微信为例，从上到下依次是状态栏，Activity顶部导航栏，Fragment，Activity底部导航栏。 每点击一个底部导航栏都会replace另一个Fragment。
格蕾修
41 0
岁月不待人-祥
|
11月前
|
XML Android开发 数据格式
Android 底部导航栏（一、BottomNavigationView+Menu+Fragment）
现在常用的App主页都会有一个底部导航栏，根据需求也使用过好几种方法进行实现，于是想着还是总结一下，今天还写一个简单的BottomNavigationView方法来实现这个功能
岁月不待人-祥
288 0
岁月不待人-祥
|
11月前
|
XML Android开发 数据格式
Android 底部导航栏（二、自定义View+Fragment）
上一片文章用的是BottomNavigationView+Menu+Fragment，但是可能有时候需求不一样，menu的样式不太够，所以需要自定义View来实现。
岁月不待人-祥
132 0
岁月不待人-祥
|
11月前
|
XML Android开发 数据格式
Android 底部导航栏（三、ViewPager+TabLayout+Fragment）简单易懂
底部导航栏在Android应用中随处可见，今天使用ViewPager+TabLayout+Fragment这三个控件来实现此功能。 前面使用了另外两个方法来实现导航栏，不过我还是更喜欢Viewpager，代码也少，毕竟前两个不能左右滑动。
岁月不待人-祥
573 0
岁月不待人-祥
|
11月前
|
XML Android开发 数据格式
Android 底部导航栏（四、ViewPager+RadioGroup+Fragment）简单易懂
底部导航栏在Android应用中随处可见，今天使用ViewPager+RadioGroup+Fragment这三个控件来实现此功能。前面写了有三种实现方式，有兴趣可以去看看
岁月不待人-祥
172 0
二哈侠
|
容器
Fragment——底部导航栏的实现
本节开始我们会讲解一些Fragment在实际开发中的一些实例！而本节给大家讲解的是底部导航栏的实现！而基本的底部导航栏方法有很多种，比如全用TextView做，或者用RadioButton，又或者使用TabLayout + RadioButton，当然复杂的情况还是得走外层套布局的方法！本节我们用TextView来做一个底部导航栏的效果，也熟悉下Fragment的使用！
二哈侠
72 0
爱躺平的威威
|
存储 Android开发
android ViewPager + Fragment + Tablayout 实现嵌套页面导航（二）
android ViewPager + Fragment + Tablayout 实现嵌套页面导航
爱躺平的威威
360 0
android ViewPager + Fragment + Tablayout 实现嵌套页面导航（二）
爱躺平的威威
|
编译器 Android开发 容器
android ViewPager + Fragment + Tablayout 实现嵌套页面导航（一）
android ViewPager + Fragment + Tablayout 实现嵌套页面导航
爱躺平的威威
165 0
android ViewPager + Fragment + Tablayout 实现嵌套页面导航（一）
sakura_echo
|
XML Java Android开发
一句话搞定Android底部导航栏，一键绑定Fragment、ViewPager
sakura_echo
1912 0