欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android仿微信主界面设计

程序员文章站 2023-12-22 14:49:58
先来一张效果图 一.actionbar的设计 首先是main.xml,先定义这些菜单,界面稍后在调整

先来一张效果图

Android仿微信主界面设计

一.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微信开发教程汇总》,欢迎大家学习阅读。

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

上一篇:

下一篇: