是男人就下100层【第一层】——高仿微信界面（5）

最新推荐文章于 2020-08-07 11:16:17 发布
最新推荐文章于 2020-08-07 11:16:17 发布
阅读量8.6k 收藏 11
点赞数 10
分类专栏： Android学习 Android界面图像 Android高仿系列 Android热门应用高仿系列 文章标签： 微信 高仿 界面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dawanganban/article/details/20291639
版权

前面《 是男人就下100层【第一层】——高仿微信界面（4）》中我们已经完成了基本的引导界面和登录界面，这一篇中我们来看看登录后的主界面的布局和内容，来一步一步的完成该界面。

我们先来看看主界面如何布局，如下图所示，下部分的导航栏单独做成一个主布局，然后在上部分放入ViewPager组件，这个前面的引导界面有点类似。这种导航栏有多种实现方式，用TabHost也可以实现，用Fragement也可以实现，我们就用ViewPager先实现一下。


主布局界面布局文件如下：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainweixin"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#eee" >  

    <RelativeLayout
        android:id="@+id/main_bottom"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true"
        android:orientation="vertical"
        android:background="@drawable/bottom_bar"
        >             
      
        <ImageView
        	android:id="@+id/img_tab_now"
        	android:layout_width="wrap_content"
        	android:layout_height="wrap_content"        	     	
        	android:scaleType="matrix"
        	android:layout_gravity="bottom"            	
            android:layout_alignParentBottom="true"
        	android:src="@drawable/tab_bg" />              
         
         
         <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:paddingBottom="2dp"            
        	>
        	
            <LinearLayout
            	android:layout_width="wrap_content"
            	android:layout_height="wrap_content"
              	android:gravity="center_horizontal"
              	android:orientation="vertical"
              	android:layout_weight="1">               	
                <ImageView
            		android:id="@+id/img_weixin"
        			android:layout_width="wrap_content"
        			android:layout_height="wrap_content"        	     	
        			android:scaleType="matrix"
        			android:clickable="true"
        			android:src="@drawable/tab_weixin_pressed" />
                <TextView
            		android:layout_width="wrap_content"
            		android:layout_height="wrap_content"
            		android:text="微信"
            		android:textColor="#fff"
            		android:textSize="12sp" />                
        	 </LinearLayout>
        	 <LinearLayout
            	android:layout_width="wrap_content"
            	android:layout_height="wrap_content"
              	android:gravity="center_horizontal"
              	android:orientation="vertical"
              	android:layout_weight="1">               	
                <ImageView
            		android:id="@+id/img_address"
        			android:layout_width="wrap_content"
        			android:layout_height="wrap_content"        	     	
        			android:scaleType="matrix"
        			android:clickable="true"
        			android:src="@drawable/tab_address_normal" />
                <TextView
            		android:layout_width="wrap_content"
            		android:layout_height="wrap_content"
            		android:text="通讯录"
            		android:textColor="#fff"
            		android:textSize="12sp" />                
        	 </LinearLayout>
        	 <LinearLayout
            	android:layout_width="wrap_content"
            	android:layout_height="wrap_content"
              	android:gravity="center_horizontal"
              	android:orientation="vertical"
              	android:layout_weight="1">               	
                <ImageView
            		android:id="@+id/img_friends"
        			android:layout_width="wrap_content"
        			android:layout_height="wrap_content"        	     	
        			android:scaleType="matrix"
        			android:clickable="true"
        			android:src="@drawable/tab_find_frd_normal" />
                <TextView
            		android:layout_width="wrap_content"
            		android:layout_height="wrap_content"
            		android:text="朋友们"
            		android:textColor="#fff"
            		android:textSize="12sp" />                
        	 </LinearLayout>
        	 
        	 <LinearLayout
            	android:layout_width="wrap_content"
            	android:layout_height="wrap_content"
              	android:gravity="center_horizontal"
              	android:orientation="vertical"
              	android:layout_weight="1">               	
                <ImageView
            		android:id="@+id/img_settings"
        			android:layout_width="wrap_content"
        			android:layout_height="wrap_content"        	     	
        			android:scaleType="matrix"
        			android:clickable="true"
        			android:src="@drawable/tab_settings_normal" />
                <TextView
            		android:layout_width="wrap_content"
            		android:layout_height="wrap_content"
            		android:text="设置"
            		android:textColor="#fff"
            		android:textSize="12sp" />                
        	 </LinearLayout>        
          
        </LinearLayout>     
       
    </RelativeLayout>
    <LinearLayout
        android:layout_width="fill_parent"
    	android:layout_height="wrap_content" 
    	android:layout_alignParentTop="true"
    	android:layout_above="@id/main_bottom"       
        android:orientation="vertical" >
        
        <android.support.v4.view.ViewPager
        	android:id="@+id/tabpager"
        	android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:layout_gravity="center" > 
        </android.support.v4.view.ViewPager>  
    </LinearLayout>

   

