android 横向选项卡,Android横向滑动的选项卡

我们这里要实现的就是横向滑动的选项卡,然后点击选项卡的选项,对我们的fragment进行显示。

fragment方面的知识,不做赘述,我的文章Android Fragment的使用,我已经说过了,大家可以参考一下。

实现的滑动的选项卡并且切换fragment的效果图如下:

308a4d4e83df465d15f9809fc5648a88.png

上面的选项卡是可以横向滑动的,相信截图方面还是可以看出来的,下面的显示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;}