Android仿微信底部菜单

最新推荐文章于 2023-03-02 21:10:39 发布
最新推荐文章于 2023-03-02 21:10:39 发布
阅读量166 收藏 1
点赞数
文章标签： 移动开发
本文介绍了一种仿照微信底部菜单的设计与实现方法，通过使用FrameLayout进行灵活布局，并配合特定的代码实现了不同选项卡之间的切换效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天终于把公司的界面原型做完了，哈哈，提前完成正好趁现在有时间更新下最近学到的一些特殊效果。其中这个仿微信的底部菜单，真的要感谢家辉兄弟，我才得以解决。首先看一下实现后效果。

就下面的那个底部栏，下面看一下实现代码吧！

首先是布局main.xml:

<?xml version="1.0" encoding="UTF-8"?>
<TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
        <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="0.0dip" android:layout_weight="1.0" />
        <TabWidget android:id="@android:id/tabs" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0.0" />

        <LinearLayout android:gravity="bottom" android:layout_gravity="bottom" android:orientation="horizontal" android:id="@+id/main_tab_group" android:background="@drawable/bottom1" android:paddingTop="2.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content">
            <FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
                <LinearLayout android:id="@+id/main_layout_addExam" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent">
                    <RadioButton android:id="@+id/main_tab_addExam" android:checked="true" android:text="添加考试" android:drawableTop="@drawable/label_1" style="@style/MMTabButton" />
                </LinearLayout>
                <LinearLayout  android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">
                    <TextView android:textSize="10.0dip" android:text="1" android:textColor="#ffffff" android:gravity="center" android:id="@+id/main_tab_unread_tv" android:background="@drawable/new_icon_2" android:visibility="invisible" android:layout_width="wrap_content" android:layout_height="wrap_content"  />
                </LinearLayout>
            </FrameLayout>
             <FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
                <LinearLayout android:id="@+id/main_layout_myExam" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent">
                     <RadioButton android:id="@+id/main_tab_myExam" android:text="我的考试" android:drawableTop="@drawable/label_2" style="@style/MMTabButton" />
                </LinearLayout>
                <LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">
                    <TextView android:textSize="10.0dip" android:textColor="#ffffff" android:gravity="center" android:id="@+id/main_tab_address" android:background="@drawable/new_icon_2" android:visibility="invisible" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1" />
                </LinearLayout>
            </FrameLayout>
            <FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
                <LinearLayout android:id="@+id/main_layout_message" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent">
                    <RadioButton android:id="@+id/main_tab_message" android:text="考试资讯" android:drawableTop="@drawable/label_3" style="@style/MMTabButton" />
                </LinearLayout>
                <LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">
                    <TextView android:textSize="12.0dip" android:textColor="#ffffff" android:gravity="center" android:id="@+id/main_tab_new_tv" android:background="@drawable/new_icon_2" android:visibility="visible" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1" />
                </LinearLayout>
            </FrameLayout>
            <FrameLayout android:background="@null" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
                <LinearLayout android:id="@+id/main_layout_settings" android:gravity="bottom|center" android:layout_width="fill_parent" android:layout_height="fill_parent">
                    <RadioButton android:id="@+id/main_tab_settings" android:text="设置" android:drawableTop="@drawable/label4" style="@style/MMTabButton" />
                </LinearLayout>
                <LinearLayout android:gravity="top|right|center" android:paddingRight="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">
                    <TextView android:textSize="10.0dip" android:textColor="#ffffff" android:gravity="center" android:id="@+id/main_tab_setting_new_tv" android:background="@drawable/new_icon_2" android:paddingLeft="6.0dip" android:paddingRight="6.0dip" android:visibility="invisible" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1" />
                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </LinearLayout>
</TabHost>

其实就是用FrameLayout，微信也是这样布局的我反编译过。这样就可以灵活的布局那个红色的图标了。

下面看一下activity切换代码：



import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.TabHost;
import android.widget.TextView;

public class MainTabActivity extends TabActivity {

