Android ActionBar应用实战,高仿微信主界面的设计

转载请注明出处:

经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对较为深刻的理解了。唯一欠缺的是,前面我们都只是学习了理论知识而已,虽然知识点已经掌握了,但是真正投入到项目实战当中时会不会掉链子还很难说。那么不用担心,本篇文章我就将带领大家一起进入ActionBar的应用实战,将理论和实践完美结合到一起。

如果你还没有看过我的前两篇文章,建议先去阅读一下Android ActionBar完全解析,使用官方推荐的最佳导航栏(上)和Android ActionBar完全解析,使用官方推荐的最佳导航栏(下)。

相信大家都会认定微信是在手机上最火的应用程序了,几乎每个人的手机上都有安装它。微信除了功能非常强大之外,界面也是做得相当美观,它的ActionBar让人看着有一种赏心悦目的感觉,如下图所示:

作为手机应用程序中的技术标杆,我们自然应该多多向微信学习,那么今天实战的主题,就是模仿微信主界面的实现。

首先新建一个Android项目,起名叫作WeChatSample。既然是要实现ActionBar,那么第一步当然就是编辑menu目录下的main.xml文件了,代码如下所示:

<menu xmlns:android=""xmlns:tools=""tools:context="com.example.wechatsample.MainActivity" ><itemandroid:id="@+id/action_search"android:actionViewClass="android.widget.SearchView"android:icon="@drawable/actionbar_search_icon"android:showAsAction="ifRoom|collapseActionView"android:title="@string/action_search"/><itemandroid:id="@+id/action_plus"android:actionProviderClass="com.example.wechatsample.PlusActionProvider"android:icon="@drawable/actionbar_add_icon"android:showAsAction="ifRoom"android:title="@string/action_plus"/><itemandroid:id="@+id/action_album"android:icon="@drawable/ofm_photo_icon"android:title="@string/action_album"/><itemandroid:id="@+id/action_collection"android:icon="@drawable/ofm_collect_icon"android:title="@string/action_collection"/><itemandroid:id="@+id/action_card"android:icon="@drawable/ofm_card_icon"android:title="@string/action_card"/><itemandroid:id="@+id/action_settings"android:icon="@drawable/ofm_setting_icon"android:title="@string/action_settings"/><itemandroid:id="@+id/action_feed"android:icon="@drawable/ofm_feedback_icon"android:title="@string/action_feed"/></menu>这个文件中每个属性的含义我在前两篇文章中都有讲解过,这里就不再重复说明了。需要注意的是,<item>标签中指定的icon图标都是我事先准备好的,指定的title文字都是定义在string.xml中的,最后我会把源码附上,大家可以在源码中找到这些图标和文字。

观察上面的main.xml,你会发现里面有一个自定义的Action Provider,叫作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 OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem item) {return true;}});subMenu.add(context.getString(R.string.plus_add_friend)).setIcon(R.drawable.ofm_add_icon).setOnMenuItemClickListener(new 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 OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem item) {return false;}});subMenu.add(context.getString(R.string.plus_scan)).setIcon(R.drawable.ofm_qrcode_icon).setOnMenuItemClickListener(new 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 OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem item) {return false;}});}@Overridepublic boolean hasSubMenu() {return true;}}自定义Action Provider的方法我也已经在上一篇文章中介绍过了,相信你看这个类的时候应该感觉非常简单易懂。这里我们在PlusActionProvider中定义了五个子菜单,每个子菜单中都指定了一个标题和一个图标,分别就对应了微信中的那五个子菜单。另外,这里虽然给每个子菜单都定义了一个点击事件,但是点击件事里面的实现都是空的,因为我们本篇文章只是模仿微信的界面实现而已,功能就不谈啦。

接着修改MainActivity中的代码,如下所示:

public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);setOverflowShowingAlways();}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.main, menu);return true;}@Overridepublic boolean onMenuOpened(int featureId, Menu menu) {if (featureId == Window.FEATURE_ACTION_BAR && menu != null) {if (menu.getClass().getSimpleName().equals("MenuBuilder")) {try {Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);m.setAccessible(true);m.invoke(menu, true);} catch (Exception e) {}}}return super.onMenuOpened(featureId, menu);}private void setOverflowShowingAlways() {try {ViewConfiguration config = ViewConfiguration.get(this);Field menuKeyField = ViewConfiguration.class.getDeclaredField("sHasPermanentMenuKey");menuKeyField.setAccessible(true);menuKeyField.setBoolean(config, false);} catch (Exception e) {e.printStackTrace();}}}代码不长,并且全都是你熟悉的,onCreateOptionsMenu()方法中去加载main.xml文件,onMenuOpened()方法用于让隐藏在overflow当中的Action按钮的图标显示出来,而setOverflowShowingAlways()方法则是屏蔽掉物理Menu键,不然在有物理Menu键的手机上,overflow按钮会显示不出来。如果心胸不似海,又怎能有海一样的事业。

Android ActionBar应用实战,高仿微信主界面的设计

相关文章:

你感兴趣的文章:

标签云: