我们这里要实现的就是横向滑动的选项卡,然后点击选项卡的选项,对我们的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 */ public Fragment mContent, fragment_in, fragment_qm, fragment_se;
private HorizontalScrollView hs_activity_tabbar; private RadioGroup myRadioGroup; private ListtitleList; private LinearLayout ll_activity_tabbar_content; private float mCurrentCheckedRadioLeft;//当前被选中的RadioButton距离左侧的距离 private String channel;
titleList = new ArrayList(); titleList.add("入门训练"); titleList.add("启蒙训练"); titleList.add("初级训练"); titleList.add("入门训练"); titleList.add("娱乐"); titleList.add("足球"); titleList.add("巴萨"); titleList.add("汽车"); initGroup();
//三个fragment的创建,以及默认的fragment的设置 fragment_in = new MakePlanFragment(); fragment_qm = new CourseFragment(); fragment_se = new MakePlanFragment(); setDefaultFragment(fragment_in);
private void initGroup() { 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 = new RadioGroup(this); myRadioGroup.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)); myRadioGroup.setOrientation(LinearLayout.HORIZONTAL); ll_activity_tabbar_content.addView(myRadioGroup); for (int i = 0; i < titleList.size(); i++) { String channel = titleList.get(i); RadioButton radio = new RadioButton(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 = new LinearLayout.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(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { int radioButtonId = group.getCheckedRadioButtonId(); //根据ID获取RadioButton的实例 RadioButton rb = (RadioButton) findViewById(radioButtonId); channel = (String) rb.getTag(); mCurrentCheckedRadioLeft = rb.getLeft();//更新当前按钮距离左边的距离 int width = (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 void switchContent(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():
//设置初始的Fragment public void setDefaultFragment(Fragment fragment) { fm = getFragmentManager(); ft = fm.beginTransaction(); ft.add(R.id.fragment_content, fragment).commit(); mContent = fragment; }