【高仿微信系列】01、打造自己的微信项目

本文为个人原创,欢迎转载,但请务必在明显位置注明出处!
GitHub地址:https://github.com/motianhuo/wechat

首先,微信毫无疑问已经变成全国最大的社交软件,微信已经成为人们生活中不可或缺的一部分.你是不是睡觉之前做的最后一件事是浏览一下朋友圈,早上醒来第一件事也是刷微信,甚至朋友之间已经不再交换电话号码而只保留微信号了,微信对于人们来说已经不仅仅是一种通讯工具,更成为了一种生活方式。

还记得春节,微信红包的火爆,时不时的盯着微信,生怕漏掉一个红包,还通过摇一摇抢中央春晚的红包!

另外,纵观全球,在国内外诸多社交产品中,社交领域一直是互联网创业的大热门,社交领域应用彻底爆发,进入到黄金时期。例如:中国的微信(WeChat)、美国的WhatsApp、日本的Line等。

那么,既然社交这个领域这么火,咱们也要学习一下。开发一款微信的APP,如何做呢?

好的,今天这篇文章就先介绍下,微信的导航菜单的信息架构,实现一下微信的主界面。

图片来自慕课网


移动APP中的导航菜单有:
- 列表型菜单
- 矩阵或网格型菜单
- 底部菜单
- 顶部菜单
- 展开式菜单
具体可以参考这里:移动APP中的各种导航

很显然,微信是采用底部导航形式。
高仿微信


OK,先看布局文件,activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
     <!-- 标题 -->
    <include  layout="@layout/layout_title"/>

     <!-- 内容模块 --> 
    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1" > 
    </FrameLayout> 

    <!-- 底部导航菜单 -->
      <include layout="@layout/layout_bottom"/> 
</LinearLayout>

layout_title.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="48.0dip"
    android:background="@color/bar_color" >

    <TextView
        android:id="@+id/txt_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:layout_centerInParent="true"
        android:textColor="@color/white"
        android:text="@string/app_name"  /> 
</RelativeLayout>

layout_bottom.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="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="vertical" >

    <!-- 普通底部导航 -->

    <LinearLayout
        android:id="@+id/main_bottom"
        android:layout_width="match_parent"
        android:layout_height="54dp"
        android:background="#ffffff"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <RelativeLayout
            android:id="@+id/re_weixin"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:onClick="onTabClicked"
            android:padding="3dp" >

            <RelativeLayout
                android:layout_width="60dp"
                android:layout_height="match_parent"
                android:layout_centerHorizontal="true"
                android:gravity="center" >

                <ImageView
                    android:id="@+id/ib_weixin"
                    android:layout_width="wrap_content"
                    android:layout_height="28dp"
                    android:layout_centerHorizontal="true"
                    android:background="#ffffff"
                    android:focusable="false"
                    android:scaleType="centerInside"
                    android:src="@drawable/tab_weixin" />

                <TextView
                    android:id="@+id/tv_weixin"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/ib_weixin"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="3dp"
                    android:text="微信"
                    android:textColor="#9A9A9A"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/unread_msg_number"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_marginRight="8dp"
                    android:background="@drawable/icon_tip"
                    android:gravity="center"
                    android:text="7"
                    android:textColor="@android:color/white"
                    android:textSize="12sp"
                    android:visibility="visible" />
            </RelativeLayout>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/re_contact_list"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:onClick="onTabClicked"
            android:padding="3dp" >

            <RelativeLayout
                android:layout_width="60dp"
                android:layout_height="match_parent"
                android:layout_centerHorizontal="true"
                android:gravity="center" >

                <ImageView
                    android:id="@+id/ib_contact_list"
                    android:layout_width="wrap_content"
                    android:layout_height="28dp"
                    android:layout_centerHorizontal="true"
                    android:background="#ffffff"
                    android:focusable="false"
                    android:scaleType="centerInside"
                    android:src="@drawable/tab_contact_list" />

                <TextView
                    android:id="@+id/tv_contact_list"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/ib_contact_list"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="3dp"
                    android:text="通讯录"
                    android:textColor="#9A9A9A"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/unread_address_number"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_marginRight="8dp"
                    android:background="@drawable/icon_tip"
                    android:gravity="center"
                    android:text="7"
                    android:textColor="@android:color/white"
                    android:textSize="12sp"
                    android:visibility="gone" />
            </RelativeLayout>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/re_find"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:onClick="onTabClicked"
            android:padding="3dp" >

            <RelativeLayout
                android:layout_width="60dp"
                android:layout_height="match_parent"
                android:layout_centerHorizontal="true"
                android:gravity="center" >

                <ImageView
                    android:id="@+id/ib_find"
                    android:layout_width="wrap_content"
                    android:layout_height="28dp"
                    android:layout_centerHorizontal="true"
                    android:background="#ffffff"
                    android:focusable="false"
                    android:scaleType="centerInside"
                    android:src="@drawable/tab_find" />

                <TextView
                    android:id="@+id/tv_find"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/ib_find"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="3dp"
                    android:text="发现"
                    android:textColor="#9A9A9A"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/unread_find_number"
                    android:layout_width="10dp"
                    android:layout_height="10dp"
                    android:layout_alignParentRight="true"
                    android:layout_marginRight="10dp"
                    android:background="@drawable/icon_tip"
                    android:gravity="center"
                    android:text=""
                    android:textColor="@android:color/white"
                    android:textSize="12sp"
                    android:visibility="visible" />
            </RelativeLayout>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/re_profile"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:onClick="onTabClicked"
            android:padding="3dp" >

            <ImageView
                android:id="@+id/ib_profile"
                android:layout_width="wrap_content"
                android:layout_height="28dp"
                android:layout_centerHorizontal="true"
                android:background="#ffffff"
                android:focusable="false"
                android:scaleType="centerInside"
                android:src="@drawable/tab_profile" />

            <TextView
                android:id="@+id/tv_profile"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/ib_profile"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="3dp"
                android:text="我"
                android:textColor="#9A9A9A"
                android:textSize="12sp" />
        </RelativeLayout>
    </LinearLayout> 