</RelativeLayout>
最外面我们使用了一个相对布局，其实线性布局也可以，任何界面都可以用多种方式来实现，有时候我们要考虑到性能的优化就需要合理的选择所需的实现方式。

相对布局中最下面是一个线性布局，在该布局中我们又放置了四个线性布局，每个线性布局就是下面导航菜单中的一个菜单项。相对布局的最上面是一个线性布局中放置了一个ViewPage组件，这样的设计完全符合上面我们所画的结构。

然后在Activity中我们将四个菜单所对应的布局文件通过加载器Inflate载入到View对象中并存入数组然后通过PageAdapter适配器填充界面。

		// 将要分页显示的View装入数组中
		LayoutInflater mLi = LayoutInflater.from(this);
		View view1 = mLi.inflate(R.layout.main_tab_weixin, null);
		View view2 = mLi.inflate(R.layout.main_tab_address, null);
		View view3 = mLi.inflate(R.layout.main_tab_friends, null);
		View view4 = mLi.inflate(R.layout.main_tab_settings, null);

		// 每个页面的view数据
		final ArrayList<View> views = new ArrayList<View>();
		views.add(view1);
		views.add(view2);
		views.add(view3);
		views.add(view4);
		// 填充ViewPager的数据适配器
		PagerAdapter mPagerAdapter = new PagerAdapter() {

			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				return arg0 == arg1;
			}

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

			@Override
			public void destroyItem(View container, int position, Object object) {
				((ViewPager) container).removeView(views.get(position));
			}

			// @Override
			// public CharSequence getPageTitle(int position) {
			// return titles.get(position);
			// }

			@Override
			public Object instantiateItem(View container, int position) {
				((ViewPager) container).addView(views.get(position));
				return views.get(position);
			}
		};

		mTabPager.setAdapter(mPagerAdapter);
	}
现在我们要做的就是通过四个菜单按钮的监听函数来切换ViewPager中的内容 

		mTab1 = (ImageView) findViewById(R.id.img_weixin);
		mTab2 = (ImageView) findViewById(R.id.img_address);
		mTab3 = (ImageView) findViewById(R.id.img_friends);
		mTab4 = (ImageView) findViewById(R.id.img_settings);
		mTabImg = (ImageView) findViewById(R.id.img_tab_now);
		mTab1.setOnClickListener(new MyOnClickListener(0));
		mTab2.setOnClickListener(new MyOnClickListener(1));
		mTab3.setOnClickListener(new MyOnClickListener(2));
		mTab4.setOnClickListener(new MyOnClickListener(3));
	/**
	 * 头标点击监听
	 */
	public class MyOnClickListener implements View.OnClickListener {
		private int index = 0;

		public MyOnClickListener(int i) {
			index = i;
		}

		@Override
		public void onClick(View v) {
			mTabPager.setCurrentItem(index);
		}
	};
