http://blog.csdn.net/wangjinyu501/article/details/8144332

Android 仿微信之（二）--主页面实现篇

分类：Android 2012-11-03 22:12 11388人阅读评论(187) 收藏举报

这一篇将讲述如何构建主页面，先看一下微信主页面的截图

Android 仿微信之（二）--主页面实现篇_第1张图片

从截图中可以看出，它的菜单是在程序的底部，当我们选择一个按钮后，它的颜色会发生变化，好像有灯在亮，这个实现起来比较简单，可以有多种方式供我们选择，TabActivity或者tabwidget+radiobutton或者activitygroup+radiobutton或者activitygroup+gridview或者activitygroup+grally等都可以，按钮的变化可以使用selector用两张图片来控制。

关于activitygroup，大家可以看一下这个图片：

Android 仿微信之（二）--主页面实现篇_第2张图片

先以tabwidget为例，代码如下：

[java] view plain copy

importandroid.app.TabActivity;
importandroid.content.Intent;
importandroid.os.Bundle;
importandroid.view.View;
importandroid.view.Window;
importandroid.widget.RadioGroup;
importandroid.widget.RadioGroup.OnCheckedChangeListener;
importandroid.widget.TabHost;
importandroid.widget.TextView;
publicclassMainActivityextendsTabActivity{
/**Calledwhentheactivityisfirstcreated.*/
privateTabHosttabHost;
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.main);
tabHost=this.getTabHost();
TabHost.TabSpecspec;
Intentintent;
intent=newIntent().setClass(this,AddExamActivity.class);
spec=tabHost.newTabSpec("微信").setIndicator("微信").setContent(intent);
tabHost.addTab(spec);
intent=newIntent().setClass(this,MyExamActivity.class);
spec=tabHost.newTabSpec("通讯录").setIndicator("通讯录").setContent(intent);
tabHost.addTab(spec);
intent=newIntent().setClass(this,MyMessageActivity.class);
spec=tabHost.newTabSpec("朋友们").setIndicator("朋友们").setContent(intent);
tabHost.addTab(spec);
intent=newIntent().setClass(this,Activity.class);
spec=tabHost.newTabSpec("设置").setIndicator("设置").setContent(intent);
tabHost.addTab(spec);
intent=newIntent().setClass(this,SettingActivity.class);
spec=tabHost.newTabSpec("设置").setIndicator("设置").setContent(intent);
tabHost.addTab(spec);
tabHost.setCurrentTab(1);
}
}

xml布局文件如下：

[html] view plain copy

<?xmlversion="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来实现，如下：

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:state_enabled="true"android:state_checked="true"android:drawable="@drawable/tab_weixin_pressed"/>//点击后的绿色效果
<itemandroid:drawable="@drawable/tab_weixin_normal"/>//未点击的正常效果
</selector>

这样就利用tabwidget实现了最基础的菜单布局，但是相信很多人都知道，使用tabwidget需要消耗比较大的内存，后来就有人使用activitygroup和其他的组件结合使用，如上举例。这里就不再介绍了，感兴趣的朋友可以去查阅资料。下面我们使用另外一个方法，这种方法相对来说更加优雅。为什么这么说，因为viewpager这个类相信大家都不陌生了，其实官方微信是不支持滑动页面的，但是利用viewpager这个类，我们也可以既可以点击又可以滑动的切换页面。而且我们也不使用selector来实现button的改变，而是利用一个动画来实现，这个工程就是绿色图片来覆盖各个button，呈现出一个绿色的效果。底部菜单也不是使用耗费资源的tabwidget而是利用布局来自定义的，xml文件如下，一眼就可以明白：

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns: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来实现滑动页面，另一方面要实现自定义菜单改变颜色的动画效果。代码如下：

[java] view plain copy

