Android仿微信主界面设计

先来一张效果图

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

<menu xmlns:android="http://schemas.android.com/apk/res/android"tools:context=".MainActivity"><itemandroid:id="@+id/action_search"android:actionViewClass="android.widget.SearchView"android:icon="@drawable/actionbar_search_icon"android:showAsAction="always|collapseActionView"android:title="@string/action_search"/><itemandroid: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 --><itemandroid: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"/><itemandroid:id="@+id/action_connection"android:icon="@drawable/ofm_collect_icon"android:title="@string/action_connection"android:showAsAction="never"/><itemandroid:id="@+id/action_card"android:icon="@drawable/ofm_card_icon"android:title="@string/action_card"android:showAsAction="never"/><itemandroid:id="@+id/action_settings"android:icon="@drawable/ofm_setting_icon"android:title="@string/action_settings"android:showAsAction="never" /><itemandroid:id="@+id/action_feed"android:icon="@drawable/ofm_feedback_icon"android:title="@string/action_feed"android:showAsAction="never"/></menu></item></menu>

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;}@Overridepublic View onCreateActionView（） {return null;}@Overridepublic 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（） {@Overridepublic 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（） {@Overridepublic 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（） {@Overridepublic boolean onMenuItemClick（MenuItem item） {return false;}}）;subMenu.add（context.getString（R.string.plus_scan））.setIcon（R.drawable.ofm_qrcode_icon）.setOnMenuItemClickListener（new MenuItem.OnMenuItemClickListener（） {@Overridepublic 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（） {@Overridepublic boolean onMenuItemClick（MenuItem item） {return false;}}）;}@Overridepublic boolean hasSubMenu（） {return true;}}

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

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

二.主界面的设计
使用PagerSlidingTabStrip+viewpager,两者会自动适配,用起来很方便.
在main_activity.xml中配置

<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.PagerSlidingTabStripandroid:id="@+id/tabs"android:layout_width="match_parent"app:pstsShouldExpand="true"android:layout_height="40dp"/><android.support.v4.view.ViewPagerandroid:id="@+id/pagers"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@+id/tabs"/></RelativeLayout>

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

<?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"><TextViewandroid: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@Overridepublic View onCreateView（LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState） {View view = inflater.inflate（R.layout.chatfragment_layout,container,false）;return view;}}

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

/** * tabs栏的实例 */private PagerSlidingTabStrip tabs;/** * 获取当前屏幕的密度 */private DisplayMetrics dm;/** * 主界面的viewpager */private ViewPager pagers;@Overrideprotected 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）;}

可以看出来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）;}@Overridepublic 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;}}@Overridepublic int getCount（） {return titles.length;}@Overridepublic CharSequence getPageTitle（int position） {return titles[position];}}

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