热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

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

这篇文章主要介绍了Android仿微信底部菜单栏和顶部菜单栏实现效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文要实现仿微信微信底部菜单栏+顶部菜单栏,采用ViewPage来做,每一个page对应一个XML,当手指在ViewPage左右滑动时,就相应显示不同的page(其实就是xml)并且同时改变底部菜单按钮的图片变暗或变亮,同时如果点击底部菜单按钮,左右滑动page(其实就是xml)并且改变相应按钮的亮度。

一、布局

1、顶部菜单布局,命名为top_layout.xml

<&#63;xml version="1.0" encoding="utf-8"&#63;> 
 
  
  
  
 

效果:

2、底部菜单布局bottom_layout.xml

<&#63;xml version="1.0" encoding="utf-8"&#63;> 
 
 
  
  
  
 
  
  
 
  
 
  
 
  
  
 
  
 
  
 
  
  
 
  
 
  
 
  
  
 
 

效果:

3、整体布局

将上面两个加到activity_main.xml中去

 
 
  
 
  
  
" 
 
  
 
 

效果:

效果还可以,底下菜单栏是有背景的,有点儿白色的,所以看得不是很清,一来微信是选中的

4、定义ViewPage的四个布局

因为要用ViewPage要加四个page,每个page对应一个xml,所以这里定义四个xml.

tab01.xml

<&#63;xml version="1.0" encoding="utf-8"&#63;> 
 
  
 
 

效果:

tab02.xml

<&#63;xml version="1.0" encoding="utf-8"&#63;> 
 
  
 
 

效果:效果和上面一样,只是文字改了一下

tab03.xml

<&#63;xml version="1.0" encoding="utf-8"&#63;> 
 
  
 
 

效果:效果和上面一样,只是文字改了一下

tab04.xml

<&#63;xml version="1.0" encoding="utf-8"&#63;> 
 
  
 
 

效果:效果和上面一样,只是文字改了一下

二、代码

1. MainActivity中把控件和ViewPage初始化

package com.example.tabexample; 
 
import java.util.ArrayList; 
import java.util.List; 
import android.os.Bundle; 
import android.app.Activity; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.support.v4.view.ViewPager.OnPageChangeListener; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.view.Window; 
import android.widget.ImageButton; 
import android.widget.LinearLayout; 
 
