我们这里要实现的就是横向滑动的选项卡,然后点击选项卡的选项,对我们的fragment进行显示。
fragment方面的知识,不做赘述,我的文章Android Fragment的使用 ,我已经说过了,大家可以参考一下。
实现的滑动的选项卡并且切换fragment的效果图如下:
上面的选项卡是可以横向滑动的,相信截图方面还是可以看出来的,下面的显示girdview部分是fragment部分。
横向滑动的选项卡,首先是布局文件:
<LinearLayout 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"> <HorizontalScrollView android:id="@+id/hs_activity_tabbar" android:layout_width="fill_parent" android:layout_height="40dp" android:background="#4c4c4c" android:fadingEdge="none" android:scrollbars="none"> <LinearLayout android:id="@+id/ll_activity_tabbar_content" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"></LinearLayout> </HorizontalScrollView> </LinearLayout>
这个布局简单说明一下,就是利用横向滑动的选项卡+fragment来实现,从布局也可以看出。<FrameLayout android:id="@+id/fragment_content" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="50dp"> </FrameLayout>
头部的选项卡,使用horizontalScrollView,底部利用framelayout添加fragment。实现点击选项卡,切换相应的fragment页面。
布局完成,就看activity吧。
在我们的主activity中,需要完成的就是:
声明不必多说,这个fragment的声明。
/** * 当前的Fragment,以及目标的三个Fragment */ public Fragment mContent, fragment_in, fragment_qm, fragment_se;
接下来就是onCreate中的:private HorizontalScrollView hs_activity_tabbar; private RadioGroup myRadioGroup; private List<String> titleList; private LinearLayout ll_activity_tabbar_content; private float mCurrentCheckedRadioLeft;//当前被选中的RadioButton距离左侧的距离 private String channel;
titleList = new ArrayList<String>(); 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);
触发fragment的切换交互,是switchContent()://根据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的显示隐藏 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; }