首先看看布局文件
main.xml
<?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" android:orientation="vertical" > <!-- 底部Tab --> <LinearLayout android:id="@+id/ly_tab" android:layout_width="fill_parent" android:layout_height="55dip" android:layout_alignParentBottom="true" android:background="@drawable/tab_background" android:orientation="horizontal" > <!-- Tab可以滑动的ViewPager --> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout> <!-- 中间显示内容的LinerLayout --> <LinearLayout android:id="@+id/ly_container" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_above="@id/ly_tab" /> </RelativeLayout>
ViewPager 的 一个页面的配置文件
<?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="horizontal" > <ImageView android:id="@+id/imageView_tab_item_frist" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1.0" android:background="@drawable/gray_takeout_96_80_1" android:contentDescription="@string/imageView" android:fadingEdge="vertical" android:fadingEdgeLength="5dip" android:onClick="onClick" android:tag="1" /> <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1.0" android:background="@drawable/gray_play_96_80_1" android:contentDescription="@string/imageView" android:fadingEdge="vertical" android:fadingEdgeLength="5dip" android:onClick="onClick" android:tag="2" /> <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1.0" android:background="@drawable/gray_express_96_80_1" android:contentDescription="@string/imageView" android:fadingEdge="vertical" android:fadingEdgeLength="5dip" android:onClick="onClick" android:tag="3" /> <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1.0" android:background="@drawable/gray_logistics_96_80_1" android:contentDescription="@string/imageView" android:fadingEdge="vertical" android:fadingEdgeLength="5dip" android:onClick="onClick" android:tag="4" /> </LinearLayout>
因为用到了ViewPager组件, 而Android本身自带是没有这个组件的。
因此需要加载ViewPager的jar包, android-support-v4.jar
这个jar包, 在谷歌自带的SDK的android-sdk-windows\extras\android\support\v4目录下面就有
然后是看看java类:
/**
* 主界面多选项卡选择Activity
* @author Thunder
*
*/
public class TabChooseActivity extends ActivityGroup {
/* */
private LayoutInflater layoutInflater = null;
/* 一些对话框 */
private AboutDialog aboutDialog = null;
private AboutCFDialog aboutCFDialog = null;
/* 一些常量 */
private static final int CASE_TAKE_OUT = 0;
private static final int CASE_PLAY = 1;
private static final int CASE_EXPRESS = 2;
private static final int CASE_LOGISTICS = 3;
private static final int CASE_SPIN_PANEL = 4;
/* ActivityGroup实现Tab */
private static final int PAGE_COUNT = 2;
private List<View> viewList = null;
private ViewGroup viewGroup = null;
private ViewPager viewPager = null;
private LinearLayout ly_container = null;
/* Tab的一些资源 */
private View preView = null;
private int preIndex = 0;
private int[] img_bg_normal = {R.drawable.gray_takeout_96_80_1,
R.drawable.gray_play_96_80_1, R.drawable.gray_express_96_80_1,
R.drawable.gray_logistics_96_80_1, R.drawable.gray_spin_panel_96_80_1,
R.drawable.gray_logistics_96_80_1, R.drawable.gray_refresh_96_80_1,
R.drawable.gray_more_96_80_1};
private int[] img_bg_foucs = {R.drawable.blue_takeout_96_80_1,
R.drawable.blue_play_96_80_1, R.drawable.blue_express_96_80_1,
R.drawable.blue_logistics_96_80_1, R.drawable.blue_spin_panel_96_80_1,
R.drawable.blue_logistics_96_80_1, R.drawable.blue_refresh_96_80_1,
R.drawable.gray_more_96_80_1};
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
/* 初始化函数 */
init();
/* 设置显示的View */
setContentView(viewGroup);
}
/**
* 初始化函数
*/
private void init() {
/* 得到 LayoutInflater */
layoutInflater = getLayoutInflater();
/* ViewList 用户存放每一个TabItem页 */
viewList = new ArrayList<View>();
/* 设置默认第一个Tab Item 是选中状态 */
View tempView = layoutInflater.inflate(R.layout.page_item_1, null);
preView = tempView.findViewById(R.id.imageView_tab_item_frist);
preIndex = 0;
setImgFocus(preIndex, preView);
/* 添加每一页面的显示页面 */
viewList.add(tempView);
viewList.add(layoutInflater.inflate(R.layout.page_item_2, null));
/* 反射出布局 */
viewGroup = (ViewGroup) layoutInflater.inflate(R.layout.main, null);
viewPager = (ViewPager) viewGroup.findViewById(R.id.viewPager);
/* 初始化对话框 */
aboutDialog = new AboutDialog(this);
aboutCFDialog = new AboutCFDialog(this);
/* 用于中间显示内容的容器, 其实就是一个LinearLayout */
ly_container = (LinearLayout) viewGroup.findViewById(R.id.ly_container);
/* 让ViewPager加载数据页 */
viewPager.setAdapter(new ViewPagerAdapter());
/* 默认启动一个Tab 项的Activity */
switchActivity(preIndex);
}
/**
* View 的点击事件
* @param view
*/
public void onClick(View view) {
int index = Integer.parseInt(view.getTag().toString()) - 1;
setImgNormal();
setImgFocus(index, view);
preView = view;
preIndex = index;
switchActivity(index);
}
/**
* 把原来的聚焦状态设置为正常状态
*/
public void setImgNormal() {
if (preView != null) {
((ImageView) preView).setBackgroundResource(img_bg_normal[preIndex]);
}
}
/**
* 把原来的正常状态设置为聚焦状态
* @param index
* @param view
*/
public void setImgFocus(int index, View view) {
((ImageView) view).setBackgroundResource(img_bg_foucs[index]);
}
/**
* ActivityGroup的切换
* @param index
*/
private void switchActivity(int index) {
// 必须先清除容器中所有的View
ly_container.removeAllViews();
/* Intent 对象 */
Intent intent = null;
/* 匹配实例化Intent */
switch (index) {
case CASE_TAKE_OUT:
intent = new Intent(this, TakeOutActivity.class);
break;
case CASE_PLAY:
intent = new Intent(this, PlayActivity.class);
break;
case CASE_EXPRESS:
intent = new Intent(this, ExpressActivity.class);
break;
case CASE_LOGISTICS:
intent = new Intent(this, LogisticsActivity.class);
break;
case CASE_SPIN_PANEL:
intent = new Intent(this, SpinPanelActivity.class);
break;
default:
break;
}
/* 设置此Activity的标志位 */
intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
/* Activity 转为 View */
Window subActivity = getLocalActivityManager().startActivity(
"subActivity", intent);
/* 容器添加View */
ly_container.addView(subActivity.getDecorView(),
LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
}
/**
* ViewPager 的 Adapter
* @author Thunder
*
*/
private class ViewPagerAdapter extends PagerAdapter {
@Override
public int getCount() {
// 页面的数量
return PAGE_COUNT;
}
@Override
public Object instantiateItem(View container, int position) {
// 加入到ViewGroup中去
((ViewPager) container).addView(viewList.get(position), 0);
return viewList.get(position);
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager) container).removeView(viewList.get(position));
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void finishUpdate(View arg0) {
}
@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
}
@Override
public Parcelable saveState() {
return null;
}
@Override
public void startUpdate(View arg0) {
}
}
}
具体实现, 上面的注释已经写得很清楚了,
如果有不明白的地方, 直接@我就行。
转载请说明出处, 谢谢。
Thunder
2012/07/01