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

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

猜你喜欢