</LinearLayout>

再看代码文件 MainActivity的核心代码

fragments = new Fragment[] { homefragment, contactlistfragment,
                findfragment, profilefragment };
imagebuttons = new ImageView[4];
        imagebuttons[0] = (ImageView) findViewById(R.id.ib_weixin);
        imagebuttons[1] = (ImageView) findViewById(R.id.ib_contact_list);
        imagebuttons[2] = (ImageView) findViewById(R.id.ib_find);
        imagebuttons[3] = (ImageView) findViewById(R.id.ib_profile);

        imagebuttons[0].setSelected(true);
        textviews = new TextView[4];
        textviews[0] = (TextView) findViewById(R.id.tv_weixin);
        textviews[1] = (TextView) findViewById(R.id.tv_contact_list);
        textviews[2] = (TextView) findViewById(R.id.tv_find);
        textviews[3] = (TextView) findViewById(R.id.tv_profile);
        textviews[0].setTextColor(0xFF45C01A);
        // 添加4个fragment
        getSupportFragmentManager().beginTransaction()
                .add(R.id.fragment_container, homefragment)
                .add(R.id.fragment_container, contactlistfragment)
                .add(R.id.fragment_container, profilefragment)
                .add(R.id.fragment_container, findfragment) .hide(contactlistfragment).hide(profilefragment) .hide(findfragment).show(homefragment).commit();

处理菜单点击事件

public void onTabClicked(View view) {
        img_right.setVisibility(View.GONE);
        switch (view.getId()) {
        case R.id.re_weixin:
            img_right.setVisibility(View.VISIBLE);
            index = 0;
            if (homefragment != null) {
                homefragment.refresh();
            }
            txt_title.setText(connectMsg);
            img_right.setImageResource(R.drawable.icon_add);
            break;
        case R.id.re_contact_list:
            index = 1;
            txt_title.setText("通讯录");
            img_right.setVisibility(View.VISIBLE);
            img_right.setImageResource(R.drawable.icon_titleaddfriend);
            break;
        case R.id.re_find:
            index = 2;
            txt_title.setText("发现");
            break;
        case R.id.re_profile:
            index = 3;
            txt_title.setText("我");
            break;
        }
        if (currentTabIndex != index) {
            FragmentTransaction trx = getSupportFragmentManager()
                    .beginTransaction();
            trx.hide(fragments[currentTabIndex]);
            if (!fragments[index].isAdded()) {
                trx.add(R.id.fragment_container, fragments[index]);
            }
            trx.show(fragments[index]).commit();
        }
        imagebuttons[currentTabIndex].setSelected(false);
        // 把当前tab设为选中状态
        imagebuttons[index].setSelected(true);
        textviews[currentTabIndex].setTextColor(0xFF999999);
        textviews[index].setTextColor(0xFF45C01A);
        currentTabIndex = index;
    }

OK,具体代码可以去 Github (点击这里) 下载。

本系列文章会教你一步步打造自己的高仿微信APP,尽请关注本博客!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值