Android仿微信主界面的实现方法

本文实例为大家分享了Android模仿微信主界面展示的具体代码,供大家参考,具体内容如下

先看一下效果图

实现的原理:

ViewPager+FragmentPagerAdapter

主界面可分为三部分:

  • top标题栏就是一个TextView
  • 中间的ViewPager作为显示的容器,填充Fragment
  • bottom是一个RadioGroup

这里为了布局的优化,将top和bottom抽取出来 ,然后用include将其导入主布局,如下

<LinearLayout 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"
  android:orientation="vertical"
  tools:context=".MainActivity" >

  <include layout="@layout/top" />

  <android.support.v4.view.ViewPager
    android:id="@+id/vp_content"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" >
  </android.support.v4.view.ViewPager>

  <include layout="@layout/bottom" />
</LinearLayout>

bottom_tab的布局,为了方便管理将它们的共性抽取出来一个style
tab有两种状态,选中和非选中,因此将其背景做成一个选择器selector

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/rg_tab_container"
  android:layout_width="match_parent"
  android:layout_height="@dimen/bar_height"
  android:background="@drawable/bottom_bar"
  android:gravity="center"
  android:orientation="horizontal" >

  <RadioButton
    android:id="@+id/rb_tab_weixin"
    style="@style/TabStyle"
    android:checked="true"
    android:drawableTop="@drawable/tab_weixin_selector"
    android:text="@string/tab_weixin" />

  <RadioButton
    android:id="@+id/rb_tab_friend"
    style="@style/TabStyle"
    android:drawableTop="@drawable/tab_friend_selector"
    android:text="@string/tab_friend" />

  <RadioButton
    android:id="@+id/rb_tab_contact"
    style="@style/TabStyle"
    android:drawableTop="@drawable/tab_contact_selector"
    android:text="@string/tab_contact" />

  <RadioButton
    android:id="@+id/rb_tab_setting"
    style="@style/TabStyle"
    android:drawableTop="@drawable/tab_setting_selector"
    android:text="@string/tab_setting" />

</RadioGroup>

最后看一下作为Controller的Activity

  1. 先将需要的控件引入
  2. ViewPager内容的填充,主要是FragmentPagerAdapter适配器
  3. 将Fragment的初始化,将主界面显示的内容分别用Fragment管理,方便代码的管理。
  4. bottom_tab和ViewPager的关联,通过监听ViewPager页面的改变来改变tab的选中状态,然后再通过RadioGroup的事件来改变ViewPager的页面。
/**
 * 主界面 模仿微信界面
 *
 * @author admin
 *
 */
public class MainActivity extends FragmentActivity {

  /** tab */
  private RadioGroup mRadioGroup;

  private RadioButton weixinRadioButton;
  private RadioButton friendRadioButton;
  private RadioButton contactRadioButton;
  private RadioButton settingRadioButton;

  /** 显示内容容器 */
  private ViewPager mViewPager;

  private List<Fragment> fragments;

  private Fragment mWeiXinFragment;
  private Fragment mFriendFragment;
  private Fragment mContactFragment;
  private Fragment mSettingFragment;

  private FragmentPagerAdapter mFragmentPagerAdapter;

