使用Fragment+ViewPager实现底部导航栏

前几天准备写一个小程序,一直认为fragment实现底部导航栏,是很容易的事情,可是却遇到了前所未有的问题,先给大家贴出来我出错的界面布局代码:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@color/theme_color"
 android:clipToPadding="true"
 android:fitsSystemWindows="true" > 

 <include
  android:id="@+id/actionbar_activity_main"
  layout="@layout/actionbar" /> 

 <RelativeLayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:layout_below="@id/actionbar_activity_main"
  android:background="@color/white" > 

  <RadioGroup
   android:id="@+id/rg_menu_activity_main"
   android:layout_width="fill_parent"
   android:layout_height="55dp"
   android:layout_alignParentBottom="true"
   android:background="@color/theme_color"
   android:gravity="center"
   android:orientation="horizontal"
   android:weightSum="3" > 

   <RadioButton
    android:id="@+id/rb_main_tab_menu1"
    style="@style/rbt_bottom"
    android:checked="true"
    android:drawableTop="@drawable/radiobt_main_home"
    android:gravity="center"
    android:paddingTop="12dp"
    android:text="@string/home_text"
    android:textColor="@color/white" /> 

   <RadioButton
    android:id="@+id/rb_main_tab_menu2"
    style="@style/rbt_bottom"
    android:checked="false"
    android:drawableTop="@drawable/radiobt_main_my"
    android:gravity="center"
    android:paddingTop="12dp"
    android:text="@string/my_text"
    android:textColor="@color/white" /> 

   <RadioButton
    android:id="@+id/rb_main_tab_menu3"
    style="@style/rbt_bottom"
    android:checked="false"
    android:drawableTop="@drawable/radiobt_main_setting"
    android:gravity="center"
    android:paddingTop="12dp"
    android:text="@string/setting_text"
    android:textColor="@color/white" />
  </RadioGroup> 

  <android.support.v4.view.ViewPager
   android:id="@+id/vp_activity_main"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:layout_above="@id/rg_menu_activity_main" />
 </RelativeLayout> 

</RelativeLayout>

这个布局实现的效果如下:

只看效果,大家觉得挺好的,但是重要的问题来了。

下面的radioButton点了没反应,我检查了一下xml文件,再检查了一下java代码,没有问题啊,我开始方了,,,然后网上搜,好像没有人遇到这个问题,,检查好几遍之后,问旁边的同学,他说 既然设置了监听,但是没有反应,那肯定是有一个东西把这个事件消费掉了,我想起来了之前看的事件分发机制,,建议大家对事件分发机制不懂的小伙伴赶紧看看,面试和日常写代码都要用到,特别是面试,面试官特别喜欢问。

回归正题,大家看我的 xml文件,我把viewpager写在了Radiogroup的下面,并且,layout_height = "fill_parent"     这样我的viewpager就消费掉了我的radiobutton的点击事件,其实之后我觉得,是我的逻辑不正确,我应该顺序的写下来,而不是只实现功能,这样我看自己的代码可以看懂,可是给别人可能会造成误解。

好了,开始说一下,实现底部导航的整个流程,实现的界面还如上:(在studio中写的)

actionbar.xml  上面自定义的 actionbar  系统自带的actionbar在java代码中去掉了

代码功能:  左边返回键 中间显示的文字 右边的 更多 键   上图中没有显示出来,是因为我没有让 左右的键显示出来

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="@dimen/actionBar_height"
 android:background="@color/theme_color"
 >
 <RelativeLayout
  android:id="@+id/rl_back_actionbar"
  android:layout_width="@dimen/actionBar_back"
  android:layout_height="fill_parent"
  android:visibility="invisible">
  <ImageView
   android:layout_width="22dp"
   android:layout_height="20dp"
   android:layout_centerVertical="true"
   android:layout_marginLeft="12dp"
   android:background="@drawable/back"
   android:contentDescription="@string/app_name"/>
 </RelativeLayout>
 <TextView
  android:id="@+id/tv_title_actionbar"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerInParent="true"
  android:text="@string/TimeRobot"
  android:textColor="#ffffff"
  android:textSize="@dimen/actionBar_title_text_size"
  />
 <RelativeLayout
  android:id="@+id/rl_more_actionbar"
  android:layout_width="wrap_content"
  android:layout_height="fill_parent"
  android:layout_alignParentRight="true"
  android:visibility="invisible">
  <ImageView
   android:layout_width="25dp"
   android:layout_height="25dp"
   android:layout_centerVertical="true"
   android:layout_marginRight="12dp"
   android:background="@drawable/more"
   android:contentDescription="@string/app_name"/>
 </RelativeLayout> 

