仿UC底部菜单栏实例教程

效果图：

先主界面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布局部分就这么多了。