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>至于其他页面还是 上一篇文章中的代码，没有改动。
没看明白的直接去查看源码吧！
源码点击下载