public class MainActivity extends Activity implements 
 android.view.View.OnClickListener { 
 
 private ViewPager mViewPager;// 用来放置界面切换 
 private PagerAdapter mPagerAdapter;// 初始化View适配器 
 private List mViews = new ArrayList();// 用来存放Tab01-04 
 // 四个Tab,每个Tab包含一个按钮 
 private LinearLayout mTabWeiXin; 
 private LinearLayout mTabAddress; 
 private LinearLayout mTabFrd; 
 private LinearLayout mTabSetting; 
 // 四个按钮 
 private ImageButton mWeiXinImg; 
 private ImageButton mAddressImg; 
 private ImageButton mFrdImg; 
 private ImageButton mSettingImg; 
 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
 super.onCreate(savedInstanceState); 
 requestWindowFeature(Window.FEATURE_NO_TITLE); 
 setContentView(R.layout.activity_main); 
 initView(); 
 initViewPage(); 
 initEvent(); 
 } 
 
 private void initEvent() { 
 mTabWeiXin.setOnClickListener(this); 
 mTabAddress.setOnClickListener(this); 
 mTabFrd.setOnClickListener(this); 
 mTabSetting.setOnClickListener(this); 
 mViewPager.setOnPageChangeListener(new OnPageChangeListener() { 
 /** 
 *ViewPage左右滑动时 
 */ 
 @Override 
 public void onPageSelected(int arg0) { 
 int currentItem = mViewPager.getCurrentItem(); 
 switch (currentItem) { 
 case 0: 
 resetImg(); 
 mWeiXinImg.setImageResource(R.drawable.tab_weixin_pressed); 
 break; 
 case 1: 
 resetImg(); 
 mAddressImg.setImageResource(R.drawable.tab_address_pressed); 
 break; 
 case 2: 
 resetImg(); 
 mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed); 
 break; 
 case 3: 
 resetImg(); 
 mSettingImg.setImageResource(R.drawable.tab_settings_pressed); 
 break; 
 default: 
 break; 
 } 
 } 
 
 @Override 
 public void onPageScrolled(int arg0, float arg1, int arg2) { 
 
 } 
 
 @Override 
 public void onPageScrollStateChanged(int arg0) { 
 
 } 
 }); 
 } 
 
 /** 
 * 初始化设置 
 */ 
 private void initView() { 
 mViewPager = (ViewPager) findViewById(R.id.id_viewpage); 
 // 初始化四个LinearLayout 
 mTabWeiXin = (LinearLayout) findViewById(R.id.id_tab_weixin); 
 mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address); 
 mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd); 
 mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings); 
 // 初始化四个按钮 
 mWeiXinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img); 
 mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img); 
 mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img); 
 mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img); 
 } 
 
 /** 
 * 初始化ViewPage 
 */ 
 private void initViewPage() { 
 
 // 初妈化四个布局 
 LayoutInflater mLayoutInflater = LayoutInflater.from(this); 
 View tab01 = mLayoutInflater.inflate(R.layout.tab01, null); 
 View tab02 = mLayoutInflater.inflate(R.layout.tab02, null); 
 View tab03 = mLayoutInflater.inflate(R.layout.tab03, null); 
 View tab04 = mLayoutInflater.inflate(R.layout.tab04, null); 
 
 mViews.add(tab01); 
 mViews.add(tab02); 
 mViews.add(tab03); 
 mViews.add(tab04); 
 
 // 适配器初始化并设置 
 mPagerAdapter = new PagerAdapter() { 
 
 @Override 
 public void destroyItem(ViewGroup container, int position, 
 Object object) { 
 container.removeView(mViews.get(position)); 
 
 } 
 
 @Override 
 public Object instantiateItem(ViewGroup container, int position) { 
 View view = mViews.get(position); 
 container.addView(view); 
 return view; 
 } 
 
 @Override 
 public boolean isViewFromObject(View arg0, Object arg1) { 
 
 return arg0 == arg1; 
 } 
 
 @Override 
 public int getCount() { 
 
 return mViews.size(); 
 } 
 }; 
 mViewPager.setAdapter(mPagerAdapter); 
 } 
 
 /** 
 * 判断哪个要显示,及设置按钮图片 
 */ 
 @Override 
 public void onClick(View arg0) { 
 
 switch (arg0.getId()) { 
 case R.id.id_tab_weixin: 
 mViewPager.setCurrentItem(0); 
 resetImg(); 
 mWeiXinImg.setImageResource(R.drawable.tab_weixin_pressed); 
 break; 
 case R.id.id_tab_address: 
 mViewPager.setCurrentItem(1); 
 resetImg(); 
 mAddressImg.setImageResource(R.drawable.tab_address_pressed); 
 break; 
 case R.id.id_tab_frd: 
 mViewPager.setCurrentItem(2); 
 resetImg(); 
 mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed); 
 break; 
 case R.id.id_tab_settings: 
 mViewPager.setCurrentItem(3); 
 resetImg(); 
 mSettingImg.setImageResource(R.drawable.tab_settings_pressed); 
 break; 
 default: 
 break; 
 } 
 } 
 
 /** 
 * 把所有图片变暗 
 */ 
 private void resetImg() { 
 mWeiXinImg.setImageResource(R.drawable.tab_weixin_normal); 
 mAddressImg.setImageResource(R.drawable.tab_address_normal); 
 mFrdImg.setImageResource(R.drawable.tab_find_frd_normal); 
 mSettingImg.setImageResource(R.drawable.tab_settings_normal); 
 } 
 
} 

代码量很短,只有几百行,功能就可以实现了,注意这里去掉程序原本的标题栏我直接用了
requestWindowFeature(Window.FEATURE_NO_TITLE); 

