1.使用AndroidStudio新建一個包含BasicActivity的工程
為什么使用BasicActivity而不是EmptyActvity是因為BasicActivity中包含了一些對ToolBar和Menu的處理，比較方便。
新建完成之后，浮動按鈕我們并不需要，可以刪掉相關(guān)代碼。
2.有關(guān)標題欄
我們看到微信的標題欄有app名稱，搜索，菜單。
我們打開menu.xml，增加如下item
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
app:showAsAction="ifRoom"
android:icon="@mipmap/actionbar_search_icon"
android:id="@+id/action_search"
android:title="@string/action_search" />
<item
android:icon="@drawable/icon_bottom"
android:id="@+id/action_group_chat"
android:title="@string/menu_group_chat" />
<item
android:icon="@drawable/icon_bottom"
android:id="@+id/action_add_friend"
android:title="@string/menu_addfriend" />
<item
android:icon="@drawable/icon_bottom"
android:id="@+id/action_scan"
android:title="@string/menu_scan" />
<item
android:icon="@drawable/icon_bottom"
android:id="@+id/action_feedback"
android:title="@string/menu_feedback" />
</menu>
第一個item是搜索，設(shè)置app:showAsAction="ifRoom"即將這個菜單的圖標顯示在標題欄。我們Run'app'發(fā)現(xiàn)我們給每個菜單設(shè)置的圖標并沒有顯示出來，接下來我們將通過反射，讓每個菜單都顯示圖標
@Override
protected boolean onPrepareOptionsPanel(View view, Menu menu) {
if (menu != null) {
if (menu.getClass() == MenuBuilder.class) {
try {
Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
m.setAccessible(true);
m.invoke(menu, true);
} catch (Exception e) {
}
}
}
return super.onPrepareOptionsPanel(view, menu);
};
接下來我們在MainActivity中捕獲菜單的點擊事件
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
switch (id){
case R.id.action_search:
PromptManager.showToast(this,"查找");
break;
case R.id.action_group_chat:
PromptManager.showToast(this,"發(fā)起群聊");
break;
case R.id.action_add_friend:
PromptManager.showToast(this,"添加朋友");
break;
case R.id.action_scan:
PromptManager.showToast(this,"掃一掃");
break;
case R.id.action_feedback:
PromptManager.showToast(this,"意見反饋");
break;
}
return super.onOptionsItemSelected(item);
}
這樣我們完成了標題欄的所有功能，但是我們發(fā)現(xiàn)有一個小問題，就是我們的右上角的小圖標顯示的三個點的小圖標，這個我嘗試了很多種方法都沒有解決，如果有哪位朋友知道替換這個圖標的方法請一定告訴我。
2.底部導航欄
我們新建bottom.xml我們使用LinearLayout水平布局，包含四個LinearLayout，每個LinearLayout里邊有一個ImageButton和一個TextView。表示底部導航欄的四個按鈕。其中一個LinearLayout如下
<LinearLayout
android:id="@+id/id_tab_weixin"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="@+id/id_tab_weixin_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/color_bottom"
android:clickable="false"
android:src="@drawable/icon_bottom_pressed" />
<TextView
android:id="@+id/id_tab_weixin_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="@color/color_bottom_text" />
</LinearLayout>
寫好之后我們把bottom.xml包含在content.xml中
<include layout="@layout/bottom" />
3.內(nèi)容區(qū)域
我們寫四個Fragment，每個Fragment表示一個界面
在content_main.xml中引入bottom.xm之前寫一個ViewPager
<android.support.v4.view.ViewPager
android:id="@+id/id_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</android.support.v4.view.ViewPager>
我們在MainActivity中new四個Fragment，并把他添加到List<Fragment>mFragments中，然后我們?yōu)閂iewPager設(shè)置FragmentPagerAdapter，并為Adapter設(shè)置setOnPageChangeListener，獲取當前顯示的頁面，并將底部導航欄圖標切換至相應(yīng)顏色，在點擊底部導航欄按鈕時切換當前Fragment
private void initView() {
mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
mTabSettings = (LinearLayout) findViewById(R.id.id_tab_settings);
mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);
mTvWeixin = (TextView) findViewById(R.id.id_tab_weixin_text);
mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);
mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img);
mImgSettings = (ImageButton) findViewById(R.id.id_tab_settings_img);
mFragments = new ArrayList<Fragment>();
Fragment mTab01 = new MainFragment();
Fragment mTab02 = new ContactsFragment();
Fragment mTab03 = new FindFragment();
Fragment mTab04 = new MineFragment();
mFragments.add(mTab01);
mFragments.add(mTab02);
mFragments.add(mTab03);
mFragments.add(mTab04);
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public int getCount() {
return mFragments.size();
}
@Override
public Fragment getItem(int arg0) {
return mFragments.get(arg0);
}
};
mViewPager.setAdapter(mAdapter);
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
int currentItem = mViewPager.getCurrentItem();
setTab(currentItem);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
return super.onOptionsItemSelected(item);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.id_tab_weixin:
setSelect(0);
break;
case R.id.id_tab_frd:
setSelect(1);
break;
case R.id.id_tab_address:
setSelect(2);
break;
case R.id.id_tab_settings:
setSelect(3);
break;
default:
break;
}
}
private void setSelect(int i) {
setTab(i);
mViewPager.setCurrentItem(i);
}
private void setTab(int i) {
resetImgs();
/**
* 設(shè)置圖片為亮色,切換內(nèi)容區(qū)域
*/
switch (i) {
case 0:
mImgWeixin.setImageResource(R.drawable.icon_bottom_pressed);
mTvWeixin.setTextColor(getResources().getColor(R.color.color_green));
break;
case 1:
mImgFrd.setImageResource(R.drawable.icon_bottom_pressed);
break;
case 2:
mImgAddress.setImageResource(R.drawable.icon_bottom_pressed);
break;
case 3:
mImgSettings.setImageResource(R.drawable.icon_bottom_pressed);
break;
}
}
/**
* 切換圖片至暗色
*/
private void resetImgs() {
mImgWeixin.setImageResource(R.drawable.icon_bottom);
mImgFrd.setImageResource(R.drawable.icon_bottom);
mImgAddress.setImageResource(R.drawable.icon_bottom);
mImgSettings.setImageResource(R.drawable.icon_bottom);
}
到這里我們模仿微信主界面的工作已經(jīng)完成了，當然我們也可以在進入這個主界面之前做一個賬號驗證
