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

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

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

运行效果图：

下面上代码：

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="48dip"
        android:background="@drawable/headerbar2"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dip"
            android:gravity="center"
            android:text="微信"
            android:textSize="18sp" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <GridView
            android: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>

        <LinearLayout
            android: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]);
		}
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return imageItems.length;
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@Override
	public 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 };

	@Override
	public 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);// 设置菜单Adapter
		gvTopBar.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();// 必须先清除容器中所有的View
		Intent 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 转为 View
		Window subActivity = getLocalActivityManager().startActivity("subActivity",
				intent);
		// 容器添加View
		container.addView(subActivity.getDecorView(), LayoutParams.FILL_PARENT,
				LayoutParams.FILL_PARENT);
	}

}

源码下载： http://download.csdn.net/detail/lyl_studio/4476398