1.使用AndroidStudio新建一个包含BasicActivity的工程
为什么使用BasicActivity而不是EmptyActvity是因为BasicActivity中包含了一些对ToolBar和Menu的处理，比较方便。
新建完成之后，浮动按钮我们并不需要，可以删掉相关代码。
2.有关标题栏
我们看到微信的标题栏有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是搜索，设置app:showAsAction="ifRoom"即将这个菜单的图标显示在标题栏。我们Run'app'发现我们给每个菜单设置的图标并没有显示出来，接下来我们将通过反射，让每个菜单都显示图标
@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,"发起群聊");
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);
}
这样我们完成了标题栏的所有功能，但是我们发现有一个小问题，就是我们的右上角的小图标显示的三个点的小图标，这个我尝试了很多种方法都没有解决，如果有哪位朋友知道替换这个图标的方法请一定告诉我。
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.内容区域
我们写四个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中，然后我们为ViewPager设置FragmentPagerAdapter，并为Adapter设置setOnPageChangeListener，获取当前显示的页面，并将底部导航栏图标切换至相应颜色，在点击底部导航栏按钮时切换当前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();
/**
* 设置图片为亮色,切换内容区域
*/
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);
}
到这里我们模仿微信主界面的工作已经完成了，当然我们也可以在进入这个主界面之前做一个账号验证
网友评论