2、效果:

三、思路说明

1、分别为顶部菜单栏和底部菜单栏新建一个布局
2、中间是ViewPage,然后里面放四个Page(tab01-tab04.xml),注意,要通过适配器给ViewPage提供内容.
3、监听ViewPage和底部菜单栏按钮的事件(注意,这里的按钮放在一个LinearLayout中,所以我们监听了LinearLayout的触摸事件,而屏蔽了Imgaebutton的触摸事件)
4、
public void onClick(View arg0) 
这里面监听的是底部菜单的触摸事件,根据触摸的控件,改变自身的亮度、改变ViewPage显示的内容
mViewPager.setOnPageChangeListener(new OnPageChangeListener()  

这里监听的是ViewPage左右滑动的事件,改变相应控件的亮度、改变ViewPage显示的内容

四、不足之处

1、最新版微信上应该是左右滑动是有部分亮度变化的,这里直接转变过去了。
2、最新版微信文字也要跟着变化,这里没做改变

本文已被整理到了《Android微信开发教程汇总》,欢迎大家学习阅读。

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


推荐阅读
  • Android 九宫格布局详解及实现:人人网应用示例
    本文深入探讨了人人网Android应用中独特的九宫格布局设计,解析其背后的GridView实现原理,并提供详细的代码示例。这种布局方式不仅美观大方,而且在现代Android应用中较为少见,值得开发者借鉴。 ... [详细]
  • 国内BI工具迎战国际巨头Tableau,稳步崛起
    尽管商业智能(BI)工具在中国的普及程度尚不及国际市场,但近年来,随着本土企业的持续创新和市场推广,国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争,国内BI工具通过不断优化产品和技术,赢得了越来越多用户的认可。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
  • RecyclerView初步学习(一)
    RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式,除了提供ViewHolder缓存模式,还可以自定义动画,分割符,布局样式,相比于传统的ListVi ... [详细]
  • 解决微信电脑版无法刷朋友圈问题:使用安卓远程投屏方案
    在工作期间想要浏览微信和朋友圈却不太方便?虽然微信电脑版目前不支持直接刷朋友圈,但通过远程投屏技术,可以轻松实现在电脑上操作安卓设备的功能。 ... [详细]
  • SQLite 动态创建多个表的需求在网络上有不少讨论,但很少有详细的解决方案。本文将介绍如何在 Qt 环境中使用 QString 类轻松实现 SQLite 表的动态创建,并提供详细的步骤和示例代码。 ... [详细]
  • 解决JAX-WS动态客户端工厂弃用问题并迁移到XFire
    在处理Java项目中的JAR包冲突时,我们遇到了JaxWsDynamicClientFactory被弃用的问题,并成功将其迁移到org.codehaus.xfire.client。本文详细介绍了这一过程及解决方案。 ... [详细]
  • 本文介绍如何使用布局文件在Android应用中排列多行TextView和Button,使其占据屏幕的特定比例,并提供示例代码以帮助理解和实现。 ... [详细]
  • 几何画板展示电场线与等势面的交互关系
    几何画板是一款功能强大的物理教学软件,具备丰富的绘图和度量工具。它不仅能够模拟物理实验过程,还能通过定量分析揭示物理现象背后的规律,尤其适用于难以在实际实验中展示的内容。本文将介绍如何使用几何画板演示电场线与等势面之间的关系。 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • 本文介绍如何在应用程序中使用文本输入框创建密码输入框,并通过设置掩码来隐藏用户输入的内容。我们将详细解释代码实现,并提供专业的补充说明。 ... [详细]
  • 本文探讨了在通过 API 端点调用时,使用猫鼬(Mongoose)的 findOne 方法总是返回 null 的问题,并提供了详细的解决方案和建议。 ... [详细]
  • 探讨如何真正掌握Java EE,包括所需技能、工具和实践经验。资深软件教学总监李刚分享了对毕业生简历中常见问题的看法,并提供了详尽的标准。 ... [详细]
author-avatar
海豚青春_407
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有