  private final static int TAB_WEIXIN = 0;
  private final static int TAB_FRIEND = 1;
  private final static int TAB_CONTACT = 2;
  private final static int TAB_SETTING = 3;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);

    initView();

    initEvent();
  }

  private void initEvent() {

    mRadioGroup.setOnCheckedChangeListener(myCheckedChangeListener);
    mViewPager.setOnPageChangeListener(myOnPageChangeListener);
  }

  private void initView() {
    mRadioGroup = (RadioGroup) findViewById(R.id.rg_tab_container);

    weixinRadioButton = (RadioButton) findViewById(R.id.rb_tab_weixin);
    friendRadioButton = (RadioButton) findViewById(R.id.rb_tab_friend);
    contactRadioButton = (RadioButton) findViewById(R.id.rb_tab_contact);
    settingRadioButton = (RadioButton) findViewById(R.id.rb_tab_setting);

    mViewPager = (ViewPager) findViewById(R.id.vp_content);

    fragments = new ArrayList<Fragment>();

    mWeiXinFragment = new WeiXinFragment();
    mFriendFragment = new FriendFragment();
    mContactFragment = new ContactFragment();
    mSettingFragment = new SettingFragment();

    fragments.add(mWeiXinFragment);
    fragments.add(mFriendFragment);
    fragments.add(mContactFragment);
    fragments.add(mSettingFragment);
//这里需要继承FragmentActivity
    mFragmentPagerAdapter = new FragmentAdapter(getSupportFragmentManager());
    mViewPager.setAdapter(mFragmentPagerAdapter);

  }

  /**
   * 当页面切换时,tab也跟着切换
   */
  private OnPageChangeListener myOnPageChangeListener = new OnPageChangeListener() {

    @Override
    public void onPageSelected(int arg0) {
      switch (arg0) {
      case TAB_WEIXIN:

        if (!weixinRadioButton.isChecked()) {
          weixinRadioButton.setChecked(true);
        }
        break;
      case TAB_FRIEND:
        friendRadioButton.setChecked(true);

        break;
      case TAB_CONTACT:
        contactRadioButton.setChecked(true);

        break;
      case TAB_SETTING:
        settingRadioButton.setChecked(true);

        break;

      }
    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {

    }

    @Override
    public void onPageScrollStateChanged(int arg0) {

    }
  };

  /**
   * 点击tab,切换到相应的页面
   */
  private OnCheckedChangeListener myCheckedChangeListener = new OnCheckedChangeListener() {

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {

      switch (checkedId) {
      case R.id.rb_tab_weixin:

        mViewPager.setCurrentItem(TAB_WEIXIN);
        break;
      case R.id.rb_tab_friend:

        mViewPager.setCurrentItem(TAB_FRIEND);
        break;
      case R.id.rb_tab_contact:

        mViewPager.setCurrentItem(TAB_CONTACT);
        break;
      case R.id.rb_tab_setting:
        mViewPager.setCurrentItem(TAB_SETTING);

        break;

      }
    }
  };

  private class FragmentAdapter extends FragmentPagerAdapter {

    public FragmentAdapter(FragmentManager fm) {
      super(fm);
    }

    @Override
    public Fragment getItem(int arg0) {
      return fragments.get(arg0);
    }

    @Override
    public int getCount() {
      return fragments.size();
    }

  }

}

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

您可能感兴趣的文章:

  • Android 使用Fragment模仿微信界面的实例代码
  • Android仿支付宝微信支付密码界面弹窗封装dialog
  • Android 仿微信图像拍摄和选择界面功能(代码分享)
  • Android仿微信语音聊天界面设计
  • android仿微信聊天界面 语音录制功能
  • Android仿QQ、微信聊天界面长按提示框效果
  • Android高仿微信5.2.1主界面及消息提醒
  • Android App仿微信界面切换时Tab图标变色效果的制作方法
  • Android高仿微信聊天界面代码分享
  • Android仿微信主界面设计
(0)

