android 仿微信demo————微信顶部操作栏界面实现

Posted 2021-06-29 你要永远相信光z

android 仿微信demo————微信启动界面实现

android 仿微信demo————注册功能实现（移动端）

android 仿微信demo————注册功能实现（服务端）

android 仿微信demo————登录功能实现（移动端）

android 仿微信demo————登录功能实现（服务端）

android 仿微信demo————微信主界面实现

android 仿微信demo————微信消息界面实现（移动端）

android 仿微信demo————微信消息界面实现（服务端）

android 仿微信demo————微信通讯录界面功能实现（移动端，服务端）

android 仿微信demo————微信发现界面实现

android 仿微信demo————微信顶部操作栏界面实现

android 仿微信demo————微信顶部操作栏搜索按钮实现（查询通讯录好友功能）

android 仿微信demo————微信顶部操作栏加号按钮实现（弹出子菜单）

在上一篇中实现了微信发现界面，这一篇继续完善功能，实现微信顶部操作栏界面的实现（不包括点击功能），按钮的点击功能后续在更新

文章目录

• 微信顶部状态栏界面实现
• 测试

微信顶部状态栏界面实现

在主界面那篇文章中，我们介绍过微信顶部状态栏整体界面用toolbar操作栏，搜索通过searchview,最右边的加号按钮可以用overflow实现，但我尝试一下，虽然可以实现，但是跟微信效果还是差很多，特别是最右边的单选按钮的五个子菜单特别不理想，所以我打算换一种更简单粗暴的方式实现

我们观察微信会发现，微信只有三个界面有操作栏，最后一个个人信息界面是没有，我们在前面说过换另一种方式实现，那么要怎么实现呢？

其实很简单，只要在需要添加顶部操作栏的fragment布局添加一个相对布局，里面包含一个TextView,两个单选按钮（搜索，加号），都是水平中心对齐的，为什么要用相对布局呢？

因为这样很容易指定组件相对与父容器的位置，以达到我们需要的位置

修改weixin_fragment.xml，contactlist_fragment.xml，find_fragment.xml布局
weixin_fragment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="45dp"
        android:id="@+id/title"
        android:background="#E5E5E5	"
        android:gravity="center_vertical"  >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:layout_centerInParent="true"
            android:textSize="20sp"
            android:textColor="@color/black" />
        <ImageButton
            android:id="@+id/search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@id/plus"
            android:layout_centerVertical="true"
            android:layout_marginRight="34dp"
            android:background="#E5E5E5	"
            android:onClick="search"
            android:src="@drawable/search" />
        <ImageButton
            android:id="@+id/plus"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="29dp"
            android:background="#E5E5E5	"
            android:onClick="buttonTopRight"
            android:src="@drawable/plus" />
    </RelativeLayout>
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@drawable/main_list_divider_line"
        android:dividerHeight="1.5px"
        android:layout_marginBottom="50dp">
    </ListView>
</LinearLayout>

contactlist_fragment.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"
    tools:context="com.example.wxchatdemo.MainWeixin">

    <RelativeLayout
        android:id="@+id/title"
        android:layout_width="fill_parent"
        android:layout_height="45dp"
        android:background="#E5E5E5	"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="通信录"
            android:textColor="@color/black"
            android:textSize="20sp" />

        <ImageButton
            android:id="@+id/search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginRight="34dp"
            android:layout_toLeftOf="@id/plus"
            android:background="#E5E5E5	"
            android:onClick="search"
            android:src="@drawable/search" />

        <ImageButton
            android:id="@+id/plus"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="29dp"
            android:background="#E5E5E5	"
            android:onClick="buttonTopRight"
            android:src="@drawable/plus" />
    </RelativeLayout>

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="50dp"
        android:layout_marginBottom="50dp"
        android:divider="@drawable/main_list_divider_line"
        android:dividerHeight="1.5px" />

    <com.example.wxchatdemo.SideBar
        android:id="@+id/side_bar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_marginTop="100dp"
        android:layout_marginBottom="100dp"
        android:paddingRight="10dp"
        android:textColor="@color/black"
        android:textSize="9sp" />

</RelativeLayout>

find_fragment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E0E0E0"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/title"
        android:layout_width="fill_parent"
        android:layout_height="45dp"
        android:background="#E5E5E5	"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="发现"
            android:textColor="@color/black"
            android:textSize="20sp" />

        <ImageButton
            android:id="@+id/search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginRight="34dp"
            android:layout_toLeftOf="@id/plus"
            android:background="#E5E5E5	"
            android:onClick="search"
            android:src="@drawable/search" />

        <ImageButton
            android:id="@+id/plus"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="29dp"
            android:background="#E5E5E5	"
            android:onClick="buttonTopRight"
            android:src="@drawable/plus" />
    </RelativeLayout>

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:divider="@drawable/find_list_divider_line"
        android:dividerHeight="1.5px" />
    
</LinearLayout>

以上代码都在fragment布局中添加了两个按钮，按钮的点击事件都在包含fragment的activity中，下面修改就是在activity中修改

在MainWeixin activity中添加两个按钮的事件处理方法
MainWeixin.java

    //搜索按钮处理事件
    public void search(View v) {
        /*跳转到微信启动页*/
        Intent intent = new Intent();
        intent.setClass(com.example.wxchatdemo.MainWeixin.this,
                com.example.wxchatdemo.Search.class);
        startActivity(intent);
    }

    //加号点击事件处理方法
    public void buttonTopRight(View v) {
        Intent intent = new Intent(com.example.wxchatdemo.MainWeixin.this,
                com.example.wxchatdemo.MainTopRightDialog.class);
        startActivity(intent);
    }

两个按钮的点击事件是在包含fragment的activity中，后续会给出，

测试

测试前把点击事件跳转的activity注释掉

测试效果