Android仿UC底部菜单栏实现原理与代码

前端技术 2023/09/07 Android
相关的链接：
Android 底部菜单栏实现

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

一、先主界面xml
activity_main.xml
复制代码 代码如下:

<RelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"
xmlns:tools=\"http://schemas.android.com/tools\"
android:layout_width=\"match_parent\"
android:layout_height=\"match_parent\"
android:background=\"@drawable/bg\"
tools:context=\".MainActivity\" >
<Button
android:id=\"@+id/btn_menu\"
android:layout_width=\"wrap_content\"
android:layout_height=\"wrap_content\"
android:layout_alignParentTop=\"true\"
android:layout_centerHorizontal=\"true\"
android:text=\"show/hide Menu\" />
<LinearLayout
android:layout_width=\"match_parent\"
android:layout_height=\"wrap_content\"
android:layout_below=\"@+id/btn_menu\"
android:gravity=\"center\"
android:orientation=\"horizontal\" >
<com.example.myMenu.MyImgBtn
android:id=\"@+id/main_btn1\"
android:layout_width=\"0dp\"
android:layout_height=\"wrap_content\"
android:layout_margin=\"15dp\"
android:layout_weight=\"1\" />
<com.example.myMenu.MyImgBtn
android:id=\"@+id/main_btn2\"
android:layout_width=\"0dp\"
android:layout_height=\"wrap_content\"
android:layout_margin=\"15dp\"
android:layout_weight=\"1\" />
<com.example.myMenu.MyImgBtn
android:id=\"@+id/main_btn3\"
android:layout_width=\"0dp\"
android:layout_height=\"wrap_content\"
android:layout_margin=\"15dp\"
android:layout_weight=\"1\" />
<com.example.myMenu.MyImgBtn
android:id=\"@+id/main_btn4\"
android:layout_width=\"0dp\"
android:layout_height=\"wrap_content\"
android:layout_margin=\"15dp\"
android:layout_weight=\"1\" />
</LinearLayout>
<RelativeLayout
android:id=\"@+id/layout_menu\"
android:layout_width=\"match_parent\"
android:layout_height=\"200dp\"
android:layout_alignParentBottom=\"true\" >
<LinearLayout
android:id=\"@+id/menu\"
android:layout_width=\"match_parent\"
android:layout_height=\"40dp\"
android:background=\"#dd000000\"
android:gravity=\"center\" >
<TextView
android:id=\"@+id/tv_main\"
android:layout_width=\"0dp\"
android:layout_height=\"wrap_content\"
android:layout_weight=\"1\"
android:gravity=\"center\"
android:text=\"常用\"
android:textColor=\"#ffffffff\" />
<TextView
android:id=\"@+id/tv_utils\"
android:layout_width=\"0dp\"
android:layout_height=\"wrap_content\"
android:layout_weight=\"1\"
android:gravity=\"center\"
android:text=\"工具\"
android:textColor=\"#ffffffff\" />
<TextView
android:id=\"@+id/tv_set\"
android:layout_width=\"0dp\"
android:layout_height=\"wrap_content\"
android:layout_weight=\"1\"
android:gravity=\"center\"
android:text=\"设置\"
android:textColor=\"#ffffffff\" />
</LinearLayout>
<LinearLayout
android:id=\"@+id/layout_anim\"
android:layout_width=\"fill_parent\"
android:layout_height=\"wrap_content\"
android:layout_below=\"@+id/menu\"
android:background=\"#eeff8c00\" >
<ImageView
android:id=\"@+id/iv_cursor\"
android:layout_width=\"fill_parent\"
android:layout_height=\"wrap_content\"
android:scaleType=\"matrix\"
android:src=\"@drawable/img_cursor\" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id=\"@+id/myPager\"
android:layout_width=\"wrap_content\"
android:layout_height=\"wrap_content\"
android:layout_below=\"@+id/layout_anim\"
android:flipInterval=\"30\"
android:persistentDrawingCache=\"animation\" />
</RelativeLayout>
</RelativeLayout>

ViewPager中的三个选项卡xml
view_main.xml,view_set.xml,view_utils.xml
复制代码 代码如下:

<?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:background=\"#77ff0000\"
android:orientation=\"vertical\" >
<GridView
android:id=\"@+id/myGridView\"
android:layout_width=\"match_parent\"
android:layout_height=\"match_parent\"
android:numColumns=\"4\"
android:layout_margin=\"10dp\"
android:horizontalSpacing=\"20dp\"
android:gravity=\"center\"
android:verticalSpacing=\"20dp\"
></GridView>
</LinearLayout>

这是选项卡一view_main.xml，后面的两个和这个一样，就不发了
最后就是还有一个GirdView的适配器xml
复制代码 代码如下:

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<RelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"
xmlns:tools=\"http://schemas.android.com/tools\"
android:layout_width=\"match_parent\"
android:layout_height=\"match_parent\" >
<ImageView
android:id=\"@+id/imgbtn_img\"
android:layout_width=\"wrap_content\"
android:layout_height=\"wrap_content\"
android:layout_centerHorizontal=\"true\"
/>
<TextView
android:id=\"@+id/imgbtn_text\"
android:layout_width=\"wrap_content\"
android:layout_height=\"wrap_content\"
android:layout_below=\"@+id/imgbtn_img\"
android:layout_centerHorizontal=\"true\"
android:text=\"Text\"
android:textColor=\"#ff0000ff\"
android:textSize=\"10sp\" />
</RelativeLayout>

xml布局部分就这么多了

本文地址：https://www.stayed.cn/item/18597

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案