ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网络编程 >> Android开发 >> Android仿微信底部菜单栏+顶部菜单栏(附源码)

Android仿微信底部菜单栏+顶部菜单栏(附源码)

来源:网络整理     时间:2015-03-08     关键词:

本篇文章主要介绍了"Android仿微信底部菜单栏+顶部菜单栏(附源码)",主要涉及到方面的内容,对于Android开发感兴趣的同学可以参考一下: 林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka 本文要实现仿微...

            林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka

        本文要实现仿微信微信底部菜单栏+顶部菜单栏,采用ViewPage来做,每一个page对应一个XML,当手指在ViewPage左右滑动时,就相应显示不同的page(其实就是xml)并且同时改变底部菜单按钮的图片变暗或变亮,同时如果点击底部菜单按钮,左右滑动page(其实就是xml)并且改变相应按钮的亮度。

最终效果:源码免费下载


一、布局

1、顶部菜单布局,命名为top_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:background="@drawable/title_bar" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:text="微信"
        android:layout_centerVertical="true"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold"
        />
    <ImageButton 
        android:id="@+id/top_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/top_add"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        />
       <ImageButton 
        android:id="@+id/top_search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/top_search"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/top_add"
        />
</RelativeLayout>
效果:


2、底部菜单布局bottom_layout.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="60dp"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal" >
 
    <LinearLayout
        android:id="@+id/id_tab_weixin"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >
 <!-- android:clickable="false" 是为了防止ImageButton截取了触摸事件 ,这里事件要给它的上一级linearlayout-->
        <ImageButton
             android:id="@+id/id_tab_weixin_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_weixin_pressed" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
          />
    </LinearLayout>

    <LinearLayout
         android:id="@+id/id_tab_address"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
             android:id="@+id/id_tab_address_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
             android:clickable="false"
            android:src="@drawable/tab_address_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通讯录"
          />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_frd"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
             android:id="@+id/id_tab_frd_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
             android:clickable="false"
            android:src="@drawable/tab_find_frd_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发现"
   />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_settings"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
             android:id="@+id/id_tab_settings_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_settings_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我"
            />
    </LinearLayout>

</LinearLayout>
效果:


3、整体布局

将上面两个加到activity_main.xml中去

<LinearLayout 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:orientation="vertical" >

    <include layout="@layout/top_layout" />

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpage"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </android.support.v4.view.ViewPager>
"

    <include layout="
                
                
                

以上就介绍了Android仿微信底部菜单栏+顶部菜单栏(附源码),包括了方面的内容,希望对Android开发有兴趣的朋友有所帮助。

本文网址链接:http://www.codes51.com/article/detail_116816.html

相关图片

相关文章