</RelativeLayout>

activity_main.xml 文件 
中间的部分color资源,是我引用的自动的,大家可以自己选择

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@color/theme_color"
 android:clipToPadding="true"
 tools:context=".MainActivity">
 <!-- 引入 actionbar-->
 <include
  android:id="@+id/actionbar_activity_main"
  layout= "@layout/actionbar"/>
 <android.support.v4.view.ViewPager
  android:id="@+id/vp_activity_main"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:layout_below="@+id/actionbar_activity_main"
  android:layout_alignParentRight="true"
  android:layout_alignParentEnd="true"
  android:background="@color/white"/> 

  <RadioGroup
   android:id="@+id/rg_main_radioGroup"
   android:layout_width="fill_parent"
   android:layout_height="58dp"
   android:layout_alignParentBottom="true"
   android:background="@color/theme_color"
   android:gravity="center"
   android:orientation="horizontal"
   android:weightSum="3">
   <RadioButton
    android:id="@+id/rb_main_tab_menu1"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:checked="true"
    android:drawableTop="@drawable/radio_bt_plan"
    android:gravity="center"
    android:button="@null"
    android:paddingTop="8dp"
    android:text="@string/home_text"
    android:textColor="@color/white"/>
   <RadioButton
    android:id="@+id/rb_main_tab_menu2"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:checked="false"
    android:drawableTop="@drawable/radio_bt_time"
    android:gravity="center"
    android:button="@null"
    android:paddingTop="8dp"
    android:text="@string/timeGroup"
    android:textColor="@color/white"/>
   <RadioButton
    android:id="@+id/rb_main_tab_menu3"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:checked="false"
    android:drawableTop="@drawable/radio_bt_my"
    android:gravity="center"
    android:button="@null"
    android:paddingTop="8dp"
    android:textColor="@color/white"
    android:text="@string/My"/>
  </RadioGroup>
</RelativeLayout>

注意一下,radiobutton中的一个属性是  drawableTop属性, 这个后面引用的drawable资源是 实现 点击改变radiobutton状态的布局文件,我给大家贴出来 radio_bt_plan.xml文件的代码,其他的只要新建,copy代码,改显示的图片即可。
还有,对于初次用studio的伙伴,这里要注意了,new的时候,drawable --->右键  ---->  new ----> new resource file (即 出来的第一个) 而不是XML

radio_bt_plan.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/planning_press"
  android:state_enabled="true"
  android:state_focused="true"
  android:state_pressed="false"/>
 <item android:drawable="@drawable/planning_press"
  android:state_enabled="true"
  android:state_pressed="true"
  />
 <item android:drawable="@drawable/planning_press"
  android:state_checked="true"
  android:state_enabled="true"
  />
 <item android:drawable="@drawable/planning"/> 

</selector>

接下来就是  MainActivity.java文件了

public class MainActivity extends FragmentActivity {
 private TextView title_text;
 private ViewPager vp_main_tab;
 private List<Fragment> fragmentList = null;
 private FragmentPagerAdapter mAdapter = null; 

 private MyFragment myFragment;
 private TimeGroupFragment timeGroupFragment;
 private PlanningFragment planningFragment; 

