服务器之家

服务器之家 > 正文

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

时间:2020-12-31 17:18     来源/作者: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布局部分就这么多了

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址 2020-08-12
返回顶部