我们这里要实现的就是横向滑动的选项卡,然后点击选项卡的选项,对我们的fragment进行显示。
fragment方面的知识,不做赘述,我的文章Android Fragment的使用,我已经说过了,大家可以参考一下。
实现的滑动的选项卡并且切换fragment的效果图如下:
上面的选项卡是可以横向滑动的,相信截图方面还是可以看出来的,下面的显示girdview部分是fragment部分。
横向滑动的选项卡,首先是布局文件:
android:id="@+id/ll_activity_tabbar_all"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_below="@id/toolbar"android:orientation="vertical">android:id="@+id/hs_activity_tabbar"android:layout_width="fill_parent"android:layout_height="40dp"android:background="#4c4c4c"android:fadingEdge="none"android:scrollbars="none">android:id="@+id/ll_activity_tabbar_content"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal">
android:id="@+id/fragment_content"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginBottom="50dp"> 这个布局简单说明一下,就是利用横向滑动的选项卡+fragment来实现,从布局也可以看出。
头部的选项卡,使用horizontalScrollView,底部利用framelayout添加fragment。实现点击选项卡,切换相应的fragment页面。
布局完成,就看activity吧。
在我们的主activity中,需要完成的就是:
声明不必多说,这个fragment的声明。
/***当前的Fragment,以及目标的三个Fragment*/publicFragment mContent,fragment_in,fragment_qm,fragment_se;
privateHorizontalScrollView hs_activity_tabbar;privateRadioGroup myRadioGroup;privateListtitleList;privateLinearLayout ll_activity_tabbar_content;private floatmCurrentCheckedRadioLeft;//当前被选中的RadioButton距离左侧的距离privateString channel;
接下来就是onCreate中的:
titleList= newArrayList();titleList.add("入门训练");titleList.add("启蒙训练");titleList.add("初级训练");titleList.add("入门训练");titleList.add("娱乐");titleList.add("足球");titleList.add("巴萨");titleList.add("汽车");initGroup();
//三个fragment的创建,以及默认的fragment的设置fragment_in= newMakePlanFragment();fragment_qm= newCourseFragment();fragment_se= newMakePlanFragment();setDefaultFragment(fragment_in);
然后实现横向滑动选项卡的具体设置:
private voidinitGroup() {
hs_activity_tabbar= (HorizontalScrollView) this.findViewById(R.id.hs_activity_tabbar);ll_activity_tabbar_content= (LinearLayout) this.findViewById(R.id.ll_activity_tabbar_content);//选项卡布局myRadioGroup= newRadioGroup(this);myRadioGroup.setLayoutParams(newViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));myRadioGroup.setOrientation(LinearLayout.HORIZONTAL);ll_activity_tabbar_content.addView(myRadioGroup);for(inti = 0;i < titleList.size();i++) {
String channel = titleList.get(i);RadioButton radio = newRadioButton(this);radio.setButtonDrawable(android.R.color.transparent);radio.setBackgroundResource(R.drawable.bt_selector);ColorStateList csl = getResources().getColorStateList(R.color.edit_text_color_pre);radio.setTextColor(csl);LinearLayout.LayoutParams l = newLinearLayout.LayoutParams((int) SizeHelper.dp2px(this,120),ViewGroup.LayoutParams.MATCH_PARENT,Gravity.CENTER);radio.setLayoutParams(l);radio.setTextSize(17);// radio.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));radio.setGravity(Gravity.CENTER);radio.setText(channel);radio.setTag(channel);myRadioGroup.addView(radio);}
myRadioGroup.setOnCheckedChangeListener(newRadioGroup.OnCheckedChangeListener() {
@Overridepublic voidonCheckedChanged(RadioGroup group, intcheckedId) {
intradioButtonId = group.getCheckedRadioButtonId();//根据ID获取RadioButton的实例RadioButton rb = (RadioButton) findViewById(radioButtonId);channel= (String) rb.getTag();mCurrentCheckedRadioLeft= rb.getLeft();//更新当前按钮距离左边的距离intwidth = (int) SizeHelper.dp2px(SettingPlanActivity.this,200);hs_activity_tabbar.smoothScrollTo((int) mCurrentCheckedRadioLeft- width,0);
//根据checkedId对我们的对应的选项卡的位置进行事件的触发
if(checkedId ==
myRadioGroup.getChildAt(
0).getId()) { switchContent(
fragment_in)
;
}
if(checkedId ==
myRadioGroup.getChildAt(
1).getId()) { switchContent(
fragment_qm)
;
}
if(checkedId ==
myRadioGroup.getChildAt(
2).getId()) { switchContent(
fragment_se)
;
} } })
;
//
设定默认被选中的选项卡为第一项
if(!
titleList.isEmpty()) {
myRadioGroup.check(
myRadioGroup.getChildAt(
0).getId())
;
} } 触发fragment的切换交互,是switchContent():
//切换fragment的显示隐藏public voidswitchContent(Fragment to) {
if(mContent!= to) {
fm= getFragmentManager();ft= fm.beginTransaction();if(!to.isAdded()) { //先判断是否被add过ft.hide(mContent).add(R.id.fragment_content,to).commit();//隐藏当前的fragment,add下一个到Activity中} else{
ft.hide(mContent).show(to).commit();//隐藏当前的fragment,显示下一个}
mContent= to;}
} 设置当我们没有选择选项卡的时候,默认的选项卡的position是0,然后默认显示的fragment进行设置。setDefaultFragment():
//设置初始的Fragmentpublic voidsetDefaultFragment(Fragment fragment) {
fm= getFragmentManager();ft= fm.beginTransaction();ft.add(R.id.fragment_content,fragment).commit();mContent= fragment;}