Android 底部TabActivity（3）——ActivityGroup|顶部底部均有Tab标签之二

上一篇使用过时的ActivityGroup简单实现了顶部底部均有Tab标签的效果，是页面底部只有文字的样式，今天想完善一下效果，底部实现文字加图标的样式。

本文属于半成品，本来想着放弃的，想着先放博客吧，好歹也是一种思路，以后作参考用！追求完美效果的可以忽略本篇，我会在后续文章中实现更优的效果！

先看下效果图

首先是主页面MainActivity.java，这种方式其实不是真正意义上的Tab，只是实现了这样的效果。底部用了GridView实现三个切换开关，放到页面底部。

package sun.geoffery.tabtopbottom;

import android.app.ActivityGroup;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.Window;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;

/**
 * All rights Reserved, Designed By GeofferySun
 *
 * @Title: MainActivity.java
 * @Package sun.geoffery.tabtopbottom
 * @Description:上下都有Tab的界面
 * @author: GeofferySun
 * @date: 2014-12-9 下午3:41:04
 * @version V1.0
 */
public class MainActivity extends ActivityGroup {

	public static Class mTabClassAry[]= {
		HomeActivity.class,
		OrderActivity.class,
		WalletActivity.class};
	public static String mTabTxtAry[] = {"主页", "订单", "钱包"};
	public static int mTabImgAry[] = {
		R.drawable.ic_launcher,
		R.drawable.ic_launcher,
		R.drawable.ic_launcher};

	private int mCurTab;
	private final static int FLAG_EVENT = 0X100;
	private GridView mTabGridView;
	private GridViewAdapter mTabAdapter;
	private LinearLayout mContainer; // 装载sub Activity的容器

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);

		initView();
	}

	private void initView() {
		mContainer = (LinearLayout) findViewById(R.id.Container);
		mTabGridView = (GridView) findViewById(R.id.bottom_tab);
		// 禁止GridView滚动
		mTabGridView.setOnTouchListener(new OnTouchListener() {
			@Override
			public boolean onTouch(View v, MotionEvent event) {
				return MotionEvent.ACTION_MOVE == event.getAction() ? true : false;
			}
		});

		mTabAdapter = new GridViewAdapter(this, mTabImgAry, mTabTxtAry);
		mTabGridView.setAdapter(mTabAdapter);
		mTabGridView.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
				switchActivity(position);
			}
		});

		mCurTab = -1;
		mHandler.sendEmptyMessageDelayed(FLAG_EVENT, 100);
	}

	Handler mHandler = new Handler() {

		@Override
		public void handleMessage(Message msg) {
			switch (msg.what) {
			case FLAG_EVENT:
				switchActivity(0);
				break;
			}
		}

	};

	private void switchActivity(int index) {
		if (index < 0 || index >= mTabClassAry.length) {
			return;
		}

		if (mCurTab == index) {
			return;
		}

		if (mCurTab != -1) {
			mTabGridView.getChildAt(mCurTab).setBackgroundDrawable(null);
		}

//		mTabGridView.getChildAt(index).setBackgroundResource(R.drawable.tab_item_d);

		mCurTab = index;

		mContainer.removeAllViews();
		Intent intent = new Intent(this, mTabClassAry[index]);

		String name = index + " subactivity";
		// Activity 转为 View
		Window subActivity = getLocalActivityManager().startActivity(name, intent);

		View child = subActivity.getDecorView();
		LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
		child.setLayoutParams(params);
		// 容器添加View
		mContainer.addView(child);
	}
}

主页面对应的页面文件

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

    <LinearLayout
        android:id="@+id/Container"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:layout_above="@+id/bottom_tab" />

    <GridView
        android:id="@+id/bottom_tab"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#404040"
        android:listSelector="@android:color/transparent"
        android:numColumns="3"
        android:padding="2dp" />

</RelativeLayout>

底部的GridView需要一个适配器GridViewAdapter.java，Item就是上边一个图标、下边一个文字。

</pre><pre name="code" class="java">package sun.geoffery.tabtopbottom;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class GridViewAdapter extends BaseAdapter {
	Context mContext;
	LayoutInflater mLayoutInflater;
	int mImageviewArray[];
	String mTextViewArray[];

	public GridViewAdapter(Context context, int imageViewArray[], String textViewArray[]) {

		mContext = context;
		mLayoutInflater = LayoutInflater.from(context);
		mImageviewArray = imageViewArray;
		mTextViewArray = textViewArray;
	}

	@Override
	public Object getItem(int position) {
		return position;
	}

	@Override
	public long getItemId(int position) {
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {

		if (convertView == null) {
			convertView = mLayoutInflater.inflate(R.layout.tab_item_view, null);
		}

		ImageView imageView = (ImageView) convertView
				.findViewById(R.id.imageview);
		imageView.setBackgroundResource(mImageviewArray[position]);

		TextView textView = (TextView) convertView.findViewById(R.id.textview);
		textView.setText(mTextViewArray[position]);

		return convertView;

	}

	@Override
	public int getCount() {
		return mImageviewArray.length;
	}

}

每个Item对应的布局文件tab_item_view.xml如下

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

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="false"
        android:padding="3dp" >
    </ImageView>

    <TextView
        android:id="@+id/textview"
        style="@style/tab_item_text_style"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </TextView>

</LinearLayout>

至于其他页面还是上一篇文章中的代码，没有改动。

没看明白的直接去查看源码吧！

采集

采集