@[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();
    private Fragment mTab03=new contactsFragment();
    private Fragment mTab04=new settingsFragment();

    private FragmentManager fm;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        initView();
        initFragment();
        initEvent();
        setSelect(0);  //初始值设置为0，默认weixinFragment为首页


    }

    /**
     * 事件启动函数
     * 全屏监听太耗内存
     * 限制只监听4个LinearLayout
     */
    private void initEvent(){
        mTabWeiXin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabContacts.setOnClickListener(this);
        mTabSettings.setOnClickListener(this);

    }

    private void initFragment(){
//        mTab01=new weixinFragment();
//        mTab02=new frdFragment();
//        mTab03=new contactsFragment();
//        mTab04=new settingsFragment();
        fm=getFragmentManager();
        FragmentTransaction transaction=fm.beginTransaction();
        transaction.add(R.id.id_content,mTab01);
        transaction.add(R.id.id_content,mTab02);
        transaction.add(R.id.id_content,mTab03);
        transaction.add(R.id.id_content,mTab04);
        transaction.commit();

    }

    private void initView(){
        mTabWeiXin=(LinearLayout)findViewById(R.id.id_tab_WeChat);
        mTabFrd=(LinearLayout)findViewById(R.id.id_tab_Frd);
        mTabContacts=(LinearLayout)findViewById(R.id.id_tab_Contacts);
        mTabSettings=(LinearLayout)findViewById(R.id.id_tab_Settings);

        mImgWeiXin=(ImageButton)findViewById(R.id.img_WeChat);
        mImgFrd=(ImageButton)findViewById(R.id.img_Frd);
        mImgContacts=(ImageButton)findViewById(R.id.img_Contacts);
        mImgSettings=(ImageButton)findViewById(R.id.img_Settings);

    }

    private void setSelect(int i){
        FragmentTransaction transaction=fm.beginTransaction();
        hideFragment(transaction);
        //把图片设置为亮的
        //设置内容区域
        switch (i){
            case 0:
                Log.d("setSelect","1");
                transaction.show(mTab01);
                mImgWeiXin.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                transaction.show(mTab02);
                mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                transaction.show(mTab03);
                mImgContacts.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                transaction.show(mTab04);
                mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:break;
        }
        transaction.commit();
    }


    /**
     * 将4个fragment先全部隐藏
     */
    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(mTab01);
        transaction.hide(mTab02);
        transaction.hide(mTab03);
        transaction.hide(mTab04);

    }

    public void onClick(View v){
        Log.d("onClick","2");
        resetImgs();
        switch (v.getId()){
            case R.id.id_tab_WeChat:
                setSelect(0);
                break;
            case R.id.id_tab_Frd:
                setSelect(1);
                break;
            case R.id.id_tab_Contacts:
                setSelect(2);
                break;
            case R.id.id_tab_Settings:
                setSelect(3);
                break;
             default:
                 break;
        }

    }

    /**
     * 切换图片至暗色
     */
    public void resetImgs(){
        mImgWeiXin.setImageResource(R.drawable.tab_weixin_normal);
        mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
        mImgContacts.setImageResource(R.drawable.tab_address_normal);
        mImgSettings.setImageResource(R.drawable.tab_settings_normal);

    }
}

源码下载

CSDN下载地址
https://download.csdn.net/download/bdwdwks/12251344
码云下载地址
https://gitee.com/moshangxveran/wechat_homepage.git