	TabHost tabHost;
    private TextView main_tab_unread_tv;
	private RadioButton main_tab_addExam, main_tab_myExam,main_tab_message,main_tab_settings;
	private LinearLayout main_layout_addExam,main_layout_myExam,main_layout_message,main_layout_settings;

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.main);

		initTab();
		
		init();
		
	}

	private void init() {

		main_tab_addExam = (RadioButton) findViewById(R.id.main_tab_addExam);

		main_tab_myExam = (RadioButton) findViewById(R.id.main_tab_myExam);
		
		main_tab_message=(RadioButton) findViewById(R.id.main_tab_message);
		
		main_tab_settings=(RadioButton) findViewById(R.id.main_tab_settings);
		
		main_layout_addExam=(LinearLayout) findViewById(R.id.main_layout_addExam);
		main_layout_myExam=(LinearLayout) findViewById(R.id.main_layout_myExam);
		main_layout_message=(LinearLayout) findViewById(R.id.main_layout_message);
		main_layout_settings=(LinearLayout) findViewById(R.id.main_layout_settings);
		
		main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_one_one), null, null);
		main_layout_addExam.setBackgroundResource(R.drawable.labelbg);
		
		main_tab_unread_tv=(TextView) findViewById(R.id.main_tab_unread_tv);
		//main_tab_unread_tv.setVisibility(View.VISIBLE);
		//main_tab_unread_tv.setText("3");
		
		main_tab_addExam.setOnClickListener(new OnClickListener() {
			
			public void onClick(View arg0) {
				tabHost.setCurrentTabByTag("first");
				/*main_tab_addExam.setBackgroundResource(R.drawable.label_one_one);
				main_tab_myExam.setBackgroundResource(R.drawable.label_2);
				main_tab_message.setBackgroundResource(R.drawable.label_3);*/
				//main_tab_addExam.setCompoundDrawables(null, getResources().getDrawable(R.drawable.label_one_one), null, null);
				main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_one_one), null, null);
				main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2), null, null);
				main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3), null, null);
				main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4), null, null);
				main_layout_addExam.setBackgroundResource(R.drawable.labelbg);
				main_layout_myExam.setBackgroundResource(R.drawable.mm_trans);
				main_layout_message.setBackgroundResource(R.drawable.mm_trans);
				main_layout_settings.setBackgroundResource(R.drawable.mm_trans);
			}
		});
		
		main_tab_myExam.setOnClickListener(new OnClickListener() {
			
			public void onClick(View arg0) {
				tabHost.setCurrentTabByTag("second");
				/*main_tab_addExam.setBackgroundResource(R.drawable.label_1);
				main_tab_myExam.setBackgroundResource(R.drawable.label_two_one);
				main_tab_message.setBackgroundResource(R.drawable.label_3);*/
				main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1), null, null);
				main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_two_one), null, null);
				main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3), null, null);
				main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4), null, null);
				main_layout_addExam.setBackgroundResource(R.drawable.mm_trans);
				main_layout_myExam.setBackgroundResource(R.drawable.labelbg);
				main_layout_message.setBackgroundResource(R.drawable.mm_trans);
				main_layout_settings.setBackgroundResource(R.drawable.mm_trans);
			}
		});
		main_tab_message.setOnClickListener(new OnClickListener() {
			
			public void onClick(View v) {
				// TODO Auto-generated method stub
				tabHost.setCurrentTabByTag("third");
				/*main_tab_addExam.setBackgroundResource(R.drawable.label_1);
				main_tab_myExam.setBackgroundResource(R.drawable.label_2);
				main_tab_message.setBackgroundResource(R.drawable.label_three_one);*/
				main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1), null, null);
				main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2), null, null);
				main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_three_one), null, null);
				main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label4), null, null);
				main_layout_addExam.setBackgroundResource(R.drawable.mm_trans);
				main_layout_myExam.setBackgroundResource(R.drawable.mm_trans);
				main_layout_message.setBackgroundResource(R.drawable.labelbg);
				main_layout_settings.setBackgroundResource(R.drawable.mm_trans);
			}
		});
		
		main_tab_settings.setOnClickListener(new OnClickListener() {
			
			public void onClick(View v) {
				// TODO Auto-generated method stub
				tabHost.setCurrentTabByTag("four");
				main_tab_addExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_1), null, null);
				main_tab_myExam.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_2), null, null);
				main_tab_message.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_3), null, null);
				main_tab_settings.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.label_four_one), null, null);
				main_layout_addExam.setBackgroundResource(R.drawable.mm_trans);
				main_layout_myExam.setBackgroundResource(R.drawable.mm_trans);
				main_layout_message.setBackgroundResource(R.drawable.mm_trans);
				main_layout_settings.setBackgroundResource(R.drawable.labelbg);
			}
		});
	}
	
	
	private void initTab(){
		tabHost=getTabHost();
		tabHost.addTab(tabHost.newTabSpec("first").setIndicator("first").setContent(
				new Intent(this, AddExamActivity.class)));

		tabHost.addTab(tabHost.newTabSpec("second").setIndicator("second").setContent(
				new Intent(this, MyExamActivity.class)));
		
		tabHost.addTab(tabHost.newTabSpec("third").setIndicator("third").setContent(
				new Intent(this, MessageActivity.class)));
		
		tabHost.addTab(tabHost.newTabSpec("four").setIndicator("four").setContent(
				new Intent(this, SettingActivity.class)));

	}

}
setCompoundDrawablesWithIntrinsicBounds方法是我用来设置顶部图片的，用来替换android:drawableTop这个属性的背景图，至于为什么那么麻烦每次都要设置背景图片颜色，是因为没用用RadioGroup包含RadioButton，所以RadioButton就不能做到单个切换。



