Android底部菜单栏(RadioGroup+Fragment)美化

众所周知,android的底部菜单栏太重要,平时项目一般都是需要用到的,但是网上关于这方面的demo做得太丑了,实在惨不忍睹,所以这里便用RadioGroup+Fragment的方式写了一个,顺便美化了一下,需要的可以看下。

效果图:

项目结构

MainActivity.java

public class MainActivity extends AppCompatActivity {

  private FrameLayout frameLayout;
  private RadioGroup radioGroup;
  private Fragment[] mFragments;
  private int mIndex;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initFragment();
    setRadioGroupListener();

  }

  private void initFragment() {
    radioGroup = (RadioGroup) findViewById(R.id.radioGroup);
    frameLayout = (FrameLayout) findViewById(R.id.fl_content);
    HomeFragment homeFragment = new HomeFragment();
    ShopFragment shopFragment = new ShopFragment();
    LiveFragment liveFragment = new LiveFragment();
    ShoppingCarFragment shoppingCarFragment = new ShoppingCarFragment();
    MineFragment mineFragment = new MineFragment();
    //添加到数组
    mFragments = new Fragment[]{homeFragment, shopFragment, liveFragment, shoppingCarFragment, mineFragment};
    //开启事务
    FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
    //添加首页
    ft.add(R.id.fl_content, homeFragment).commit();
    //默认设置为第0个
    setIndexSelected(0);
  }

  private void setIndexSelected(int index) {
    if (mIndex == index) {
      return;
    }
    FragmentManager fragmentManager = getSupportFragmentManager();
    FragmentTransaction ft = fragmentManager.beginTransaction();
    //隐藏
    ft.hide(mFragments[mIndex]);
    //判断是否添加
    if (!mFragments[index].isAdded()) {
      ft.add(R.id.fl_content, mFragments[index]).show(mFragments[index]);
    } else {
      ft.show(mFragments[index]);
    }
    ft.commit();
    //再次赋值
    mIndex = index;

  }

  private void setRadioGroupListener() {
    radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
      @Override
      public void onCheckedChanged(RadioGroup radioGroup, int i) {
        switch (i) {
          case R.id.rb_home:
            setIndexSelected(0);
            break;
          case R.id.rb_shop:
            setIndexSelected(1);
            break;
          case R.id.rb_live:
            setIndexSelected(2);
            break;
          case R.id.rb_shopping_car:
            setIndexSelected(3);
            break;
          case R.id.rb_mine:
            setIndexSelected(4);
            break;
          default:
            setIndexSelected(0);
            break;
        }
      }
    });
  }

  @Override
  public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK) {
      //仅当activity为task根(即首个启动activity)时才生效,这个方法不会改变task中的activity状态,
      // 按下返回键的作用跟按下HOME效果一样;重新点击应用还是回到应用退出前的状态;
      moveTaskToBack(false);
      return true;
    }
    return super.onKeyDown(keyCode, event);
  }
}

Fragment,这里只列出HomeFragment的,其他都是一样

public class HomeFragment extends BaseFragment {

  public HomeFragment() {
  }

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view=inflater.inflate(R.layout.fragment_home,container,false);
    return view;
  }

}

activity_main.xml布局文件

<?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">

  <FrameLayout
    android:id="@+id/fl_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/line" />

  <View
    android:id="@+id/line"
    android:layout_width="match_parent"
    android:layout_height="@dimen/line_size"
    android:layout_above="@+id/radioGroup"
    android:background="#9e9e9e" />

  <RadioGroup
    android:id="@+id/radioGroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:clickable="true"
    android:gravity="center"
    android:orientation="horizontal"
    android:padding="3dp">

    <RadioButton
      android:id="@+id/rb_home"
      style="@style/RadioButtonStyle"
      android:checked="true"
      android:drawableTop="@drawable/btn_home"
      android:text="@string/home" />

    <RadioButton
      android:id="@+id/rb_shop"
      style="@style/RadioButtonStyle"
      android:drawableTop="@drawable/btn_shop"
      android:text="@string/shop" />

    <RadioButton
      android:id="@+id/rb_live"
      style="@style/RadioButtonStyle"
      android:drawableTop="@drawable/btn_live"
      android:text="@string/live" />

    <RadioButton
      android:id="@+id/rb_shopping_car"
      style="@style/RadioButtonStyle"
      android:drawableTop="@drawable/btn_shopping_car"
      android:text="@string/shopping_car" />

    <RadioButton
      android:id="@+id/rb_mine"
      style="@style/RadioButtonStyle"
      android:drawableTop="@drawable/btn_mine"
      android:text="@string/mine" />

  </RadioGroup>

</RelativeLayout>

RadioButton的样式

<style name="RadioButtonStyle">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:layout_marginRight">10dp</item>
    <item name="android:layout_marginLeft">10dp</item>
    <item name="android:button">@null</item>
    <item name="android:gravity">center</item>
    <item name="android:textColor">@color/color_radiobutton</item>
    <item name="android:textSize">10sp</item>
</style>

Demo下载地址:底部菜单栏

温馨提示:以后我自己写的demo都是用Android Studio写的了,用Eclipse的同学要的话需要自己改一下,时代在进步,工具也在升级!

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

(0)