接下来还要解决一个问题，如何在选择菜单后，比如选择“通讯录”菜单后该菜单的背景颜色改变，有一种方法是将菜单中的ImageView换成CheckBox，或者用ViewPager的监听函数OnPageChangeListener来改变背景。 

	/*
	 * 页卡切换监听(原作者:D.Winter)
	 */
	public class MyOnPageChangeListener implements OnPageChangeListener {
		@Override
		public void onPageSelected(int arg0) {
			Animation animation = null;
			switch (arg0) {
			case 0:
				mTab1.setImageDrawable(getResources().getDrawable(
						R.drawable.tab_weixin_pressed));
				if (currIndex == 1) {
					animation = new TranslateAnimation(one, 0, 0, 0);
					mTab2.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_address_normal));
				} else if (currIndex == 2) {
					animation = new TranslateAnimation(two, 0, 0, 0);
					mTab3.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_find_frd_normal));
				} else if (currIndex == 3) {
					animation = new TranslateAnimation(three, 0, 0, 0);
					mTab4.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_settings_normal));
				}
				break;
			case 1:
				mTab2.setImageDrawable(getResources().getDrawable(
						R.drawable.tab_address_pressed));
				if (currIndex == 0) {
					animation = new TranslateAnimation(zero, one, 0, 0);
					mTab1.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_weixin_normal));
				} else if (currIndex == 2) {
					animation = new TranslateAnimation(two, one, 0, 0);
					mTab3.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_find_frd_normal));
				} else if (currIndex == 3) {
					animation = new TranslateAnimation(three, one, 0, 0);
					mTab4.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_settings_normal));
				}
				break;
			case 2:
				mTab3.setImageDrawable(getResources().getDrawable(
						R.drawable.tab_find_frd_pressed));
				if (currIndex == 0) {
					animation = new TranslateAnimation(zero, two, 0, 0);
					mTab1.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_weixin_normal));
				} else if (currIndex == 1) {
					animation = new TranslateAnimation(one, two, 0, 0);
					mTab2.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_address_normal));
				} else if (currIndex == 3) {
					animation = new TranslateAnimation(three, two, 0, 0);
					mTab4.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_settings_normal));
				}
				break;
			case 3:
				mTab4.setImageDrawable(getResources().getDrawable(
						R.drawable.tab_settings_pressed));
				if (currIndex == 0) {
					animation = new TranslateAnimation(zero, three, 0, 0);
					mTab1.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_weixin_normal));
				} else if (currIndex == 1) {
					animation = new TranslateAnimation(one, three, 0, 0);
					mTab2.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_address_normal));
				} else if (currIndex == 2) {
					animation = new TranslateAnimation(two, three, 0, 0);
					mTab3.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_find_frd_normal));
				}
				break;
			}
			currIndex = arg0;
			animation.setFillAfter(true);// True:图片停在动画结束位置
			animation.setDuration(150);
			mTabImg.startAnimation(animation);
		}

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

		@Override
		public void onPageScrollStateChanged(int arg0) {
		}
	}
上面的currIndex是为了记住上次的状态，将上次的按钮背景还原。

布局效果如下：

效果是不是很酷？呵呵，如果有什么更好的实现方式或不对之处请大家拍砖，相互交流，共同进步。如果你喜欢阳光小强（大碗干拌）的博客，想共同学习，可以加入左边栏的交流群，该群中有来自全国各地的技术爱好者，欢迎~~


下一篇我们来详细看一下四个菜单所对应的界面实现，并贴出源代码。