iteye_7188
关注
Android仿微信底部菜单栏+顶部菜单栏（附源码）
03-07
Android仿微信底部菜单栏+顶部菜单栏，效果看博文http://blog.youkuaiyun.com/evankaka/article/details/44121457
Android仿微信底部菜单栏+顶部菜单栏
热门推荐
wk843620202的专栏
03-15 2万+
本文要实现仿微信微信底部菜单栏+顶部菜单栏，采用ViewPage来做，每一个page对应一个XML，当手指在ViewPage左右滑动时，就相应显示不同的page(其实就是xml)并且同时改变底部菜单按钮的图片变暗或变亮，同时如果点击底部菜单按钮，左右滑动page(其实就是xml)并且改变相应按钮的亮度。 最终效果：源码免费下载 一、布局 1、顶部菜单布局，命名为t
Android仿微信底部菜单栏+顶部菜单栏（源码）
09-07
Android仿微信底部菜单栏+顶部菜单栏，可供大家参考学习。
Android仿微信底部菜单栏效果
08-28
主要为大家详细介绍了Android仿微信底部菜单栏效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android 仿微信底部菜单栏 + 显示未读消息数量
12-12
在Android应用开发中，微信的底部菜单栏是一个常见的设计元素，它为用户提供了一种直观的导航方式。这个项目是关于如何在自己的Android应用中实现一个类似微信的底部菜单栏，并且能够显示未读消息的数量。下面我们将...
Android仿微信底部菜单栏功能显示未读消息数量
01-06
底部菜单栏很重要，我看了一下很多应用软件都是用了底部菜单栏，这里使用了tabhost做了一种通用的（就是可以像微信那样显示未读消息数量的，虽然之前也做过但是layout下的xml写的太臃肿，这里去掉了很多不必要的层，...
Android实现仿微信底部导航栏
09-16
使用ViewPager+RadioGroup实现仿微信底部导航栏,注释很全,了解更多请参考：http://www.cnblogs.com/Fill/p/7530655.html
android 仿底部菜单栏,Android仿微信底部菜单栏效果
weixin_28285943的博客
05-26 818
几乎所有的Android应用程序都使用底部菜单栏，目前安卓开发中tabhost技术已经成为主流，这篇文章爱站技术频道小编主要为大家介绍了Android仿微信底部菜单栏效果，感兴趣的小伙伴们可以参考一下哦。1.仿微信底部菜单栏(ViewPager+ImagerView+TextView)......(其他方式后续会补充)效果预览首先来个开胃菜，看看实现效果：先贴出项目所需的资源文件，这些可随个人自由...
仿微信界底部面导航栏（Android）
weixin_47024334的博客
03-02 1259
手把手教你复刻微信底部导航栏
Android仿微信底部菜单栏+今日头条顶部导航栏
10-16
在Android中实现两种主要的Tab效果： 1. 仿微信底部菜单；2. 仿今日头条顶部导航条。博客讲解见：https://blog.youkuaiyun.com/ahuyangdong/article/details/82493158。github源码：https://github.com/ahuyangdong/TabCustom
Android仿微信顶/底部菜单栏效果
09-03
主要介绍了Android仿微信底部菜单栏和顶部菜单栏实现效果，感兴趣的小伙伴们可以参考一下
android仿微信底部选项卡（可滑动）
06-14
android仿微信底部选项卡（可滑动），里面的例子有两个，一个是仿微信点击可以切换选项卡，一个是用viewpager实现可滑动和切换的底部选项卡。
android 仿微信底部弹出菜单
Ricky
07-14 1万+
最近在网上看了一些文章介绍使用PopupWindow实现 微信弹出菜单，于是乎自己也实现了一下，分享一下！ 原理：主要是 popupWindow.setAnimationStyle(R.style.popuStyle); //设置 popupWindow 动画样式 package com.example.test; import android.app.Activity; impo
Android仿微信底部导航菜单
不明飞行物
02-11 1299
使用RadioGroup和ViewPager实现仿微信底部菜单效果
android 自定义底部菜单栏(仿微信底部菜单栏)
安卓兼职framework和app工程师的博客
09-05 1197
底部菜单栏，在现在app开发中，很常用的功能， 今天就来自定义底部菜单栏 效果图 自定义底部菜单栏 package com.custom.bottombar; import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import android.annotation.TargetApi; import android.content.Context; import android.conte
Android开发——使用fragment仿微信底部菜单栏
newAppZ
02-08 7397
Android在3.0版本加入了Fragment，主要是为了解决Android Pad屏幕比较大，空间不能充分利用的问题，但现在即使只是在手机上，也有很多的场景可以。然而现在Fragment的应用的场景越来越多，Fragment意为碎片的意思，就是为了替代TabActivity。 例如，微信下方的tab： 可以将Fragment理解为Activity的“碎片”，也就是其一部分，故而Fragment的
仿微信底部菜单栏(ViewPager+ImagerView+TextView)
Honiler的博客
07-18 1964
在市面上，大多数的APP都需要通过底部菜单栏来将程序的功能进行分类整理，通常都是分为3-5个大模块，从而正确有效地引导用户去使用我们的APP。实现底部菜单栏的方法也有很多种。 1.仿微信底部菜单栏(ViewPager+ImagerView+TextView)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值