仿UC底部菜单栏实例教程

移动开发 Android
最近刚看完ViewPager,就想到做这样一个Demo,当然也参考了高手们的实例,里边的网格菜单,开始我打算用自定义的imgBtn,但是发现放在pager选项卡中不好排版,所以最好选了GridView,简单实用。

效果图:

先主界面xml

activity_main.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="match_parent" 
  5.     android:background="@drawable/bg" 
  6.     tools:context=".MainActivity" > 
  7.     <Button 
  8.         android:id="@+id/btn_menu" 
  9.         android:layout_width="wrap_content" 
  10.         android:layout_height="wrap_content" 
  11.         android:layout_alignParentTop="true" 
  12.         android:layout_centerHorizontal="true" 
  13.         android:text="show/hide Menu" /> 
  14.     <LinearLayout 
  15.         android:layout_width="match_parent" 
  16.         android:layout_height="wrap_content" 
  17.         android:layout_below="@+id/btn_menu" 
  18.         android:gravity="center" 
  19.         android:orientation="horizontal" > 
  20.         <com.example.myMenu.MyImgBtn 
  21.             android:id="@+id/main_btn1" 
  22.             android:layout_width="0dp" 
  23.             android:layout_height="wrap_content" 
  24.             android:layout_margin="15dp" 
  25.             android:layout_weight="1" /> 
  26.         <com.example.myMenu.MyImgBtn 
  27.             android:id="@+id/main_btn2" 
  28.             android:layout_width="0dp" 
  29.             android:layout_height="wrap_content" 
  30.             android:layout_margin="15dp" 
  31.             android:layout_weight="1" /> 
  32.         <com.example.myMenu.MyImgBtn 
  33.             android:id="@+id/main_btn3" 
  34.             android:layout_width="0dp" 
  35.             android:layout_height="wrap_content" 
  36.             android:layout_margin="15dp" 
  37.             android:layout_weight="1" /> 
  38.         <com.example.myMenu.MyImgBtn 
  39.             android:id="@+id/main_btn4" 
  40.             android:layout_width="0dp" 
  41.             android:layout_height="wrap_content" 
  42.             android:layout_margin="15dp" 
  43.             android:layout_weight="1" /> 
  44.     </LinearLayout> 
  45.     <RelativeLayout 
  46.         android:id="@+id/layout_menu" 
  47.         android:layout_width="match_parent" 
  48.         android:layout_height="200dp" 
  49.         android:layout_alignParentBottom="true" > 
  50.         <LinearLayout 
  51.             android:id="@+id/menu" 
  52.             android:layout_width="match_parent" 
  53.             android:layout_height="40dp" 
  54.             android:background="#dd000000" 
  55.             android:gravity="center" > 
  56.             <TextView 
  57.                 android:id="@+id/tv_main" 
  58.                 android:layout_width="0dp" 
  59.                 android:layout_height="wrap_content" 
  60.                 android:layout_weight="1" 
  61.                 android:gravity="center" 
  62.                 android:text="常用" 
  63.                 android:textColor="#ffffffff" /> 
  64.             <TextView 
  65.                 android:id="@+id/tv_utils" 
  66.                 android:layout_width="0dp" 
  67.                 android:layout_height="wrap_content" 
  68.                 android:layout_weight="1" 
  69.                 android:gravity="center" 
  70.                 android:text="工具" 
  71.                 android:textColor="#ffffffff" /> 
  72.             <TextView 
  73.                 android:id="@+id/tv_set" 
  74.                 android:layout_width="0dp" 
  75.                 android:layout_height="wrap_content" 
  76.                 android:layout_weight="1" 
  77.                 android:gravity="center" 
  78.                 android:text="设置" 
  79.                 android:textColor="#ffffffff" /> 
  80.         </LinearLayout> 
  81.         <LinearLayout 
  82.             android:id="@+id/layout_anim" 
  83.             android:layout_width="fill_parent" 
  84.             android:layout_height="wrap_content" 
  85.             android:layout_below="@+id/menu" 
  86.             android:background="#eeff8c00" > 
  87.             <ImageView 
  88.                 android:id="@+id/iv_cursor" 
  89.                 android:layout_width="fill_parent" 
  90.                 android:layout_height="wrap_content" 
  91.                 android:scaleType="matrix" 
  92.                 android:src="@drawable/img_cursor" /> 
  93.         </LinearLayout> 
  94.         <android.support.v4.view.ViewPager 
  95.             android:id="@+id/myPager" 
  96.             android:layout_width="wrap_content" 
  97.             android:layout_height="wrap_content" 
  98.             android:layout_below="@+id/layout_anim" 
  99.             android:flipInterval="30" 
  100.             android:persistentDrawingCache="animation" /> 
  101.     </RelativeLayout> 
  102. </RelativeLayout> 

