本人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