相关推荐

  • Android仿支付宝微信支付密码界面弹窗封装dialog

    一,功能效果 二,实现过程 1,先写xml文件:dialog_keyboard.xml 注意事项 (1),密码部分用的是一个线性布局中6个TextView,并设置android:inputType="numberPassword",外框是用的一个有stroke属性的shape, (2),1-9数字是用的recycleview ,每个item的底部和右边有1dp的黑线,填充后形成分割线. (3),recycleview 要设置属性  android:overScrollMode=&quo

  • Android高仿微信5.2.1主界面及消息提醒

    好久没更新博客了,最近在做公司的项目,这也算是我接触的第一个正式项目.通过项目的检验,发现自己积累了一年的知识还是远远不够,想要提高,好的方法是 :项目+书+视频+博客.最重要一点:勤动手.最近发现了慕课网的视频,居然都是高清无码免费的!而且满满的干货!我用业余时间跟着视频中大神的讲解学习了不少知识,下面就将这些小demo与大家分享,当然,我做了一些优化,代码与视频中有些出入,但功能可以完全实现. 这是一个模仿5.2.1版本的显示界面,如下图所示: 功能及实现思路简介 主要功能很简单: 1.上面

  • Android App仿微信界面切换时Tab图标变色效果的制作方法

    概述 1.概述 学习Android少不了模仿各种app的界面,自从微信6.0问世以后,就觉得微信切换时那个变色的Tab图标屌屌的,今天我就带大家自定义控件,带你变色变得飞起~~ 好了,下面先看下效果图: 清晰度不太好,大家凑合看~~有木有觉得这个颜色弱爆了了的,,,下面我动动手指给你换个颜色: 有没有这个颜色比较妖一点~~~好了~下面开始介绍原理. 2.原理介绍 通过上面的效果图,大家可能也猜到了,我们的图标并非是两张图片,而是一张图,并且目标颜色是可定制的,谁让现在动不动就谈个性化呢. 那么我

  • Android仿微信语音聊天界面设计

    有段时间没有看视频了,昨天晚上抽了点空时间,又看了下鸿洋大神的视频教程,又抽时间写了个学习记录.代码和老师讲的基本一样,网上也有很多相同的博客.我只是在AndroidStudio环境下写的. --主界面代码-- public class MainActivity extends Activity { private ListView mListView; private ArrayAdapter<Recorder> mAdapter; private List<Recorder>

  • Android 使用Fragment模仿微信界面的实例代码

    什么是Fragment 自从Android 3.0中引入fragments 的概念,根据词海的翻译可以译为:碎片.片段.其目的是为了解决不同屏幕分辩率的动态和灵活UI设计.大屏幕如平板小屏幕如手机,平板电脑的设计使得其有更多的空间来放更多的UI组件,而多出来的空间存放UI使其会产生更多的交互,从而诞生了fragments . fragments 的设计不需要你来亲自管理view hierarchy 的复杂变化,通过将Activity 的布局分散到frament 中,可以在运行时修改activit

  • Android 仿微信图像拍摄和选择界面功能(代码分享)

    插件运行后的画面如下: 下面这张图对图像进行筛选,根据照片产生的源头分(QQ和微信和相机) 点击某文件夹后,可以查看该文件夹下包含的所有的图片 图片选择界面 选中后就跳到已经选择界面的窗口,并且可以对该吃图片上传进行简要的描述 首先我想说明的是这个插件默认是不进行图片筛选的,打开app后会有几十个文件夹,但是个人认为开发中常用的图片基本都来自于QQ中拍摄的照片,微信中拍摄的照片,以及相机直接拍摄的照片,因此我对这个插件进行过滤以及文件夹名称的更改,具体做法,主要是对AlbumHelper类bui

  • Android仿QQ、微信聊天界面长按提示框效果

    先来看看效果图 如何使用 示例代码 PromptViewHelper pvHelper = new PromptViewHelper(mActivity); pvHelper.setPromptViewManager(new ChatPromptViewManager(mActivity)); pvHelper.addPrompt(holder.itemView.findViewById(R.id.textview_content)); 使用起来还是很简单的 首先new一个PromptViewH

  • Android高仿微信聊天界面代码分享

    微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们来看一下整个小项目的主体结构: 下面是Activity的代码: package com.way.demo; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import jav

  • android仿微信聊天界面 语音录制功能

    本例为模仿微信聊天界面UI设计,文字发送以及语言录制UI. 1先看效果图: 第一:chat.xml设计 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" andro

  • 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="a

随机推荐