 private RadioButton rb_main_tab_menu1;
 private RadioButton rb_main_tab_menu2;
 private RadioButton rb_main_tab_menu3;
 private RadioGroup rg_main_group; 

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  requestWindowFeature(Window.FEATURE_NO_TITLE);
  setContentView(R.layout.activity_main);
  init();
  rg_main_group.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { 

   @Override
   public void onCheckedChanged(RadioGroup group, int checkedId) {
    switch (checkedId) {
     case R.id.rb_main_tab_menu1:
      vp_main_tab.setCurrentItem(0);
      initActionbar(0);
      break;
     case R.id.rb_main_tab_menu2:
      vp_main_tab.setCurrentItem(1);
      initActionbar(1);
      break;
     case R.id.rb_main_tab_menu3:
      vp_main_tab.setCurrentItem(2);
      initActionbar(2);
      break;
     default:
      break;
    } 

   }
  });
  initViewPage();
 }
 private void initActionbar(int currentPage) {
  switch (currentPage) {
   case 0:
    title_text.setText(getResources().getString(R.string.TimeRobot));
    break;
   case 1:
    title_text.setText(getResources().getString(R.string.timeGroup));
    break;
   case 2:
    title_text.setText(getResources().getString(R.string.My));
    break;
   default:
    break;
  }
 }
 private void init() {
  title_text = (TextView) findViewById(R.id.tv_title_actionbar);
  vp_main_tab = (ViewPager) findViewById(R.id.vp_activity_main);
  fragmentList = new ArrayList<Fragment>();
  rg_main_group = (RadioGroup) findViewById(R.id.rg_main_radioGroup);
  rb_main_tab_menu1 = (RadioButton) findViewById(R.id.rb_main_tab_menu1);
  rb_main_tab_menu2 = (RadioButton) findViewById(R.id.rb_main_tab_menu2);
  rb_main_tab_menu3 = (RadioButton) findViewById(R.id.rb_main_tab_menu3); 

  myFragment = new MyFragment();
  timeGroupFragment = new TimeGroupFragment();
  planningFragment = new PlanningFragment(); 

  fragmentList.add(myFragment);
  fragmentList.add(timeGroupFragment);
  fragmentList.add(planningFragment); 

 } 

 private void initViewPage() {
  android.support.v4.app.FragmentManager fm = getSupportFragmentManager();
  mAdapter = new FragmentPagerAdapter(fm) { 

   @Override
   public int getCount() {
    return fragmentList == null ? 0 : fragmentList.size();
   } 

   @Override
   public android.support.v4.app.Fragment getItem(int position) {
    return fragmentList.get(position);
   }
  };
  vp_main_tab.setAdapter(mAdapter);
  vp_main_tab.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 

   @Override
   public void onPageSelected(int position) {
    initActionbar(position);
    switch (position) {
     case 0:
      rb_main_tab_menu1.setChecked(true);
      break;
     case 1:
      rb_main_tab_menu2.setChecked(true);
      break;
     case 2:
      rb_main_tab_menu3.setChecked(true);
      break;
     default:
      break;
    }
   } 

   @Override
   public void onPageScrolled(int arg0, float arg1, int arg2) {
   } 

   @Override
   public void onPageScrollStateChanged(int state) {
   }
  });
 }
}

