先来一张效果图
一.actionbar的设计
首先是main.xml,先定义这些菜单,界面稍后在调整
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<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是自己单独写的一个类
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
/** *主要用于模仿微信上+号实现的菜单 */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里面也自带主题编辑器,暂时还没用到过,后期尝试
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<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中配置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<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,下面举一个例子
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?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> |
|
1
2
3
4
5
6
7
8
9
10
|
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中代码配置了
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
/** * 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,这样的话,三者就能完美的相适应.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
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]; }} |
以上就是本文的全部内容，希望对大家的学习有所帮助。
