安卓项目——类似微信界面设计

课程主旨

在这周的安卓开发课程中，学习了类似微信的界面设计。学会了微信界面布局，fragment的转化，全局自定义事件监听转化等。

大体编码过程

界面编写

如图包括：

• top模块：包含微信应用名
• bottom模块：包含微信、朋友、通讯录、设置按钮
• fragment模块：包含4个不同的页面
• main模块：将top-fragment-bottom组合在一起

编写fragment模块

如图包括：

• contactFragment 通讯录的继承fragment类
• frdFragment朋友的继承fragment类
• settingFragment设置的继承fragment类
• weixinFragment微信的继承fragment类

编写监听函数

• 如上图的MainActivity活动来实现

代码实现

源码在：github的源码地址
ps：https://github.com/DeltaViv/android

在这次课程中最主要的就是MainActivity中的内容：

package com.example.maibenben.mywechat;

import android.app.Fragment;
import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements View.OnClickListener{
    private Fragment nTab01b = new weixinFragment();  //这个之前犯错误了（V4的原因）
    private Fragment nTab02b = new frdFragment();
    private Fragment nTab03b = new contactFragment();
    private Fragment nTab04b = new settingFragment();

    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAdd;
    private LinearLayout mTabSet;
    private ImageButton mImgWeixin;
    private ImageButton mImgFrd;
    private ImageButton mImgAdd;
    private ImageButton mImgSet;

    private FragmentManager fm;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initFragment();
        iniEvent();
        selectFragment(0);
    }
    private void initFragment(){
    	// 将所有碎片添加到transaction中，这里主要是fm获得对象，其他可不要
        fm = getFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.add(R.id.id_content, nTab01b);
        transaction.add(R.id.id_content, nTab02b);
        transaction.add(R.id.id_content, nTab03b);
        transaction.add(R.id.id_content, nTab04b);
        transaction.commit();
    }

    private void selectFragment(int i){
    	// 关键代码，将所选择的碎片展现，其他隐藏，最后将按钮图片展现出来
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(nTab01b);
                resetimg();
                mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                transaction.show(nTab02b);
                resetimg();
                mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                transaction.show(nTab03b);
                resetimg();
                mImgAdd.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                transaction.show(nTab04b);
                resetimg();
                mImgSet.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }
    private void hideFragment(FragmentTransaction transaction){
    	// 隐藏所有碎片
        transaction.hide(nTab01b);
        transaction.hide(nTab02b);
        transaction.hide(nTab03b);
        transaction.hide(nTab04b);
    }
    private void initView(){
    	// 将界面中的linearLayout取出,方便后续监听
        mTabWeixin = (LinearLayout)findViewById(R.id.id_tab_weixin);
        mTabFrd = (LinearLayout)findViewById((R.id.id_tab_friend));
        mTabAdd = (LinearLayout)findViewById((R.id.id_tab_address));
        mTabSet = (LinearLayout)findViewById((R.id.id_tab_setting));

        mImgWeixin = (ImageButton)findViewById(R.id.imageButton1);
        mImgFrd = (ImageButton)findViewById(R.id.imageButton2);
        mImgAdd = (ImageButton)findViewById(R.id.imageButton3);
        mImgSet = (ImageButton)findViewById(R.id.imageButton4);
    }

    @Override
    public void onClick(View view) {
    	// 这里是全局监听（全局被局限到特定的对象里）
        switch (view.getId()){
            case R.id.id_tab_weixin:
                selectFragment(0);
                break;
            case R.id.id_tab_friend:
                selectFragment(1);
                break;
            case R.id.id_tab_address:
                selectFragment(2);
                break;
            case R.id.id_tab_setting:
                selectFragment(3);
                break;
            default:
                break;
        }
    }

    public void resetimg(){
        mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
        mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
        mImgAdd.setImageResource(R.drawable.tab_address_normal);
        mImgSet.setImageResource(R.drawable.tab_settings_normal);
    }

    private void iniEvent(){
    	// 局限全局监听，以免速度太慢
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAdd.setOnClickListener(this);
        mImgSet.setOnClickListener(this);
    }
}

出现的问题

向下兼容时版本错误

导入的是support.v4，而不是android.app.fragment

解决的办法是：

import android.app.Fragment;
import android.support.v4.app.Fragment;（删去）

控件点击时的响应问题

由于我们将事件监听放在LinearLayout上，所以我们要对其中的imageview与textview中的onclick设置为false

效果图