正文

Android仿微信主界面设计

︶ㄣSDDLL学院 メ
SDDLL学院V管理员 / 阅读
0723
这篇文章主要为大家介绍了Android仿微信主界面设计的相关资料,需要的朋友可以参考下

这篇文章主要为大家介绍了Android仿微信主界面设计的相关资料,需要的朋友可以参考下

先来一张效果图

Android仿微信主界面设计

一.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];
 }
}

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