首页 文章 精选 留言 我的

Android UI-仿微信底部导航栏布局

2017-11-22 528

现在App基本的标配除了侧滑菜单，还有一个就是底部导航栏，常见的聊天工具QQ，微信，购物App都有底部导航栏，用户可以随便切换看不同的内容，说是情怀也好，用户体验也罢。我们开发的主要的还是讲的是如何如何实现其功能，网上实现的方式无外乎两种,一种是使用tabhost进行切换，一种是直接使用Fragment进行切换，底部导航栏的布局有的使用的是线性布局，有的是使用的RadioGroup，本文中是使用fragment+RadioGroup是实现的，看正文吧:

基础布局

其中主要低 底部导航栏，其他都没有什么，上面是一个Fragment自己替换一下即可，关于Fragment的使用可参考本人之前的博客;

activity_main.xml中的布局文件，由于样式比较多可以单独的放在style中的，鉴于方便查看，直接放在布局文件中，activity_main中的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<LinearLayout 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:orientation= "vertical"
     tools:context= "com.example.googlebottomfragment.MainActivity"  >
 
 
     <FrameLayout
         android:id= "@+id/main_content"
         android:layout_width= "fill_parent"
         android:layout_height= "0dp"
         android:layout_weight= "1"  />
 
     <RadioGroup
         android:id= "@+id/tab_menu"
         android:layout_width= "fill_parent"
         android:layout_height= "wrap_content"
         android:background= "@drawable/mmfooter_bg"
         android:orientation= "horizontal"  >
 
         <RadioButton
             android:id= "@+id/rbChat"
             android:layout_width= "0dp"
             android:layout_height= "wrap_content"
             android:layout_gravity= "bottom"
             android:layout_weight= "1"
             android:background= "@drawable/tab_selector_checked_bg"
             android:button= "@null"
             android:checked= "true"
             android:drawableTop= "@drawable/tab_selector_weixing"
             android:gravity= "center_horizontal|bottom"
             android:paddingTop= "2dp"
             android:text= "微信"
             android:textColor= "@color/tab_selector_tv_color"  />
 
         <RadioButton
             android:id= "@+id/rbAddress"
             android:layout_width= "0dp"
             android:layout_height= "wrap_content"
             android:layout_gravity= "bottom"
             android:layout_weight= "1"
             android:background= "@drawable/tab_selector_checked_bg"
             android:button= "@null"
             android:drawableTop= "@drawable/tab_selector_tongxunlu"
             android:gravity= "center_horizontal|bottom"
             android:paddingTop= "2dp"
             android:text= "通讯录"
             android:textColor= "@color/tab_selector_tv_color"  />
 
         <RadioButton
             android:id= "@+id/rbFind"
             android:layout_width= "0dp"
             android:layout_height= "wrap_content"
             android:layout_gravity= "bottom"
             android:layout_weight= "1"
             android:background= "@drawable/tab_selector_checked_bg"
             android:button= "@null"
             android:drawableTop= "@drawable/tab_selector_faxian"
             android:gravity= "center_horizontal|bottom"
             android:paddingTop= "2dp"
             android:text= "发现"
             android:textColor= "@color/tab_selector_tv_color"  />
 
         <RadioButton
             android:id= "@+id/rbMe"
             android:layout_width= "0dp"
             android:layout_height= "wrap_content"
             android:layout_gravity= "bottom"
             android:layout_weight= "1"
             android:background= "@drawable/tab_selector_checked_bg"
             android:button= "@null"
             android:drawableTop= "@drawable/tab_selector_wo"
             android:gravity= "center_horizontal|bottom"
             android:paddingTop= "2dp"
             android:text= "我"
             android:textColor= "@color/tab_selector_tv_color"  />
     </RadioGroup>
     
       
 
</LinearLayout>

 　看下新建的布局和资源文件：

其中tab_selector_tv_color.xml主要是用于控制切换的时候显示下面字体的颜色:

1
2
3
4
5
6
7
8
<?xml version= "1.0"  encoding= "utf-8" ?>
<selector xmlns:android= "http://schemas.android.com/apk/res/android" >
 
     <item android:state_checked= "true"  android:color= "@android:color/white" />
     <item android:state_checked= "false"  android:color= "@android:color/darker_gray" />
     <item android:color= "@android:color/darker_gray" />
 
</selector>

　　其中tab_selector_checked_bg.xml布局文件选中的时候每个RadioButtton的背景颜色:

1
2
3
4
5
6
7
8
<?xml version= "1.0"  encoding= "utf-8" ?>
<selector xmlns:android= "http://schemas.android.com/apk/res/android"  >
 
     <item
     android:state_checked= "true"
     android:drawable= "@drawable/tab_bg_halo" />
     
</selector>

 其中tab_selector_weixing.xml主要是点击的时候显示不同的图片，一个是绿色的，一个是白色:

1
2
3
4
5
6
<?xml version= "1.0"  encoding= "utf-8" ?>
<selector xmlns:android= "http://schemas.android.com/apk/res/android"  >
     <item android:state_checked= "false"  android:drawable= "@drawable/tab_weixin_normal" ></item>
     <item android:state_checked= "true"  android:drawable= "@drawable/tab_weixin_pressed" ></item>
 
</selector>

