- 浏览: 34744 次
- 性别:
- 来自: 北京
这一篇将讲述如何构建主页面,先看一下微信主页面的截图
从截图中可以看出,它的菜单是在程序的底部,当我们选择一个按钮后,它的颜色会发生变化,好像有灯在亮,这个实现起来比较简单,可以有多种方式供我们选择,TabActivity或者tabwidget+radiobutton或者activitygroup+radiobutton或者activitygroup+gridview或者activitygroup+grally等都可以,按钮的变化可以使用selector用两张图片来控制。
关于activitygroup,大家可以看一下这个图片:
先以tabwidget为例,代码如下:
xml布局文件如下:
再就是点击button的切换效果了,这里需要使用selector来实现,如下:
这样就利用tabwidget实现了最基础的菜单布局,但是相信很多人都知道,使用tabwidget需要消耗比较大的内存,后来就有人使用activitygroup和其他的组件结合使用,如上举例。这里就不再介绍了,感兴趣的朋友可以去查阅资料。下面我们使用另外一个方法,这种方法相对来说更加优雅。为什么这么说,因为viewpager这个类相信大家都不陌生了,其实官方微信是不支持滑动页面的,但是利用viewpager这个类,我们也可以既可以点击又可以滑动的切换页面。而且我们也不使用selector来实现button的改变,而是利用一个动画来实现,这个工程就是绿色图片来覆盖各个button,呈现出一个绿色的效果。底部菜单也不是使用耗费资源的tabwidget而是利用布局来自定义的,xml文件如下,一眼就可以明白:
如图:
所以,主页面的代码主要是这样的,一方面要使用viewpager来实现滑动页面,另一方面要实现自定义菜单改变颜色的动画效果。代码如下:
效果如下:
这样关于主页面的实现就完成了,之后会详细说一下各个Activity的实现。欢迎大家关注!
从截图中可以看出,它的菜单是在程序的底部,当我们选择一个按钮后,它的颜色会发生变化,好像有灯在亮,这个实现起来比较简单,可以有多种方式供我们选择,TabActivity或者tabwidget+radiobutton或者activitygroup+radiobutton或者activitygroup+gridview或者activitygroup+grally等都可以,按钮的变化可以使用selector用两张图片来控制。
关于activitygroup,大家可以看一下这个图片:
http://img.my.csdn.net/uploads/201211/03/1351952623_1266.jpg
先以tabwidget为例,代码如下:
import android.app.TabActivity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.view.Window; import android.widget.RadioGroup; import android.widget.RadioGroup.OnCheckedChangeListener; import android.widget.TabHost; import android.widget.TextView; public class MainActivity extends TabActivity { /** Called when the activity is first created. */ private TabHost tabHost; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); this.requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.main); tabHost=this.getTabHost(); TabHost.TabSpec spec; Intent intent; intent=new Intent().setClass(this, AddExamActivity.class); spec=tabHost.newTabSpec("微信").setIndicator("微信").setContent(intent); tabHost.addTab(spec); intent=new Intent().setClass(this,MyExamActivity.class); spec=tabHost.newTabSpec("通讯录").setIndicator("通讯录").setContent(intent); tabHost.addTab(spec); intent=new Intent().setClass(this, MyMessageActivity.class); spec=tabHost.newTabSpec("朋友们").setIndicator("朋友们").setContent(intent); tabHost.addTab(spec); intent=new Intent().setClass(this, Activity.class); spec=tabHost.newTabSpec("设置").setIndicator("设置").setContent(intent); tabHost.addTab(spec); intent=new Intent().setClass(this, SettingActivity.class); spec=tabHost.newTabSpec("设置").setIndicator("设置").setContent(intent); tabHost.addTab(spec); tabHost.setCurrentTab(1); } }
xml布局文件如下:
<?xml version="1.0" encoding="utf-8"?> <TabHost android:id="@android:id/tabhost" //id必须为:tabhost android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <FrameLayout android:id="@android:id/tabcontent" //id必须为:tabcontent android:layout_width="fill_parent" android:layout_height="0.0dip" android:layout_weight="1.0" /> <TabWidget android:id="@android:id/tabs" //id必须为:tabs android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0.0" /> </LinearLayout> 这些id都是系统的,只有这样,系统才会找到他们正确辨认。 </TabHost>
再就是点击button的切换效果了,这里需要使用selector来实现,如下:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/tab_weixin_pressed" />//点击后的绿色效果 <item android:drawable="@drawable/tab_weixin_normal" />//未点击的正常效果 </selector>
这样就利用tabwidget实现了最基础的菜单布局,但是相信很多人都知道,使用tabwidget需要消耗比较大的内存,后来就有人使用activitygroup和其他的组件结合使用,如上举例。这里就不再介绍了,感兴趣的朋友可以去查阅资料。下面我们使用另外一个方法,这种方法相对来说更加优雅。为什么这么说,因为viewpager这个类相信大家都不陌生了,其实官方微信是不支持滑动页面的,但是利用viewpager这个类,我们也可以既可以点击又可以滑动的切换页面。而且我们也不使用selector来实现button的改变,而是利用一个动画来实现,这个工程就是绿色图片来覆盖各个button,呈现出一个绿色的效果。底部菜单也不是使用耗费资源的tabwidget而是利用布局来自定义的,xml文件如下,一眼就可以明白:
<?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 //viewpager类,用来切换页面 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>
如图:
所以,主页面的代码主要是这样的,一方面要使用viewpager来实现滑动页面,另一方面要实现自定义菜单改变颜色的动画效果。代码如下:
import java.util.ArrayList; import android.os.Bundle; import android.app.Activity; import android.content.Intent; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.Display; import android.view.Gravity; import android.view.KeyEvent; import android.view.LayoutInflater; import android.view.View; import android.view.WindowManager; import android.view.WindowManager.LayoutParams; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.PopupWindow; public class MainWeixin extends Activity { public static MainWeixin instance = null; private ViewPager mTabPager;//声明对象 private ImageView mTabImg;// 动画图片 private ImageView mTab1, mTab2, mTab3, mTab4; private int zero = 0;// 动画图片偏移量 private int currIndex = 0;// 当前页卡编号 private int one;// 单个水平动画位移 private int two; private int three; private LinearLayout mClose; private LinearLayout mCloseBtn; private View layout; private boolean menu_display = false; private PopupWindow menuWindow; private LayoutInflater inflater; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_weixin); getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);// 启动activity时不自动弹出软键盘 instance = this; mTabPager = (ViewPager) findViewById(R.id.tabpager); mTabPager.setOnPageChangeListener(new MyOnPageChangeListener()); 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)); Display currDisplay = getWindowManager().getDefaultDisplay();// 获取屏幕当前分辨率 int displayWidth = currDisplay.getWidth(); one = displayWidth / 4; // 设置水平动画平移大小 two = one * 2; three = one * 3; // 将要分页显示的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); } /** * 头标点击监听 */ public class MyOnClickListener implements View.OnClickListener { private int index = 0; public MyOnClickListener(int i) { index = i; } public void onClick(View v) { mTabPager.setCurrentItem(index); } }; /* * 页卡切换监听(原作者:D.Winter) */ public class MyOnPageChangeListener implements OnPageChangeListener { 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);// 开始动画 } }
效果如下:
这样关于主页面的实现就完成了,之后会详细说一下各个Activity的实现。欢迎大家关注!
发表评论
-
50个Android开发人员必备UI效果源码
2012-12-25 17:27 2961Android 仿微信之主页面 ... -
Android多媒体学习:调用android自带的播放器播放Audio
2012-12-10 11:18 962Android有其自带的播放器 ... -
Android 仿微信之界面导航篇
2012-12-08 11:24 947微信是现在比较流行的应用了,在各大安卓市场几乎都是名列前茅了。 ... -
android service 性能优化浅见
2012-12-08 11:17 1131Android四大组件相信大家 ... -
android的无标题dialog以及dialog样式的窗体
2012-12-08 11:10 841普通方法弹出alert后,取消标题还会有小部分高度,这个倒会好 ... -
Android ListView从网络获取图片及文字显示
2012-12-08 11:05 1887如何从网络获取图片以及文本来显示。事实上,一般是先获取Josn ... -
android点击实现图片放大缩小
2012-12-08 00:16 4460mainactivity类 package com.exam ... -
android客户端加密代码
2012-12-07 18:11 849package com.devchina.scurity; ...
相关推荐
使用android studio设计微信主界面,采用ViewPager和Fragment相结合的方法,实现界面滑动更换页面,点击等
使用Fragment实现仿微信界面的实现
基于android平台高仿微信5.3主界面,该工程主要修改自http://blog.csdn.net/guolin_blog/article/details/26365683页面提供的仿微信工程。本人主要工作为在原工程基础上重写tab页面切换方式,将原工程自绘方式改为...
WeixinTest WChat main page 仿微信主页面,通过ViewPager实现,高度可定制化,页面可以左右滑动,点击下面那妞也可以切换。 具体使用见博客:http://blog.csdn.net/lpjishu/article/details/48143913
用ViewPager实现跟微信主界面一样的页面滑动效果
这是一个仿Android版本的微信UI开源项目,该项目实现了微信表面的UI编码设计与实现,尚未实现功能部分。实现了部分页面的跳转逻辑,比如初始页进入主界面、边角设置菜单、通讯录、聊天列表、Guide页面等
本项目是一个基于安卓的Android仿微信客户端-猫友。是一个csdn上的朋友的原创项目,原帖可以看这里http://blog.csdn.net/ericfantastic/article/details/49451249 实现了微信的登录注册、主界面、聊天会话、通讯录、...
高仿微信主界面设计是一个应用Android ActionBar的高仿微信主界面设计的例子源码。只有主页面、搜索、弹出菜单和tab页的设计,没有实际的功能。
Android ViewPager+RadioGroup+Fragment超高仿微信主界面底部滑动、点击菜单
模仿微信主界面,滑动界面,下面的菜单的图标和文字渐变。博客地址:http://blog.csdn.net/gesanri/article/details/49382463
本文实例为大家分享了Android模仿微信主界面展示的具体代码,供大家参考,具体内容如下 先看一下效果图 实现的原理: ViewPager+FragmentPagerAdapter 主界面可分为三部分: top标题栏就是一个TextView 中间的...
仿照微信App实现微信主页面的登录注册以及记住登录页面跳转
— Android Studio仿微信主界面页面切换 源码链接:https://gitee.com/huo_shui_three_thousand/WeChatVIew AS仿微信主界面 首先明确一下我们想要的最终成品 :布局分布和功能效果 再分析界面构成、UI设计,实现功能...
通过ViewPager和Fragment组合使用,实现了微信主界面的滑动效果,以及RadioGroup相对应Fragment的操作
本项目是一个仿微信小视频录制的例子源码,使用了美拍的android sdk实现。包括给录制的视频更换电影主题和添加滤镜等。做出来的效果非常棒,并且可以保存到手机储存。 打开的方式和微信一样,在主页面直接下拉就可以...
高仿微信主界面设计是一个应用Android ActionBar的高仿微信主界面设计的例子源码。只有主页面、搜索、弹出菜单和tab页的设计,没有实际的功能。
本项目是一个仿微信小视频录制的例子源码,使用了美拍的android sdk实现。包括给录制的视频更换电影主题和添加滤镜等。做出来的效果非常棒,并且可以保存到手机储存。 打开的方式和微信一样,在主页面直接下拉就可以...
微信授权我是 在index.vue做的授权,是一个空白页,因为授权需要回调所以这个页面会刷新两次,当我们授权成功进入主页面后,点击返回键或者点击手机的物理返回键,因为浏览器history机制,按物理返回或者返回肯定是...
移动互联网开发 ...页面具有“微信”标题; 页面具有中间显示框; 页面具有底部选择框,并且具有选择事件; 页面底部选择框在进行改变的时候,需要中间显示框的页面同步改变; 页面的布局清晰。