importjava.util.ArrayList;
importandroid.os.Bundle;
importandroid.app.Activity;
importandroid.content.Intent;
importandroid.support.v4.view.PagerAdapter;
importandroid.support.v4.view.ViewPager;
importandroid.support.v4.view.ViewPager.OnPageChangeListener;
importandroid.view.Display;
importandroid.view.Gravity;
importandroid.view.KeyEvent;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.WindowManager;
importandroid.view.WindowManager.LayoutParams;
importandroid.view.animation.Animation;
importandroid.view.animation.TranslateAnimation;
importandroid.widget.ImageView;
importandroid.widget.LinearLayout;
importandroid.widget.PopupWindow;
publicclassMainWeixinextendsActivity{
publicstaticMainWeixininstance=null;
privateViewPagermTabPager;//声明对象
privateImageViewmTabImg;//动画图片
privateImageViewmTab1,mTab2,mTab3,mTab4;
privateintzero=0;//动画图片偏移量
privateintcurrIndex=0;//当前页卡编号
privateintone;//单个水平动画位移
privateinttwo;
privateintthree;
privateLinearLayoutmClose;
privateLinearLayoutmCloseBtn;
privateViewlayout;
privatebooleanmenu_display=false;
privatePopupWindowmenuWindow;
privateLayoutInflaterinflater;
@Override
publicvoidonCreate(BundlesavedInstanceState){
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(newMyOnPageChangeListener());
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(newMyOnClickListener(0));
mTab2.setOnClickListener(newMyOnClickListener(1));
mTab3.setOnClickListener(newMyOnClickListener(2));
mTab4.setOnClickListener(newMyOnClickListener(3));
DisplaycurrDisplay=getWindowManager().getDefaultDisplay();//获取屏幕当前分辨率
intdisplayWidth=currDisplay.getWidth();
one=displayWidth/4;//设置水平动画平移大小
two=one*2;
three=one*3;
//将要分页显示的View装入数组中
LayoutInflatermLi=LayoutInflater.from(this);
Viewview1=mLi.inflate(R.layout.main_tab_weixin,null);
Viewview2=mLi.inflate(R.layout.main_tab_address,null);
Viewview3=mLi.inflate(R.layout.main_tab_friends,null);
Viewview4=mLi.inflate(R.layout.main_tab_settings,null);
//每个页面的view数据
finalArrayList<View>views=newArrayList<View>();
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4);
//填充ViewPager的数据适配器
PagerAdaptermPagerAdapter=newPagerAdapter(){
@Override
publicbooleanisViewFromObject(Viewarg0,Objectarg1){
returnarg0==arg1;
}
@Override
publicintgetCount(){
returnviews.size();
}
@Override
publicvoiddestroyItem(Viewcontainer,intposition,Objectobject){
((ViewPager)container).removeView(views.get(position));
}
//@Override
//publicCharSequencegetPageTitle(intposition){
//returntitles.get(position);
//}
@Override
publicObjectinstantiateItem(Viewcontainer,intposition){
((ViewPager)container).addView(views.get(position));
returnviews.get(position);
}
};
mTabPager.setAdapter(mPagerAdapter);
}
/**
*头标点击监听
*/
publicclassMyOnClickListenerimplementsView.OnClickListener{
privateintindex=0;
publicMyOnClickListener(inti){
index=i;
}
publicvoidonClick(Viewv){
mTabPager.setCurrentItem(index);
}
};
/*
*页卡切换监听(原作者:D.Winter)
*/
publicclassMyOnPageChangeListenerimplementsOnPageChangeListener{
publicvoidonPageSelected(intarg0){
Animationanimation=null;
switch(arg0){
case0:
mTab1.setImageDrawable(getResources().getDrawable(
R.drawable.tab_weixin_pressed));
if(currIndex==1){
animation=newTranslateAnimation(one,0,0,0);
mTab2.setImageDrawable(getResources().getDrawable(
R.drawable.tab_address_normal));
}elseif(currIndex==2){
animation=newTranslateAnimation(two,0,0,0);
mTab3.setImageDrawable(getResources().getDrawable(
R.drawable.tab_find_frd_normal));
}elseif(currIndex==3){
animation=newTranslateAnimation(three,0,0,0);
mTab4.setImageDrawable(getResources().getDrawable(
R.drawable.tab_settings_normal));
}
break;
case1:
mTab2.setImageDrawable(getResources().getDrawable(
R.drawable.tab_address_pressed));
if(currIndex==0){
animation=newTranslateAnimation(zero,one,0,0);
mTab1.setImageDrawable(getResources().getDrawable(
R.drawable.tab_weixin_normal));
}elseif(currIndex==2){
animation=newTranslateAnimation(two,one,0,0);
mTab3.setImageDrawable(getResources().getDrawable(
R.drawable.tab_find_frd_normal));
}elseif(currIndex==3){
animation=newTranslateAnimation(three,one,0,0);
mTab4.setImageDrawable(getResources().getDrawable(
R.drawable.tab_settings_normal));
}
break;
case2:
mTab3.setImageDrawable(getResources().getDrawable(
R.drawable.tab_find_frd_pressed));
if(currIndex==0){
animation=newTranslateAnimation(zero,two,0,0);
mTab1.setImageDrawable(getResources().getDrawable(
R.drawable.tab_weixin_normal));
}elseif(currIndex==1){
animation=newTranslateAnimation(one,two,0,0);
mTab2.setImageDrawable(getResources().getDrawable(
R.drawable.tab_address_normal));
}elseif(currIndex==3){
animation=newTranslateAnimation(three,two,0,0);
mTab4.setImageDrawable(getResources().getDrawable(
R.drawable.tab_settings_normal));
}
break;
case3:
mTab4.setImageDrawable(getResources().getDrawable(
R.drawable.tab_settings_pressed));
if(currIndex==0){
animation=newTranslateAnimation(zero,three,0,0);
mTab1.setImageDrawable(getResources().getDrawable(
R.drawable.tab_weixin_normal));
}elseif(currIndex==1){
animation=newTranslateAnimation(one,three,0,0);
mTab2.setImageDrawable(getResources().getDrawable(
R.drawable.tab_address_normal));
}elseif(currIndex==2){
animation=newTranslateAnimation(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);//开始动画
}
}

效果如下：

Android 仿微信之（二）--主页面实现篇_第3张图片
这样关于主页面的实现就完成了，之后会详细说一下各个Activity的实现。欢迎大家关注！

上一篇谷歌发布Android 4.2 详解果冻豆新特性
下一篇Android仿QQ空间

顶: 30

踩

Android 仿微信之（二）--主页面实现篇

Android 仿微信之（二）--主页面实现篇

更多相关文章

随机推荐