首页 > 代码库 > [应用妹 --第二篇 主界面Tab搭建] android应用市场之快速开发
[应用妹 --第二篇 主界面Tab搭建] android应用市场之快速开发
主界面布局如下
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/f_home_boungroud" > <include android:id="@+id/titlebar" layout="@layout/titlebar"/> // titlebar <FrameLayout android:id="@+id/tab_content" 主界面内容FrameLayout android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1.0" /> <RadioGroup android:id="@+id/tabs_rg" 主界面下面四个tab按钮 android:layout_width="fill_parent" android:layout_height="50dp" android:orientation="horizontal" android:gravity="center" android:background="@drawable/downbar" > <RadioButton android:id="@+id/tab_rb_a" android:layout_width="0dp" android:layout_height="wrap_content" android:drawableTop="@drawable/selector_tab" android:button="@null" android:text="精品" android:layout_marginTop="2dp" android:layout_marginBottom="2dp" android:textColor="@android:color/white" android:textSize="13sp" android:layout_weight="1.0" android:gravity="center" android:singleLine="true" android:checked="true" android:background="@drawable/selector_tab_item" /> <RadioButton android:id="@+id/tab_rb_b" android:layout_width="0dp" android:layout_height="wrap_content" android:drawableTop="@drawable/selector_tab2" android:button="@null" android:text="热榜" android:layout_marginTop="2dp" android:layout_marginBottom="2dp" android:textColor="@android:color/white" android:textSize="13sp" android:layout_weight="1.0" android:gravity="center" android:singleLine="true" android:background="@drawable/selector_tab_item" /> <RadioButton android:id="@+id/tab_rb_c" android:layout_width="0dp" android:layout_height="wrap_content" android:drawableTop="@drawable/selector_tab3" android:button="@null" android:text="软件" android:textColor="@android:color/white" android:textSize="13sp" android:layout_weight="1.0" android:gravity="center" android:singleLine="true" android:layout_marginTop="2dp" android:layout_marginBottom="2dp" android:background="@drawable/selector_tab_item" /> <RadioButton android:id="@+id/tab_rb_d" android:layout_width="0dp" android:layout_height="wrap_content" android:drawableTop="@drawable/selector_tab4" android:button="@null" android:text="游戏" android:textColor="@android:color/white" android:textSize="13sp" android:layout_weight="1.0" android:gravity="center" android:singleLine="true" android:layout_marginTop="2dp" android:layout_marginBottom="2dp" android:background="@drawable/selector_tab_item" /> </RadioGroup> </LinearLayout>
/**
* 获取一个带动画的FragmentTransaction
*
* @param index
* @return
*/
private FragmentTransaction obtainFragmentTransaction(int index) {
FragmentTransaction ft = childFragmentManager
.beginTransaction();
// 设置切换动画
if (index > currentTab) {
ft.setCustomAnimations(R.anim.slide_left_in, R.anim.slide_left_out);
} else {
ft.setCustomAnimations(R.anim.slide_right_in,
R.anim.slide_right_out);
}
return ft;
}
//通过点击tab按钮,来显示或者隐藏Fragment
private void showTab(int idx) {for (int i = 0; i < fragments.size(); i++) {
Fragment fragment = fragments.get(i);
FragmentTransaction ft = obtainFragmentTransaction(idx);
if (idx == i) {
ft.show(fragment); //获取对应点击的按钮,显示不同的Fragment
} else {
ft.hide(fragment);
}
ft.commit();
}
currentTab = idx; // 更新目标tab为当前tab
}
//当我们,的Fragment隐藏后,我们就让他暂停,显示后,我们就让他resume,我们可以方便的在这里进行Adapter.notifiDataChanget()进行一些其他的更新或者初始化操作
public void selete(int i){
Fragment fragment = fragments.get(i);
FragmentTransaction ft = obtainFragmentTransaction(i);
getCurrentFragment().onPause(); // 暂停当前tab
if (fragment.isAdded()) {
fragment.onResume(); // 启动目标tab的onResume()
} else {
ft.add(fragmentContentId, fragment);
}
showTab(i); // 显示目标tab
ft.commit();
// 如果设置了切换tab额外功能功能接口
// if (null != onRgsExtraCheckedChangedListener) {
// onRgsExtraCheckedChangedListener.OnRgsExtraCheckedChanged(
// radioGroup, checkedId, i);
// }
}
整个主页tab就是通过,显示和隐藏fragment来实现的tab页面的切换的,实现原理比较简单。
[应用妹 --第二篇 主界面Tab搭建] android应用市场之快速开发