相关推荐

  • android底部菜单栏实现原理与代码

    上一个项目已经做完了,这周基本上没事,所以整理了下以前的项目,想把一些通用的部分封装起来,这样以后遇到相似的项目就不用重复发明轮子了,也节省了开发效率.今天把demo贴出来一是方便以后自己查询,二是希望同时也能帮到大家. 底部菜单栏很重要,我看了一下很多应用软件都是用了底部菜单栏做.我这里使用了tabhost做了一种通用的(就是可以像微信那样显示未读消息数量的,虽然之前也做过但是layout下的xml写的太臃肿,这里去掉了很多不必要的层,个人看起来还是不错的,所以贴出来方便以后使用). 先看一下

  • Android仿微信界面的导航以及右上角菜单栏效果

    下面是安卓开发仿微信界面的代码. 分为3步, 第一步是界面的编写; 第二步是导航界面; 第三步是右上角菜单栏. 开始第一步前先预览一下效果. 第一步,界面. 界面的思路是利用ViewPager+Fragment实现,所以activity_main.xml中添加一个ViewPager.顶部和底部include的顶部栏和底部栏后面再说. MainActivity的界面activity_main.xml: <?xml version="1.0" encoding="utf-8

  • Android仿微信底部菜单栏功能显示未读消息数量

    底部菜单栏很重要,我看了一下很多应用软件都是用了底部菜单栏,这里使用了tabhost做了一种通用的(就是可以像微信那样显示未读消息数量的,虽然之前也做过但是layout下的xml写的太臃肿,这里去掉了很多不必要的层,个人看起来还是不错的,所以贴出来方便以后使用). 先看一下做出来之后的效果: 以后使用的时候就可以换成自己项目的图片和字体了,主框架不用变哈哈, 首先是要布局layout下xml文件 main.xml: <?xml version="1.0" encoding=&qu

  • Android仿UC底部菜单栏实现原理与代码

    相关的链接: Android 底部菜单栏实现 最近刚看完ViewPager,就想到做这样一个Demo,当然也参考了高手们的实例里边的网格菜单,开始我打算用自定义的imgBtn,但是发现放在pager选项卡中不好排版,所以最好选了GridView,简单实用 一.先主界面xml activity_main.xml 复制代码 代码如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

  • Android仿微信底部菜单栏效果

    前言 在市面上,大多数的APP都需要通过底部菜单栏来将程序的功能进行分类整理,通常都是分为3-5个大模块,从而正确有效地引导用户去使用我们的APP.实现底部菜单栏的方法也有很多种. 1.仿微信底部菜单栏(ViewPager+ImagerView+TextView) ......(其他方式后续会补充) 效果预览 首先来个开胃菜,看看实现效果: 先贴出项目所需的资源文件,这些可随个人自由更改颜色和文字 colors.xml <color name="bg_line_light_gray&quo

  • Android开发之微信底部菜单栏实现的几种方法汇总

     实现方式 实现的方式有很多种 这里总结最常见的几种方式,以后再添加其他的. viewPager + RadioGroup viewPager + FragmentTabHost viewpager +TabLayout viewPager+RadioGroup 感觉这是最简单的一个了,我也就不贴代码 说说我理解的思路吧 通过给pager 和RadioGroup 添加监听,监听两个控件的变化 实现联动 当viewPager的显示pager改变就会触发监听 ,在监听中选中对应的RadioButto

  • Android底部菜单栏实现的实例代码

     Android 使用RadioGroup 实现底部导航菜单栏. 一.主界面布局的实现: 先来张效果图: 介绍一下总体界面包括的内容:底部五个导航按钮,主界面包括一个FrameLayout用来放五个Fragment.点击底部按钮会对应跳转到指定的界面. 实现布局:activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="h

  • Android仿微信顶/底部菜单栏效果

    本文要实现仿微信微信底部菜单栏+顶部菜单栏,采用ViewPage来做,每一个page对应一个XML,当手指在ViewPage左右滑动时,就相应显示不同的page(其实就是xml)并且同时改变底部菜单按钮的图片变暗或变亮,同时如果点击底部菜单按钮,左右滑动page(其实就是xml)并且改变相应按钮的亮度. 一.布局 1.顶部菜单布局,命名为top_layout.xml <?xml version="1.0" encoding="utf-8"?> <R

  • android实现上滑屏幕隐藏底部菜单栏的示例

    本篇文章引用github上一个仿今日头条项目,项目地址: https://github.com/iMeiji/Toutiao ,主要实现的功能是底部菜单栏随用户手势滑动而变化可见状态 布局代码 这个功能实现起来比较简单,主要利用了CoordinatorLayout的 layout_behavior 的属性.具体代码如下: <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent&q

  • Android UI设计系列之自定义ListView仿QQ空间阻尼下拉刷新和渐变菜单栏效果(8)

    好久没有写有关UI的博客了,刚刚翻了一下之前的博客,最近一篇有关UI的博客:Android UI设计系列之自定义Dialog实现各种风格的对话框效果(7) ,实现各种风格效果的对话框,在那篇博客写完后由于公司封闭开发封网以及其它原因致使博客中断至今,中断这么久很是惭愧,后续我会尽量把该写的都补充出来.近来项目有个需求,要做个和QQ空间类似的菜单栏透明度渐变和下拉刷新带有阻尼回弹的效果.于是花点时间动手试了试,基本上达到了QQ空间的效果,截图如下: 通过观察QQ空间的运行效果,发现当往上滚动时菜单

随机推荐