android微信5.0版本的UI架构分析和源码样例.

       记得微信相对于5.0之前的老版本的UI框架设计是：   界面从上到下依次 界面header, 界面内容， 界面footer.  界面header( 通过客制化LinerLayout实现 ) 从左到右依次是左上角back 按钮， 中间部分标题栏,   右上角是一个业务按钮(完成， 取消等),    footer由三个tab按钮组成 ！  从技术层面看，　是由FragmentTabHost+Fragment+自己画的Header组成. 

       不记得是4.0还是5.0以后微信突然改为整个UI为：界面的header , 界面的内容  (没有footer 了!).    界面的header从左到右依次是导航按钮，紧接着是标题, 后面是业务按钮和业务可选菜单 !!        

       why ....

      刚更新完微信后， 我还在微信朋友圈中发表微信新版本UI多么的丑， 不好...  自从我把公司的类似旧版本微信UI的应用改版为类似新版本微信的UI版本后， 觉得我当时的想法是多么的幼稚。 

      不急， 问你一个比较现实的问题，　你就知道微信新版本UI的妙处了． 　如果业务进行了大幅度的扩展， 需要添加10个，20个按钮， 并且能让用户快速找到，  请问FragmentTabHost的UI风格你如何设计？加20个tab？　旧版本UI的header是画的， 左右角各放一个按钮还是比较合适的， 如果放了3个或4个就显得非常臃肿。 有些人会说， 将右角的按钮做成浮动的菜单啊！　嗯，对。但是别忘了android3.0后的optionMenue就已经改成actionbar上的浮动菜单了， 为什么还要自己费力气造轮子？ 

      这种UI设计框架完全符合不断增加的业务变化的需求， 有非常好的灵活性和可扩展性 !   看了一下android官方的原生态的应用, 比如联系人， 邮件， 通话记录， 图库等等基本都是用的这个框架！ 哈哈， 莫非微信是效仿官方的应用的吗？　　总之这是一个非常好的UI应用框架，　值得我们去学习！　

　

　最后从技术层面说一下这个UI的框架的组成： ActionBar + OptionMenue +ActionBar.Tab + FragmentPagerAdapter+Fragment.  如果要兼容android2.1版本,则需要用到官方的兼容低版本支持包support.v4和support.v7.  support.v4提供了FragmentActivity组件, support.v7提供了ActionBarActivity,  因为ActionBarActivity继承了FragmentActivity, 所以这两个jar包要同时用.

我特上传了一下android原生态应用通话记录的源码给大家， 主要是看一下这个类的处理逻辑com.android.dialer.calllog.CallLogActivity， 大家一定会顿然大悟 ！ 若上面有不对的地方请大家斧正， 谢谢.

下载地址：http://download.csdn.net/detail/gridlayout/6774981

CallLogActivity 完整源码：

/*

 * Copyright (C) 2013 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package com.android.dialer.calllog;


import android.app.ActionBar;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.ActionBar.Tab;
import android.app.ActionBar.TabListener;
import android.app.FragmentTransaction;
import android.content.Intent;
import android.os.Bundle;
import android.provider.CallLog.Calls;
import android.support.v13.app.FragmentPagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.style.TypefaceSpan;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;


import com.android.dialer.DialtactsActivity;
import com.android.dialer.R;
import com.android.dialer.calllog.CallLogFragment;


public class CallLogActivity extends Activity {


    private ViewPager mViewPager;
    private ViewPagerAdapter mViewPagerAdapter;
    private CallLogFragment mAllCallsFragment;
    private CallLogFragment mMissedCallsFragment;


    private static final int TAB_INDEX_ALL = 0;
    private static final int TAB_INDEX_MISSED = 1;


    private static final int TAB_INDEX_COUNT = 2;


    public class ViewPagerAdapter extends FragmentPagerAdapter {
        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }


        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case TAB_INDEX_ALL:
                    mAllCallsFragment = new CallLogFragment(CallLogQueryHandler.CALL_TYPE_ALL);
                    return mAllCallsFragment;
                case TAB_INDEX_MISSED:
                    mMissedCallsFragment = new CallLogFragment(Calls.MISSED_TYPE);
                    return mMissedCallsFragment;
            }
            throw new IllegalStateException("No fragment at position " + position);
        }


        @Override
        public int getCount() {
            return TAB_INDEX_COUNT;
        }
    }


    private final TabListener mTabListener = new TabListener() {
        @Override
        public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        }


        @Override
        public void onTabSelected(Tab tab, FragmentTransaction ft) {
            if (mViewPager != null && mViewPager.getCurrentItem() != tab.getPosition()) {
                mViewPager.setCurrentItem(tab.getPosition(), true);
            }
        }


        @Override
        public void onTabReselected(Tab tab, FragmentTransaction ft) {
        }
    };


    private final OnPageChangeListener mOnPageChangeListener = new OnPageChangeListener() {


        @Override
        public void onPageScrolled(
                int position, float positionOffset, int positionOffsetPixels) {}


        @Override
        public void onPageSelected(int position) {
            final ActionBar actionBar = getActionBar();
            actionBar.selectTab(actionBar.getTabAt(position));
        }


        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    };


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


        setContentView(R.layout.call_log_activity);


        final ActionBar actionBar = getActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        actionBar.setDisplayShowHomeEnabled(true);
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setDisplayShowTitleEnabled(true);


        final Tab allTab = actionBar.newTab();
        final String allTitle = getString(R.string.call_log_all_title);
        allTab.setContentDescription(allTitle);
        allTab.setText(allTitle);
        allTab.setTabListener(mTabListener);
        actionBar.addTab(allTab);


        final Tab missedTab = actionBar.newTab();
        final String missedTitle = getString(R.string.call_log_missed_title);
        missedTab.setContentDescription(missedTitle);
        missedTab.setText(missedTitle);
        missedTab.setTabListener(mTabListener);
        actionBar.addTab(missedTab);


        mViewPager = (ViewPager) findViewById(R.id.call_log_pager);
        mViewPagerAdapter = new ViewPagerAdapter(getFragmentManager());
        mViewPager.setAdapter(mViewPagerAdapter);
        mViewPager.setOnPageChangeListener(mOnPageChangeListener);
        mViewPager.setOffscreenPageLimit(1);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        final MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.call_log_options, menu);
        return true;
    }


    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        final MenuItem itemDeleteAll = menu.findItem(R.id.delete_all);


        // If onPrepareOptionsMenu is called before fragments loaded. Don't do anything.
        if (mAllCallsFragment != null && itemDeleteAll != null) {
            final CallLogAdapter adapter = mAllCallsFragment.getAdapter();
            itemDeleteAll.setVisible(adapter != null && !adapter.isEmpty());
        }
        return true;
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                final Intent intent = new Intent(this, DialtactsActivity.class);
                intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(intent);
                return true;
            case R.id.delete_all:
                ClearCallLogDialog.show(getFragmentManager());
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

推荐一篇文章：

一个草根程序员创业之路的所感所悟-2016