«

Android 使用ViewPager和RadioGroup配合Fragment实现标签页,可点击按钮切换、滑动切换。

时间:2024-3-2 19:54     作者:韩俊     分类: Android


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

版权声明:本文为博主原创文章,转载请标明出处。

标签: android

热门推荐