低仿微信

╰半橙微兮° 2022-06-18 02:52 184阅读 0赞

先占坑

一、首页

![SouthEast][]

↑↑↑↑↑↑↑效果图↑↑↑↑↑↑↑↑↑

先粗略设计一下布局：  
1. 分为头部+消息列表+底部三个部分；  
2. 最外层使用PercentRelativeLayout，头部使用一个toolbar，消息列表使用ListView/RecyclerView，底部使用4个item，每个item包含一个imageview和一个textview

布局文件：

<?xml version="1.0" encoding="utf-8"?>
    <android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.lfc.wechat.MainActivity">
    
        <android.support.v7.widget.Toolbar
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="@color/colorPrimaryDark"
            app:layout_heightPercent="8%"
            app:titleTextColor="#fff">
    
        </android.support.v7.widget.Toolbar>
    
    
        <LinearLayout
            android:id="@+id/footer"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:background="@color/colorPrimary"
            android:orientation="horizontal"
            android:weightSum="100"
            app:layout_heightPercent="8.4%">
    
            <include
                android:id="@+id/tag_chats"
                layout="@layout/item_tag" />
    
            <include
                android:id="@+id/tag_contacts"
                layout="@layout/item_tag" />
    
            <include
                android:id="@+id/tag_discover"
                layout="@layout/item_tag" />
    
            <include
                android:id="@+id/tag_me"
                layout="@layout/item_tag" />
        </LinearLayout>
    
        <ListView
            android:id="@+id/list_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@id/footer"
            android:layout_below="@id/header" />
    
    </android.support.percent.PercentRelativeLayout>

布局的框架出来了；  
  
头部：  
在微信中，头部有两个按钮，一个搜索，一个+号，点击+号会显示一个overflow menu；  
  
首先新建一个menu资源文件：

<?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
        <item
            android:id="@+id/menu_search"
            android:icon="@drawable/search_light_middle"
            android:title="search"
            app:showAsAction="always" />
    
        <item
            android:id="@+id/menu_new_chat"
            android:icon="@drawable/chat_center_thin"
            android:title="New Chat" />
        <item
            android:id="@+id/menu_add_contacts"
            android:icon="@drawable/add_contact_center_thin"
            android:title="Add Contacts" />
        <item
            android:id="@+id/menu_scan_qr_code"
            android:icon="@drawable/scan_qr_code_thin"
            android:title="Scan QR Code" />
        <item
            android:id="@+id/Money"
            android:icon="@drawable/money_thin"
            android:title="Money" />
        <item
            android:id="@+id/menu_help_and_feedback"
            android:icon="@drawable/help_and_feedback_thin"
            android:title="Help & Feedback" />
    </menu>

这样的话，头部会显示一个搜索按钮，和一个三点按钮，点击三点会显示overflow menu，包含了剩下的item；  
接下来需要做3点：  
1. 将三点替换成+号：  
在style.xml中加入：

然后在应用的theme中加入：

<item name="actionOverflowButtonStyle">@style/MyOverflowButtonStyle</item>

这样默认三点图标就换成了自定义的图片了；

2. 此时overflow menu会覆盖在toolbar之上，应使其不覆盖：  
自定义OverFlowStyle，将其android:overlapAnchor设为false

然后在theme中添加一句：

<item name="actionOverflowMenuStyle">@style/OverFlowStyle</item>

这样overflow menu的style就设置完毕了。  
  
3. 显示overflow menu中的图标：  
使用反射，调用MenuBuilder中的setOptionalIconsVisible方法，传入true则显示menu中的图片了。  
重写Activity中的onPrepareOptionsMenu方法：

@Override
        public boolean onPrepareOptionsMenu(Menu menu) {
            if (menu!=null){
                if (menu.getClass().getSimpleName().equals("MenuBuilder")){
                    try {
                        Method m=menu.getClass().getDeclaredMethod("setOptionalIconsVisible",Boolean.TYPE);
                        m.invoke(menu,true);
                    } catch (NoSuchMethodException | InvocationTargetException | IllegalAccessException e) {
                        e.printStackTrace();
                    }
                }
            }
            return super.onPrepareOptionsMenu(menu);
        }

通过查看MenuBuilder源码，发现其实setOptionalIconsVisible是一个public方法，尝试直接调用：

if (menu != null) {
                ((MenuBuilder) menu).setOptionalIconsVisible(true);
            }

结果和通过反射一样。

待续

[SouthEast]: /images/20220618/161f20fbed5d43ba99a16d4734ae8f08.png