本篇文章主要介绍了"安卓开发笔记——多种方式实现底部菜单栏（仿微信界面）"，对于Javajrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
关于底部菜单是什么，我想没必要介绍了，在市场上的APP里太常见了，这里提供两种方式来实现。记得之前写过几篇关于底部菜单实现的方法，有兴趣的朋友可以看看：1、《安...
关于底部菜单是什么，我想没必要介绍了，在市场上的APP里太常见了，这里提供两种方式来实现。
记得之前写过几篇关于底部菜单实现的方法，有兴趣的朋友可以看看：
1、《安卓开发复习笔记——TabHost组件(一)（实现底部菜单导航）》
2、《安卓开发复习笔记——TabHost组件(二)（实现底部菜单导航）》
3、《安卓开发笔记——Fragment+FragmentTabHost组件(实现新浪微博底部菜单)》
今天带来种相对更通俗易懂的写法，不再和过去一样去沿用TabHost了，这次我们直接用LinearLayout布局来实现，先来看下实现效果图：
中间内容区域有两种实现方式：
1、ViewPager --可滑动界面 2、Fragment --固定界面
1、界面分析
这里有个小技巧，把底部菜单栏的每一个小的LinearLayout的宽度都设置成0dp，然后用weight权重去分配它，中间内容区域也是把高度设置成0dp，然后用weight权重去分配它。（weight默认是把界面里空闲的位置作为划分位置，所以这里的宽度或者高度要注意设置成0dp）
2、具体实现(内容区域为ViewPager可滑动界面)
布局文件：
activity_top.xml（顶部布局）
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="55dp" 5 android:background="@drawable/title_bar"> 6 7 <TextView 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:layout_centerInParent="true" 11 android:text="微信" 12 android:textSize="20dp" 13 android:textColor="#ffffff"/> 14 15 RelativeLayout>
View Code
activity_bottom.xml（底部布局）
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="wrap_content" 5 android:background="@drawable/bottom_bar" > 6 7 <LinearLayout 8 android:id="@+id/ll_home" 9 android:layout_width="0dp" 10 android:layout_height="wrap_content" 11 android:layout_weight="1" 12 android:gravity="center" 13 android:orientation="vertical" > 14 15 <ImageView 16 android:id="@+id/iv_home" 17 android:layout_width="wrap_content" 18 android:layout_height="wrap_content" 19 android:src="@drawable/tab_weixin_pressed" /> 20 21 <TextView 22 android:id="@+id/tv_home" 23 android:layout_width="wrap_content" 24 android:layout_height="wrap_content" 25 android:layout_marginTop="3dp" 26 android:text="首页" 27 android:textColor="#1B940A" 28 android:textStyle="bold" /> 29 LinearLayout> 30 31 <LinearLayout 32 android:id="@+id/ll_address" 33 android:layout_width="0dp" 34 android:layout_height="wrap_content" 35 android:layout_weight="1" 36 android:gravity="center" 37 android:orientation="vertical" > 38 39 <ImageView 40 android:id="@+id/iv_address" 41 android:layout_width="wrap_content" 42 android:layout_height="wrap_content" 43 android:src="@drawable/tab_address_normal" /> 44 45 <TextView 46 android:id="@+id/tv_address" 47 android:layout_width="wrap_content" 48 android:layout_height="wrap_content" 49 android:layout_marginTop="3dp" 50 android:text="通讯录" 51 android:textColor="#ffffff" 52 android:textStyle="bold" /> 53 LinearLayout> 54 55 <LinearLayout 56 android:id="@+id/ll_friend" 57 android:layout_width="0dp" 58 android:layout_height="wrap_content" 59 android:layout_weight="1" 60 android:gravity="center" 61 android:orientation="vertical" > 62 63 <ImageView 64 android:id="@+id/iv_friend" 65 android:layout_width="wrap_content" 66 android:layout_height="wrap_content" 67 android:src="@drawable/tab_find_frd_normal" /> 68 69 <TextView 70 android:id="@+id/tv_friend" 71 android:layout_width="wrap_content" 72 android:layout_height="wrap_content" 73 android:layout_marginTop="3dp" 74 android:text="朋友" 75 android:textColor="#ffffff" 76 android:textStyle="bold" /> 77 LinearLayout> 78 79 <LinearLayout 80 android:id="@+id/ll_setting" 81 android:layout_width="0dp" 82 android:layout_height="wrap_content" 83 android:layout_weight="1" 84 android:gravity="center" 85 android:orientation="vertical" > 86 87 <ImageView 88 android:id="@+id/iv_setting" 89 android:layout_width="wrap_content" 90 android:layout_height="wrap_content" 91 android:src="@drawable/tab_settings_normal" /> 92 93 <TextView 94 android:id="@+id/tv_setting" 95 android:layout_width="wrap_content" 96 android:layout_height="wrap_content" 97 android:layout_marginTop="3dp" 98 android:text="设置" 99 android:textColor="#ffffff" 100 android:textStyle="bold" /> 101 LinearLayout> 102 103 LinearLayout>
View Code
activity_main.xml（主布局，引入上下布局）
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <include layout="@layout/activity_top" /> 8 9 <android.support.v4.view.ViewPager 10 android:id="@+id/vp_content" 11 android:layout_width="match_parent" 12 android:background="#ffffff" 13 android:layout_height="0dp" 14 android:layout_weight="1" > 15 android.support.v4.view.ViewPager> 16 17 <include layout="@layout/activity_bottom" /> 18 19 LinearLayout>
View Code
page_01.xml-page_04.xml(4个ViewPager的滑动界面，由于内容简单这里只给出其中1个)
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent"> 5 6 <TextView 7 android:layout_width="wrap_content" 8 android:layout_height="wrap_content" 9 android:layout_centerInParent="true" 10 android:text="我是微信首页" 11 android:textSize="30dp" /> 12 13 RelativeLayout>
View Code
具体实现代码：
ViewPager适配器（关于ViewPager的使用方法这里就不多说了，不清楚的朋友看我这篇文章吧《安卓开发笔记——ViewPager组件（仿微信引导界面）》）
1 package com.rabbit.tabdemo; 2 3 import java.util.List; 4 5 import android.support.v4.view.PagerAdapter; 6 import android.view.View; 7 import android.view.ViewGroup; 8 /** 9 * ViewPager适配器 10 * @author Balla_兔子 11 * 12 */ 13 public class ContentAdapter extends PagerAdapter { 14 15 private List views; 16 17 public ContentAdapter(List views) { 18 this.views = views; 19 } 20 21 @Override 22 public int getCount() { 23 return views.size(); 24 } 25 26 @Override 27 public boolean isViewFromObject(View arg0, Object arg1) { 28 return arg0 == arg1; 29 } 30 31 @Override 32 public Object instantiateItem(ViewGroup container, int position) { 33 View view = views.get(position); 34 container.addView(view); 35 return view; 36 } 37 38 @Override 39 public void destroyItem(ViewGroup container, int position, Object object) { 40 container.removeView(views.get(position)); 41 } 42 43 }
相关图片
相关文章
