AndroidStudio使用之实现微信首页界面

@[TOC]AndroidStudio使用之实现微信首页界面

AndroidStudio使用之实现微信首页界面

详细分析介绍AS实现微信首页的流程，并附有源码

界面分析

我们对微信首页做一个分析，看需要几个.xml文件：
如图，我们一共需要7个.xml文件




其中，还需要一个将其余六个界面组合到一起的界面，也就是序号4所指。

静态界面实现（.xml）

1. top.xml
   

2. bottom.xml
   
   

3. tab01.xml
   

4. activity_main.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:orientation="vertical">

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

    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">


    </FrameLayout>

    <include layout="@layout/bottom"></include>
</LinearLayout>

界面动态实现

目录结构

这里主要运用了Fragment

Fragment的优势有以下几点：
模块化（Modularity）：我们不必把所有代码全部写在Activity中，而是把代码写在各自的Fragment中。
可重用（Reusability）：多个Activity可以重用一个Fragment。
可适配（Adaptability）：根据硬件的屏幕尺寸、屏幕方向，能够方便地实现不同的布局，这样用户体验更好。
作者：JYGod丶
链接：https://www.jianshu.com/p/11c8ced79193

接下来就是初始化界面与事件启动
分析界面实现效果，例如当点击某一导航键时，跳转到该界面主页面，同时除该导航键，其余导航键变暗

#关键代码

public class MainActivity extends Activity implements View.OnClickListener {
   
//    weixinFragment mTab01;
//    frdFragment mTab02;
//    contactsFragment mTab03;
//    settingsFragment mTab04;
    private LinearLayout mTabWeiXin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabContacts;
    private LinearLayout mTabSettings;

    private ImageButton mImgWeiXin;
    private ImageButton mImgFrd;
    private ImageButton mImgContacts;
    private ImageButton mImgSettings;

    private Fragment mTab01=new weixinFragment();
    private Fragment mTab02=new frdFragment();