　　其中需要切换的chat.xml，address.xml，find.xml，me.xml都是一样的，其中chat.xml代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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= "match_parent"
     android:orientation= "vertical"  >
     
     <TextView
         android:layout_height= "wrap_content"
         android:layout_width= "wrap_content"
         android:text= "微信"
         android:textSize= "20sp"
       />
       <TextView
         android:layout_height= "wrap_content"
         android:layout_width= "wrap_content"
         android:text= "http://www.cnblogs.com/xiaofeixiang"
         android:textSize= "15sp"
       />
     
 
</LinearLayout>

　实现Demo

MainActivity.java中的代码，主要的就是设置一下OnCheckedChangeListener,注意MainActivity中需要继承FragmentActivity:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
public  void  initView() {
     chat =  new  FragmentChat();
     getSupportFragmentManager().beginTransaction().replace(R.id.main_content, chat).commit();
     myTabRg = (RadioGroup) findViewById(R.id.tab_menu);
     myTabRg.setOnCheckedChangeListener( new  OnCheckedChangeListener() {
 
 
         @Override
         public  void  onCheckedChanged(RadioGroup group,  int  checkedId) {
             // TODO Auto-generated method stub
             switch  (checkedId) {
             case  R.id.rbChat:
                 chat =  new  FragmentChat();
                 getSupportFragmentManager().beginTransaction().replace(R.id.main_content, chat)
                         .commit();
                 break ;
             case  R.id.rbAddress:
                 if  (address== null ) {
                     address = new  FragmentAddress();
                 }
                 Log.i( "MyFragment" ,  "FragmentAddress" );
                 getSupportFragmentManager().beginTransaction().replace(R.id.main_content, address).commit();
                 break ;
             case  R.id.rbFind:
                 find =  new  FragmentFind();
                 getSupportFragmentManager().beginTransaction().replace(R.id.main_content, find)
                         .commit();
                 break ;
             case  R.id.rbMe:
                 me =  new  FragmentMe();
                 getSupportFragmentManager().beginTransaction().replace(R.id.main_content, me)
                         .commit();
                 break ;
             default :
                 break ;
             }
 
         }
     });

 FragmentChat中的代码，其余的三个FragmentAddress，FragmentFind,FragmentMe类似，就不贴代码了，主要是继承Fragment 即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public  class  FragmentChat  extends  Fragment {
 
     @Override
     public  void  onCreate(Bundle savedInstanceState) {
         // TODO Auto-generated method stub
         super .onCreate(savedInstanceState);
     }
 
     @Override
     public  View onCreateView(LayoutInflater inflater,
             @Nullable  ViewGroup container,  @Nullable  Bundle savedInstanceState) {
         // TODO Auto-generated method stub
         return  inflater.inflate(R.layout.chat,  null );
     }
 
}

　　最后看张通讯录的截图吧:

、-

本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/4156732.html，如需转载请自行联系原作者

上一篇 下一篇
优秀的个人博客,低调大师

微信关注我们

原文链接：https://yq.aliyun.com/articles/367212

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Android Studio体验(二)--创建项目和Genymotion试用

上周日已经体验了一把Android Studio顺便没事点了点其他功能，不过还是从自己创建项目开始说吧，首先我们要熟悉Android Studio中的Project和Module 两个概念。Android Studio中Project是工作空间类似于Eclipse中的WorkPlace，Module指的是具体项目类似于Eclipse中项目。Eclipse可以同时对多个Eclipse的Project进行同时编辑，这些Project在同一个workspace之中，对应的Android Studio可以同时对多个Android Studio的Module进行同时编辑，这些Module在同一个Project之中。本文标题所说到的项目指的是Android Studio的Module。Android Studio创建一个项目，首先要先创建Project。但是你创建项目的同时，Project自动创建了，Android Stuido新建一个项目之后对对应的创建一个对应的app文件夹，也就不需要我们重新创建一个Module，直接对应的操作这个Module即可。 创建项目 一般来说新安装的Android...
2017-11-23
500
上一篇

Android之SlideMenu实例Demo

年末加班基本上一周都没什么时候回家写代码，回到家就想睡觉，周末难得有时间写个博客，上次写了一篇关于SlideMenu开源项目的导入问题，这次主要讲讲使用的问题，SlideMenu应用的广泛程度就不用说了，基本上是App的标配，关于SlideMenu的各种使用方法有很多，网上各种Demo也很多，想来想去还是按照自己本身的实战方式去写写吧，走过的坑希望大家基本上不会遇到，开始正题: 基础布局 写布局文件之前先看下最终的效果图，昨天红色就是滑动出现的区域，右边的图片由左边的事件触发: activity_main.xml中的布局: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <FrameLayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http://schemas.android.com/tools" android:id= "@+id/main_frame" android:layout_width= "match_pare...
2017-11-23
521
下一篇

相关文章

发表评论

资源下载

更多资源
优质分享App

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

时间: 2025-12-03 大小: 4.36MB 下载: 23次
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

时间: 2025-12-12 大小: 211.28KB 下载: 54次
Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

时间: 2025-12-21 大小: 189MB 下载: 2次
Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

时间: 2025-12-03 大小: 9.84MB 下载: 39次
手机查看

扫码在手机上查看文章

扫描二维码，手机阅读更方便

热门标签
Rocky OpenAi Redis DeepSeek Jdk25 Docker SpringCloud Gemini3 Service Mesh SpringBoot4 HarmonyOS6 Kubernetes Nacos3

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册