Android仿微信主界面设计

先来一张效果图

一.ActionBar的设计

首先是main.xml,先定义这些菜单,界面稍后在调整

1.android:actionViewClass="android.widget.SearchView"调用系统的搜索栏样式,
2.android:showAsAction="always|collapseActionView"使其可以铺满整个ActionBar.这样就能模仿出微信的效果了
3.再者overflow里面的带图标+title效果,需要自定义一个item包裹一个单独的menu,这样的话就不需要用代码就能实现图标+title的效果
4.android:actionProviderClass="develop.niuli.com.weixin.PlusActionProvider"这个使用的ActionProvider,也就相当于自定义另一个菜单实现加号功能,而PlusActionProvider是自己单独写的一个类

public class PlusActionProvider extends ActionProvider {

 private Context context;
 public PlusActionProvider(Context context) {
  super(context);
  this.context = context;
 }

 @Override
 public View onCreateActionView() {
  return null;
 }

 @Override
 public void onPrepareSubMenu(SubMenu subMenu) {
  //移除已经存在的项
  subMenu.clear();
  //为菜单添加图片和文字,并且加入监听事件
  subMenu.add(context.getString(R.string.plus_group_chat))
    .setIcon(R.drawable.ofm_group_chat_icon)
    .setonMenuItemClickListener(new MenuItem.onMenuItemClickListener() {
     @Override
     public boolean onMenuItemClick(MenuItem item) {
      return false;
     }
    });
  //剩下的如法炮制就好了
  subMenu.add(context.getString(R.string.plus_add_friend))
    .setIcon(R.drawable.ofm_add_icon)
    .setonMenuItemClickListener(new MenuItem.onMenuItemClickListener() {
     @Override
     public boolean onMenuItemClick(MenuItem item) {
      return false;
     }
    });
  subMenu.add(context.getString(R.string.plus_video_chat))
    .setIcon(R.drawable.ofm_video_icon)
    .setonMenuItemClickListener(new MenuItem.onMenuItemClickListener() {
     @Override
     public boolean onMenuItemClick(MenuItem item) {
      return false;
     }
    });
  subMenu.add(context.getString(R.string.plus_scan))
    .setIcon(R.drawable.ofm_qrcode_icon)
    .setonMenuItemClickListener(new MenuItem.onMenuItemClickListener() {
     @Override
     public boolean onMenuItemClick(MenuItem item) {
      return false;
     }
    });
  subMenu.add(context.getString(R.string.plus_take_photo))
    .setIcon(R.drawable.ofm_camera_icon)
    .setonMenuItemClickListener(new MenuItem.onMenuItemClickListener() {
     @Override
     public boolean onMenuItemClick(MenuItem item) {
      return false;
     }
    });
 }

 @Override
 public boolean hasSubMenu() {
  return true;
 }
}

这样的ActionBar基本实现了我们想要的功能,剩下的就差样式之类,所以修改Style.xml文件,AS里面也自带主题编辑器,暂时还没用到过,后期尝试

 
 
  
  @style/wexinActionBar
  @drawable/actionbar_bg_selector
  @drawable/actionbar_bg_selector
  @style/WeChatActionBarTitleText
  @style/WeChatActionButtonOverflow
 

 
  #303537
  @style/WeChatActionBarTitleText
 
 
  #cfcfcf
  17sp
 

 
  @drawable/actionbar_more_icon
 

二.主界面的设计

使用PagerSlidingTabStrip+viewpager,两者会自动适配,用起来很方便.
在main_activity.xml中配置

然后建立三个fragment布局,放入到viewpager,下面举一个例子

public class ChatFragment extends android.support.v4.app.Fragment {


 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  View view = inflater.inflate(R.layout.chatfragment_layout,container,false);
  return view;
 }
}

接下来就是在MainActivity.java中代码配置了

 private PagerSlidingTabStrip tabs;

 
 private DisplayMetrics dm;

 
 private ViewPager pagers;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  setOverflowShowingAlways();
  dm = getResources().getDisplayMetrics();
  pagers = (ViewPager) findViewById(R.id.pagers);
  tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
  //这个类要继承FragmentActivity才可以有这个方法
  pagers.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));
  tabs.setViewPager(pagers);
  setTabValue();
 }

 
 private void setTabValue(){
//  //设置tabs自动填充满整个屏幕,xml文件设置才有效果
//  tabs.setShouldExpand(true);
  //设置tabs的分割线透明
  tabs.setDividerColor(Color.TRANSPARENT);
  //设置tabs底部线的高度
  //TypedValue需要学习了解
  tabs.setUnderlineHeight((int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, 1, dm));
  // 设置Tab Indicator的高度
  tabs.setIndicatorHeight((int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, 4, dm));
  // 设置Tab标题文字的大小
  tabs.setTextSize((int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_SP, 16, dm));
  // 设置Tab Indicator的颜色
  tabs.setIndicatorColor(Color.parseColor("#45c01a"));
  // 设置选中Tab文字的颜色 (这是我自定义的一个方法)
//  tabs.setSelectedTextColor(Color.parseColor("#45c01a"));
  // 取消点击Tab时的背景色
  tabs.setTabBackground(0);
 }

可以看出来viewpager需要一个Adapter来配置其页面,而tabs需要配置viewpager,这样的话,三者就能完美的相适应.

public class ViewPagerAdapter extends FragmentPagerAdapter {

 
 private ChatFragment chatFragment;
 
 private FoungFragment foundFragment;
 
 private ContactFragment contactFragment;

 private final String[] titles = { "聊天", "发现", "通讯录" };

 public ViewPagerAdapter(FragmentManager fm) {
  super(fm);
 }

 @Override
 public Fragment getItem(int position) {
  switch (position) {
   case 0:
    if (chatFragment == null) {
     chatFragment = new ChatFragment();
    }
    return chatFragment;
   case 1:
    if (foundFragment == null) {
     foundFragment = new FoungFragment();
    }
    return foundFragment;
   case 2:
    if (contactFragment == null) {
     contactFragment = new ContactFragment();
    }
    return contactFragment;
   default:
    return null;
  }
 }

 @Override
 public int getCount() {
  return titles.length;
 }

 @Override
 public CharSequence getPageTitle(int position) {
  return titles[position];
 }
}

本文已被整理到了《Android微信开发教程汇总》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助。