如果要实现的效果是两级的Tab,比如在第一级tab中又有三个子Tab切换不同的布局,
相当于在Fragment中嵌套来Fragment,这个怎么实现?
也有个官方的实现方法,通过使用android-support-v13.jar包中的getChildFragmentManager方法来获取一个Manager。
这里带来我写的一个新的方案,使用SubLayout来实现。
下面使用一个例子来说下使用方法,先看下最后的效果(项目使用了我的开源AndroidBucket和AndroidInject 请先添加依赖项目,欢迎star/fork):
效果跟以前的例子大同小异,点击第一个tab上的TextView,然后Toast提示EditText上的信息,但是使用方式却是不一样的。
大体的思路是在MainActivity布局中增加一个FrameLayout,然后在切换过程中不停的用相应的布局去替换FrameLayout中。
main.xml布局如下:
复制代码
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3android:orientation="vertical"
4android:layout_width="fill_parent"
5android:layout_height="fill_parent"
6>
7
8<FrameLayout
9android:id="@+id/main_content_view"
10android:layout_width="match_parent"
11android:layout_height="0dp"
12android:layout_weight="1.0"
13/>
14
15<RadioGroup
16android:id="@+id/main_tabs_rg"
17android:layout_width="fill_parent"
18android:layout_height="65dp"
19android:background="#aabbcc"
20android:gravity="center_vertical"
21android:orientation="horizontal" >
22
23<RadioButton
24android:id="@+id/main_tab_a_rb"
25style="@style/tab_item_background"
26android:drawableTop="@drawable/ic_launcher"
27android:paddingTop="7dp"
28android:textSize="13sp"
29android:checked="true"
30/>
31
32<RadioButton
33android:id="@+id/main_tab_b_rb"
34style="@style/tab_item_background"
35android:drawableTop="@drawable/ic_launcher"
36android:paddingTop="7dp"
37android:textSize="13sp"
38/>
39
40<RadioButton
41android:id="@+id/main_tab_c_rb"
42style="@style/tab_item_background"
43android:drawableTop="@drawable/ic_launcher"
44android:paddingTop="7dp"
45android:textSize="13sp"
46/>
47
48</RadioGroup>
49
50 </LinearLayout>
复制代码
布局很简单,一个FrameLayout用于存放不同界面的布局,3个RadioButton表示下面的每一项Tab按钮。
在MainActivity中代码如下:
复制代码
@AILayout(R.layout.main)
public class MainActivity extends AIActivity {
public static final String TAG = MainActivity.class.getSimpleName();
@AIView(R.id.main_content_view)
ViewGroup contentView;
@AIView(R.id.main_tabs_rg)
RadioGroup rg;
SubLayoutManager sbManager;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
sbManager = new SubLayoutManager<SubLayout>(context, contentView, TabASubLayout.class, TabBSubLayout.class, TabCSubLayout.class);
sbManager.setSwitchListener(new SubLayoutManager.LayoutSwitchListener<SubLayout>() {
@Override
public void switchSelf(SubLayout subLayout, int position) {
Logger.d(TAG, "[switch listener]switchSelf, subLayout: " + subLayout + ", position: " + position);
}
@Override
public void switchCompleted(SubLayout subLayout, int position) {
Logger.d(TAG, "[switch listener]switchCompleted, subLayout: " + subLayout + ", position: " + position);
}
});
rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup radioGroup, int i) {
int index = -1;
switch(i){
case R.id.main_tab_a_rb:
index = 0;
break;
case R.id.main_tab_b_rb:
index = 1;
break;
case R.id.main_tab_c_rb:
index = 2;
break;
}
if(index < 0 || index >= sbManager.getSubLayoutSize()){
return;
}
sbManager.switchLayout(index);
}
});
sbManager.switchLayout(0); // 默认切换第一页
}
@Override
protected void onDestroy() {
super.onDestroy();
sbManager.destoryClear();
sbManager = null;
}
}
复制代码
上面的SubLayout相当于一个Fragment,SubLayoutManager用于管理多个SubLayout之间的切换。SubLayoutManager可以通过new获龋
其中构造方法中:
public SubLayoutManager(Context context, ViewGroup contentView, Class<? extends T>... slszzs) {
参数二:contentView表示在MainActivity中预留给SubLayout显示的FrameLayout。
参数三:是个可变长参数,可以在后面(有序)追加所有需要切换的SubLayout的Class对象。
第一次初始化后各个SubLayout对象不会马上生成,只会在切换到改页面时才会生成该对象,会执行SubLayout的initLayout()方法,这个方法只会调用一次(类似onCreate()方法)
需要切换页面时只需要执行SubLayoutManager的switchLayout()方法,传入SubLayout的position就可以了,这个position跟参数三的顺序一致。
接下来看下几个SubLayout是怎么去实现的,因为三个SubLayout大致相同,所以只分析一个就可以了:
TabASubLayout代码如下:
复制代码
1 @AILayout(R.layout.tab_a)
2 public class TabASubLayout extends AISubLayout {
3public static final String TAG = TabASubLayout.class.getSimpleName();
4
5
6 //@AIView(R.id.tab_a_tv)
7 //TextView tv;
8@AIView(R.id.tab_a_et)
9EditText et;
10
11public TabASubLayout(Context context) {
12super(context);
13 //setContentView(R.layout.tab_a);
14
15}
16
17@Override
18public void initLayout() {
19super.initLayout();
20Logger.d(TAG, "initLayout...");
21}
22
23@AIClick({R.id.tab_a_tv})
24public void onClickCallbackSample(View view) {
25Toast.makeText(context, "clicked: " + ((TextView)view).getText() + ", " + et.getText(), Toast.LENGTH_SHORT).show();
26}
27
28@Override
29public void onResume() {
30super.onResume();
31Logger.d(TAG, "onResume...");
32}
33
34@Override
35public void onPause() {
36super.onPause();
37Logger.d(TAG, "onPause...");
38}
39
40 }
复制代码
代码很简单,继承AISubLayout即可,AISubLayout是AndroidInject中AndroidBucket的子类,实现了SubLayout的注解的支持。当然你也可以直接继承SubLayout,这样的话就不能使用注解了,看上面的被注释的代码,可以通过setContentView来设置对应的布局,可以通过findViewById来获取控件对象。
它也有onResume和onPause方法,当前页A被切换到B的话会调用A的onPause,然后调用B的onResume(如果之前B没有被初始化过,则先调用initLayout再调用onResume方法)
下面来看看log打印的日志:
// 以下为启动应用,默认加载TabA
05-05 08:22:32.216 1086-1086/com.wangjie.sublayouttest D/SubLayoutManager