本人Android新手,很多东西都是现学现卖。。。模仿大神们,分享一下自己的解决办法,也做个记录。大家认为有什么问题随时沟通,一般你都是对的=。=
最近做的项目中需要实现标签页,网上最常见的TabHost和TabWeight的方法,试了一下是可以实现标签页切换的。但不是很好用,不知道为什么界面上的按钮可以看到触发了按下抬起效果,但是没有收到click事件回调,所有按钮都失灵了,跳转另外的子页面也跳转不过去(应该是获取不到点击事件造成的),而且还需要做其他处理(网上说需要ActivityGroup)。所以放弃了传统的TabHost,使用ViewPager和RadioGroup配合Fragment实现标签页。如果有哪位兄弟知道这是为什么,请一定教教我,多谢Orz!
主体思路:ViewPager每一页存放一个Fragment,每个Fragment是一个要显示的标签页。RadioGroup和RadioButton实现顶部或底部的标签按钮(RelativeLayout很好实现)。ViewPager和RadioGroup是联动的,ViewPager切换时,根据回调,调整RadioGroup中Button的checked状态;点击RadioGroup中的按钮时,操作ViewPager滑动到指定的index,也就是想要的页面Fragment。改变一个,根据回调修改另一个。以实现标签页的效果。
主Activity继承自FragmentActivity,引用main.xml,初始化ViewPager和RadioGroup,用一个数组存放所有的RadioButton,当ViewPager的index修改时,根据index修改数组中对应按钮的checked状态。再一个数组存放所有的Fragment,这个数组的作用是为了传给ViewPager的Adapter使用。
有的同学看到Fragment就头疼,感觉很难很复杂的样子,其实跟Activity有很多是相似的,在这个项目中,直接看成Activity也是可以的。在onCreateView中初始化界面的东西就可以了,跟onCreate差不多……
思路就是这样,很简单,下边是代码。
1.mian.xml布局(标签在底部)
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <RadioGroup android:id="@+id/radio_group" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:padding="10dp" android:orientation="horizontal" > <RadioButton android:id="@+id/radio_button_one" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:checked="true" android:gravity="center" android:background="@drawable/radio_btn_one_selector" /> <RadioButton android:id="@+id/radio_button_two" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_marginLeft="10dp" android:button="@null" android:background="@drawable/radio_btn_two_selector" /> </RadioGroup> <android.support.v4.view.ViewPager android:id="@+id/vp_fragment_tab" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_above="@id/radio_group" /> </RelativeLayout>
2.TabFragmentActivity
import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentStatePagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.RadioGroup.OnCheckedChangeListener; public class MainFragmentActivity extends FragmentActivity { public static final int FRAGMENT_COUNT = 2; public static final int FRAGMENT_INDEX_ONE = 0; public static final int FRAGMENT_INDEX_TWO = 1; private RadioGroup mRadioGroup; private RadioButton[] mRadioButtons = new RadioButton[FRAGMENT_COUNT]; private ViewPager mViewPager; private Fragment[] mFragments = new Fragment[FRAGMENT_COUNT]; @Override protected void onCreate(Bundle arg0) { super.onCreate(arg0); setContentView(R.layout.activity_fragment_tab); initView(); } private void initView(){ mRadioGroup = (RadioGroup) findViewById(R.id.radio_group); setRadioGroupListener(); mRadioButtons[FRAGMENT_INDEX_ONE] = (RadioButton) findViewById(R.id.radio_button_one); mRadioButtons[FRAGMENT_INDEX_TWO] = (RadioButton) findViewById(R.id.radio_button_two); mFragments[FRAGMENT_INDEX_ONE] = new OneFragment(); mFragments[FRAGMENT_INDEX_TWO] = new TwoFragment(); mViewPager = (ViewPager) findViewById(R.id.vp_fragment_tab); FragmentStatePagerAdapter paperAdapter = new FragmentStatePagerAdapter(getSupportFragmentManager()) { @Override public int getCount() { return mFragments.length; } @Override public Fragment getItem(int arg0) { return mFragments[arg0]; } }; mViewPager.setAdapter(paperAdapter); mViewPager.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int arg0) { mRadioGroup.setOnCheckedChangeListener(null); mRadioButtons[arg0].setChecked(true); setRadioGroupListener(); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }); } private void setRadioGroupListener() { mRadioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { switch (checkedId) { case R.id.radio_button_one: mViewPager.setCurrentItem(0); break; case <span style="font-family: Arial, Helvetica, sans-serif;">R.id.radio_button_two</span><span style="font-family: Arial, Helvetica, sans-serif;">:</span> mViewPager.setCurrentItem(1); break; default: break; } } }); } }
3.Fragment部分,这是每个标签页,内部的内容加载一个xml就可以了。跟activity一样的操作。
public class OneFragment extends Fragment { private View mView; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { mView = inflater.inflate(<span style="color:#ff0000;">R.layout.activity_one</span>, container, false);//加载你自己的布局文件 // 这里初始化界面控件,设置点击事件等 initView(); return mView; } }
4.RadioButton的图片是个selector,实现不同checked状态显示不用的图。代码:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/bg_btn_one_pressed" android:state_checked="true"></item> <item android:drawable="@drawable/bg_btn_one_normal"></item> </selector>
附加效果:大家应该注意到了,ViewPager的回调中有三个方法,我们只重写了其中一个,获得了跳转后的页面index。
下边这个方法,会通知外层,当前ViewPager的滑动程度,也就是0%时是在第一个页面,50%时是滑动到了一、二两个页面中间,100%时滑动到了第二个页面。这个滑动程度的参数是float arg1。大家可以看到微信的底部导航条,当滑动时,Button的颜色会有深浅变化,应该是跟这个参数有关(完全猜的)。
<span style="white-space:pre"> </span>public void onPageScrolled(int arg0, <span style="color:#ff0000;">float arg1</span>, int arg2) { }以上就是我的实现了,暂时想到了这么多。如有遗漏的会及时补充,也欢迎大家提出意见,给我点鼓励~
转载请标明出处:http://blog.csdn.net/u010241861/article/details/46652577
版权声明:本文为博主原创文章,转载请标明出处。