先来一张效果图
一.actionbar的设计
首先是main.xml,先定义这些菜单,界面稍后在调整
<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>
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里面也自带主题编辑器,暂时还没用到过,后期尝试
<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.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>
然后建立三个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"> <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; } }
接下来就是在mainactivity.java中代码配置了
/** * 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); }
可以看出来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微信开发教程汇总》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助。
如对本文有疑问, 点击进行留言回复!!
Android安卓水滴屏适配状态栏图标(图标过多时显示一个点)
android studio使用Flutter创建web项目
android如何使用taskAffinity属性对任务栈操作控制
android对PDF文件的操作(上传、预览、下载和转存相册)
Android通过代码批量生成字符图标用于给输入法显示状态栏的图标
网友评论