先来一张效果图
一.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];
}
}
|
以上就是本文的全部内容，希望对大家的学习有所帮助。