Android仿微信主界面设计

<menu xmlns:android="http://schemas.android.com/apk/res/android" tools:context=".MainActivity"> <item  android:id="@+id/action_search"  android:actionViewClass="android.widget.SearchView"  android:icon="@drawable/actionbar_search_icon"  android:showAsAction="always|collapseActionView"  android:title="@string/action_search"  /> <item  android:id="@+id/action_add"  android:actionProviderClass="develop.niuli.com.weixin.PlusActionProvider"  android:icon="@drawable/actionbar_add_icon"  android:showAsAction="always"  android:title="@string/action_add"  /> <!--在这里设置菜单.然后自定义一个menu --> <item  android:id="@+id/action_btn01"  android:icon="@drawable/abc_ic_menu_moreoverflow_mtrl_alpha"  android:orderInCategory="2"  android:title="更多"  android:showAsAction="always"> <menu> <item   android:id="@+id/action_photo"  android:icon="@drawable/ofm_photo_icon"  android:title="@string/action_photo"  android:showAsAction="never"  /> <item  android:id="@+id/action_connection"  android:icon="@drawable/ofm_collect_icon"  android:title="@string/action_connection"  android:showAsAction="never"  /> <item  android:id="@+id/action_card"  android:icon="@drawable/ofm_card_icon"  android:title="@string/action_card"  android:showAsAction="never"  /> <item  android:id="@+id/action_settings"  android:icon="@drawable/ofm_setting_icon"  android:title="@string/action_settings"  android:showAsAction="never"   /> <item  android:id="@+id/action_feed"  android:icon="@drawable/ofm_feedback_icon"  android:title="@string/action_feed"  android:showAsAction="never"  /> </menu></item></menu>

/** *主要用于模仿微信上+号实现的菜单 */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; }}

<resources> <!-- 这里可以使用官方的编译器来设置,具体还要再次学习--> <style name="App_Theme" parent="@android:style/Theme.Holo.Light">  <!-- Customize your theme here. -->  <item name="android:actionBarStyle">@style/wexinActionBar</item>  <item name="android:itemBackground">@drawable/actionbar_bg_selector</item>  <item name="android:actionBarItemBackground">@drawable/actionbar_bg_selector</item>  <item name="android:itemTextAppearance">@style/WeChatActionBarTitleText</item>  <item name="android:actionOverflowButtonStyle">@style/WeChatActionButtonOverflow</item> </style> <style name="wexinActionBar" parent="@android:style/Widget.Holo.ActionBar">  <item name="android:background">#303537</item>  <item name="android:titleTextStyle">@style/WeChatActionBarTitleText</item> </style> <style name="WeChatActionBarTitleText" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">  <item name="android:textColor">#cfcfcf</item>  <item name="android:textSize">17sp</item> </style> <style name="WeChatActionButtonOverflow" parent="android:style/Widget.Holo.ActionButton.Overflow">  <item name="android:src">@drawable/actionbar_more_icon</item> </style></resources>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" tools:context=".MainActivity"> <!--引入的类似ActionBar的一个tabs开源项目 --> <com.astuetz.PagerSlidingTabStrip  android:id="@+id/tabs"  android:layout_width="match_parent"  app:pstsShouldExpand="true"  android:layout_height="40dp"/> <android.support.v4.view.ViewPager  android:id="@+id/pagers"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:layout_below="@+id/tabs"  /></RelativeLayout>

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView  android:layout_width="match_parent"  android:layout_height="match_parent"  android:text="聊天界面"  android:gravity="center"  android:textSize="20sp"  /></FrameLayout>

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; }}

/**  * tabs栏的实例  */ private PagerSlidingTabStrip tabs; /**  * 获取当前屏幕的密度  */ private DisplayMetrics dm; /**  * 主界面的viewpager  */ 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(); } /**  * 对PagerSlidingTabStrip属性的修改  */ 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); }

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]; }}