ViewPager中的三个选项卡xml

  1. view_main.xml,view_set.xml,view_utils.xml 
  2.  
  3. <?xml version="1.0" encoding="utf-8"?> 
  4. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  5.     android:layout_width="match_parent" 
  6.     android:layout_height="match_parent" 
  7.     android:background="#77ff0000" 
  8.     android:orientation="vertical" > 
  9.     
  10.     <GridView 
  11.         android:id="@+id/myGridView" 
  12.         android:layout_width="match_parent" 
  13.         android:layout_height="match_parent" 
  14.         android:numColumns="4" 
  15.         android:layout_margin="10dp" 
  16.         android:horizontalSpacing="20dp" 
  17.         android:gravity="center" 
  18.         android:verticalSpacing="20dp" 
  19.         ></GridView> 
  20.  
  21. </LinearLayout> 

这是选项卡一view_main.xml,后面的两个和这个一样。

最后就是还有一个GirdView的适配器xml

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     xmlns:tools="http://schemas.android.com/tools" 
  4.     android:layout_width="match_parent" 
  5.     android:layout_height="match_parent" > 
  6.     <ImageView 
  7.         android:id="@+id/imgbtn_img" 
  8.         android:layout_width="wrap_content" 
  9.         android:layout_height="wrap_content" 
  10.         android:layout_centerHorizontal="true" 
  11.        
  12.        /> 
  13.  
  14.     <TextView 
  15.         android:id="@+id/imgbtn_text" 
  16.         android:layout_width="wrap_content" 
  17.         android:layout_height="wrap_content" 
  18.         android:layout_below="@+id/imgbtn_img" 
  19.         android:layout_centerHorizontal="true" 
  20.         android:text="Text" 
  21.         android:textColor="#ff0000ff" 
  22.         android:textSize="10sp" /> 
  23.     
  24. </RelativeLayout> 
xml布局部分就这么多了。
责任编辑:徐川 来源: cnblogs
相关推荐

2011-06-30 17:01:43

Qt Creator 菜单栏

2009-09-18 11:44:05

Scala实例教程Kestrel

2014-08-26 11:46:46

QtAndroid实例教程

2019-06-17 15:25:17

expandunexpandLinux

2010-08-17 11:02:45

DIV CSS实例教程

2009-09-24 08:31:22

Windows 7菜单栏管理

2010-03-04 09:01:12

Windows 7隐藏开始菜单

2009-09-17 08:30:57

Windows 7隐藏菜单栏

2013-01-04 16:17:33

Android开发图像特效图像处理

2009-09-08 14:18:35

NFS服务器

2010-08-06 14:58:42

FlexAIR

2011-07-25 16:03:47

XCode 编译

2010-08-25 17:08:18

实例教程

2009-07-30 14:18:02

ASP.NET实例教程

2015-10-12 16:54:02

账户名技巧OS X

2013-08-15 09:14:55

2013-07-25 14:44:48

sqlite实例教程iOS开发学习sqlite打造词典

2010-06-18 15:55:47

UML建模

2015-09-01 17:09:41

uc浏览器源码

2011-07-21 17:00:59

iPhone UIWebView Status Cod
点赞
收藏

51CTO技术栈公众号