这就是整个是实现经过,如有什么不足的地方,还请多多指教;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android程序开发之Fragment实现底部导航栏实例代码

    流行的应用的导航一般分为两种,一种是底部导航,一种是侧边栏. 说明 IDE:AS,Android studio; 模拟器:genymotion; 实现的效果,见下图. 具体实现 为了讲明白这个实现过程,我们贴出来的代码多一写,这样更方便理解 [最后还会放出完整的代码实现] .看上图的界面做的比较粗糙,但实现过程的骨架都具有了,想要更完美的设计,之后自行完善吧 ^0^. 布局 通过观察上述效果图,发现任意一个选项页面都有三部分组成: 顶部去除ActionBar后的标题栏: 中间一个Fragment

  • ViewPager顶部导航栏联动效果(标题栏条目多)

    如果标题栏过多,超过屏幕的宽度,该怎么弄,下面我们就来解决一下,效果如下: 其实和之前写的也差不多,我就是在哪个demo里面添加和修改了一下,就加了几个title标题,加了几个图片,最重要的是给TableLayout添加了一个属性: app:tabMode="scrollable" 这个属性就是设置设置TableLayout可以滚动,看我滚动上面的标题栏: 这里我还给标题栏设置了几个附加的属性,让它显得更好看: <span style="white-space:pre&

  • Android中TabLayout+ViewPager 简单实现app底部Tab导航栏

    前言 在谷歌发布Android Design Support Library之前,app底部tab布局的实现方法就有很多种,其中有RadioGroup+FrameLayout.TabHost+Fragment.FragmentPagerAdapter+ViewPager等方法,虽然这些方法虽然能达到同样的效果,但我个人总觉得有些繁琐.然而,Google在2015的IO大会上,给开发者们带来了全新的Android Design Support Library,里面包含了许多新控件,这些新控件有许多

  • Android实现底部导航栏功能(选项卡)

    现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其中各个类的作用以及资源文件就不详细解释了,还有资源图片(在该Demo中借用了其它应用程序的资源图片)也不提供了,大家可以自行更换自己需要的资源图片.直接上各个布局文件或各个类的代码: 1. res/layout目录下的 maintabs.xml 源码: <?xml version="1.0&q

  • Android实现底部导航栏功能

    本文实例为大家分享了Android实现底部导航栏功能的具体代码,供大家参考,具体内容如下 实验效果: (1)在drawable文件夹下新建tab_menu_bg.xml文件,具体代码如下: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item

  • Android自定义ViewPagerIndicator实现炫酷导航栏指示器(ViewPager+Fragment)

    ViewPagerIndicator导航栏指示器运行效果: 实现这个效果,我是看了很多大神写的博客和视频后自己敲的,欢迎指正 github地址:https://github.com/dl10210950/TabViewPagerIndicator 自定义一个ViewPagerIndicator 自定义一个Indicator继承LinearLayout,在构造方法里面设置画笔的一些属性 public ViewPagerIndicator(Context context, AttributeSet

  • Android实现沉浸式通知栏通知栏背景颜色跟随app导航栏背景颜色而改变

    最近好多app都已经满足了沉浸式通知栏, 所谓沉浸式通知栏:就是把用来导航的各种界面操作空间隐藏在以程序内容为主的情景中,通过相对"隐形"的界面来达到把用户可视范围最大化地用到内容本身上. 而最新安卓4.4系统的通知栏沉浸模式就是在软件打开的时候通知栏和软件顶部颜色融为一体,这样不仅可以使软件和系统本身更加融为一体. 就是手机的通知栏的颜色不再是白色.黑色简单的两种了,本人用的小米4手机,米4手机中的自带软件都支持沉浸式通知栏, 举个例子:大家可以看一下自己的qq,它的标题的背景颜色是

  • Android 利用ViewPager+GridView实现首页导航栏布局分页效果

    最近我尝试使用ViewPager+GridView实现的,看起来一切正常,废话不多说,具体代码如下: 如图是效果图 首先分析下思路 1.首先是怎么布局:整体是一个ViewPager将GridView作为一个View添加到ViewPager的adapter中,下方是圆点 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.a

  • Android仿网易客户端顶部导航栏效果

    最近刚写了一个网易客户端首页导航条的动画效果,现在分享出来给大家学习学习.我说一下这个效果的核心原理.下面是效果图: 首先是布局,这个布局是我从网易客户端反编译后弄来的.大家看后应该明白,布局文件如下: <FrameLayout android:id="@id/column_navi" android:layout_width="fill_parent" android:layout_height="wrap_content" androi

  • android实现底部导航栏

    底部导航栏我选择用FragmentTabHost+Fragment来实现,这个方法比较好用,代码量也不多 首先是开始的activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_

随机推荐