开发实例(3)：高仿微信的界面

2.X时代的实现，早过时了，可以作为了解。

Tab分页这样的布局最早源于IOS 系统，，android很多软件也采用了这样的界面布局，androidSDK 里面也有这样的控件TabHost +TabActivity，而官方给的控件灵活性不够高，开发中常用的是使用ActivityGroup + GridView 来实现Tab分页布局。

运行效果图：

下面上代码：

main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=""android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="48dip"android:background="@drawable/headerbar2"android:orientation="horizontal" ><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_marginTop="12dip"android:gravity="center"android:text="微信"android:textSize="18sp" /></LinearLayout><RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent" ><GridViewandroid:id="@+id/gvTopBar"android:layout_width="fill_parent"android:layout_height="48dip"android:layout_alignParentBottom="true"android:background="@drawable/headerbar2"android:fadingEdge="vertical"android:fadingEdgeLength="5dip" ></GridView><LinearLayoutandroid:id="@+id/Container"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_above="@+id/gvTopBar" ></LinearLayout></RelativeLayout></LinearLayout>

使用GridView 需要一个 Adapter，继承至BaseAdapter

package com.tabtest;import android.content.Context;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;public class ImageAdapter extends BaseAdapter {private ImageView[] imageItems;private int[] selectedResId;int[] topbar_image_array = { R.drawable.tab_weixin_normal,R.drawable.tab_address_normal, R.drawable.tab_find_frd_normal,R.drawable.tab_settings_normal };public ImageAdapter(Context context, int[] picIds, int width, int height,int[] selectedResId) {this.selectedResId = selectedResId;imageItems = new ImageView[picIds.length];for (int i = 0; i < picIds.length; i++) {imageItems[i] = new ImageView(context);/* 设置ImageView宽高 */// imageItems[i].setLayoutParams(new GridView.LayoutParams(width,height));imageItems[i].setAdjustViewBounds(false);// imgItems[i].setScaleType(ImageView.ScaleType.CENTER_CROP);imageItems[i].setPadding(2, 2, 2, 2);imageItems[i].setImageResource(picIds[i]);}}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn imageItems.length;}@Overridepublic Object getItem(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ImageView imageView;if (convertView == null) {imageView = imageItems[position];} else {imageView = (ImageView) convertView;}return imageView;}/* 设置选中焦点 */public void setFocus(int index) {for (int i = 0; i < imageItems.length; i++) {if (i != index) {/* 恢复未选中的样式 */// imageItems[i].setBackgroundResource(0);imageItems[i].setImageResource(topbar_image_array[i]);}}/* 设置选中的样式 */// imageItems[index].setBackgroundResource(selectedResId[index]);imageItems[index].setImageResource(selectedResId[index]);}}

最后是主Activity：

package com.tabtest;import android.app.ActivityGroup;import android.content.Intent;import android.graphics.Color;import android.graphics.drawable.ColorDrawable;import android.os.Bundle;import android.view.Gravity;import android.view.View;import android.view.ViewGroup.LayoutParams;import android.view.Window;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.GridView;import android.widget.LinearLayout;public class TabTestActivity extends ActivityGroup {private GridView gvTopBar;private ImageAdapter topImgAdapter;public LinearLayout container;// 装载sub Activity的容器/** 顶部按钮图片 **/int[] topbar_image_array = { R.drawable.tab_weixin_normal,R.drawable.tab_address_normal, R.drawable.tab_find_frd_normal,R.drawable.tab_settings_normal };@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.main);gvTopBar = (GridView) this.findViewById(R.id.gvTopBar);gvTopBar.setNumColumns(topbar_image_array.length);// 设置每行列数gvTopBar.setSelector(new ColorDrawable(Color.TRANSPARENT));// 选中的时候为透明色gvTopBar.setGravity(Gravity.CENTER);// 位置居中gvTopBar.setVerticalSpacing(0);// 垂直间隔int width = this.getWindowManager().getDefaultDisplay().getWidth()/ topbar_image_array.length;int[] selectedResId = { R.drawable.tab_weixin_pressed,R.drawable.tab_address_pressed, R.drawable.tab_find_frd_pressed,R.drawable.tab_settings_pressed };topImgAdapter = new ImageAdapter(this, topbar_image_array, width, 48,selectedResId);gvTopBar.setAdapter(topImgAdapter);// 设置菜单AdaptergvTopBar.setOnItemClickListener(new ItemClickEvent());// 项目点击事件container = (LinearLayout) findViewById(R.id.Container);SwitchActivity(0);// 默认打开第0页}class ItemClickEvent implements OnItemClickListener {public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {SwitchActivity(arg2);}}/* 根据ID打开指定的Activity */public void SwitchActivity(int id) {topImgAdapter.setFocus(id);// 选中项获得高亮container.removeAllViews();// 必须先清除容器中所有的ViewIntent intent = null;if (id == 0 || id == 2) {intent = new Intent(TabTestActivity.this, ActivityA.class);} else if (id == 1 || id == 3) {intent = new Intent(TabTestActivity.this, ActivityB.class);}intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);// Activity 转为 ViewWindow subActivity = getLocalActivityManager().startActivity("subActivity",intent);// 容器添加Viewcontainer.addView(subActivity.getDecorView(), LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT);}}

源码下载：

因为你的喜爱会挡也挡不住地流露出来。