lxq_xsyu
关注
专栏目录
是男人就下100层【第一层】——高仿微信界面（7）
水寒
03-04 1万+
在上一篇《是男人就下100层【第一层】——高仿微信界面（6）》中我们已经对主界面的的各个菜单进行了简单实现，接下来我们完成两个比较有趣的功能，一个是上部的下弹式菜单，另一个是摇一摇功能。
是男人就下一百层andriod源码
10-16
是男人就下一百层的android源代码，可自适应各种型号手机
是男人就下100层【第一层】——高仿微信界面（9）
weixin_34227447的博客
03-06 101
前面几篇文章实现的界面效果不符合4.0的HOLO主题及官方建议的设计规范，感谢“一片冰心在玉壶”给我指出，不然我可能会一直错下去，也会误导大家。接下来这几篇我计划用HOLO主题来高仿一下微信5.0的界面实现。先看看今天要实现的效果：闪屏界面和前面做的类似这里就不叙述了，我们直接看主界面的实现布局文件：<?xml version="1.0" encoding="utf-8"?> &l...
是男人就下一百层
05-14
下一百层游戏源码 利用重力传感器原理 倾斜手机控制人物往下掉
自己写的第一个android 游戏《是男人就下100层》
易水寒
08-12 5066
自己开发的第一个android 游戏《是男人就下100层》，注意是安卓游戏，不是IPhone的。截图如下:            这个有游戏是用重力感应来控制的，所以要晃动手机来控制人物移动。这个游戏的目标是下越多层数越好。这个游戏跟电脑版的区别就是，到后面，吃两个汉堡就可以头朝下飞快往下冲哈哈 。 PS:那个更多应用按钮是无效的，本来想加上广告的，也懒的弄了。
安卓Android源码——高仿微信5.2内测版UI项目.zip
10-14
这个压缩包文件“安卓Android源码——高仿微信5.2内测版UI项目.zip”包含了一个基于Android平台的UI项目，目标是模仿微信5.2内测版本的用户界面设计。通过分析这个项目的源码，我们可以深入学习Android UI开发的各种...
安卓Android源码——精典源码之高仿微信.zip
10-14
"安卓开源]MyAppWeixin(高仿微信全套UI)" 提示我们这个项目名为 "MyAppWeixin"，它是一个开源的、全功能的微信界面仿制品，涵盖了微信的主要用户界面组件。 **知识点详解：** 1. **Android SDK和开发环境**：要...
Android源码——完美高仿的微信源码.zip
10-08
这个“Android源码——完美高仿的微信源码.zip”文件很可能是提供了一份参考实现，帮助开发者理解和学习如何构建这样的应用。通过深入研究这份源码，我们可以汲取到许多Android开发的知识点，包括但不限于以下几个...
Android课设小游戏-是男人就下一百层
12-31
用Android studio3.2开发的，能选择人物和难度，通过鼠标或者键盘控制人物移动到踏板上，代码都有注释比较简单，功能还不是很多。
是男人就下100层（Cocos2D-X源码）
06-27
是男人就下100层（Cocos2D-X源码），仅在vs2010上测试
疯狂的提百万（是男人就下100层）
04-20
此为博主的windows编程课程作业，游戏模式和是“男人就下一百层”相似。代码简洁易懂，非常适合学习使用，ui设计美观可爱（贱萌的提莫），注重细节，比如上下弹动的云彩，表情会变的海绵宝宝等。各种资源完备，可以直接调试。并且由博主调试完成后上传，可直接运行。非常需要积分支持，谢谢大家了！
C语言-游戏-是男人就过50关
01-08
游戏测试,广结交天下所有编程爱好者，C/C++
是男人就下一百层 C语言 Easyx 实现 游戏
xlxt_的博客
08-07 1685
C语言，Easyx库 实现 《是男人就下100层》 简单游戏开发。
是男人就下100层【第四层】——Crazy贪吃蛇（1）
weixin_33782386的博客
07-09 451
贪吃蛇是一款很经典的游戏，这些经典游戏给我们的童年增加了不少乐趣，今天开始我们来一步一步的在Android设备上实现一款贪吃蛇游戏，我也是第一次写这个游戏，有可能会写错，或者走弯路，但是最终希望能有一个好的结果，接下来我们一起来一步步的摸着石头开发吧。一、建立一个工程二、自定义View（贪吃蛇界面）package com.example.crazysnake; import android....
是男人就下100层【第一层】——高仿微信界面（3）
weixin_34318272的博客
02-27 133
上一篇《是男人就下100层【第一层】——高仿微信界面（2）》中实现了注册登录界面，这一篇来看看具体的登录界面实现，先来看看界面效果。登录界面布局<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
j2me学习－－是男人就下１００层代码学习
hydrogen2005的专栏
10-07 4315
先贴出代码随后加上自己的注释．自己感觉程序的运行效果不好但是很适合处学者学习．import javax.microedition.lcdui.*;import javax.microedition.midlet.*;import java.util.*;import javax.microedition.lcdui.game.GameCanvas;public class Man extends
是男人就下100层（简仿）
梅的专栏
03-08 7229
进来，事情不多，闲暇之时，就想写个简单的游戏练练手。太复杂了，不使用游戏引擎来做，是非常困难的。这里，其实也没有打算说，开发一款游戏上线，就是练习自定义控件
微信界面仿制教程与高仿微信导航、聊天、设置界面示例
资源摘要信息:"本资源是一个高仿微信的导航页面、聊天界面以及设置界面的Java类文件压缩包，文件名为weixin.zip，该文件可以在***上下载。该压缩包中包含了一个名为WhatsnewDoor.class的Java类文件。" 知识点一：...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值