RadioButton和ViewPager实现页面切换效果

BaseFragmentActivity中包含几个Fragment滑动切换页面这种效果是很常见的效果,实现的方式也有很多,TabHost可以实现其效果,不过TabHost的实现方式相比于其他的方法有点复杂,所以TabHost
基本放弃掉了,在这里用的是RadioButton和ViewPager的方式来实现的,android.support.v4.view.ViewPager本来就有滑动切换的效果,将RadioButton点击切换效果和ViewPager的滑动切换效果结合起来就实现
效果了,并且比较方便实现;以下为效果实现主要代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/list_bg_color">

    <RelativeLayout
        android:id="@+id/layout2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#f5f5f5" >

        <RadioGroup
            android:id="@+id/radiogroup1"
            android:layout_width="fill_parent"
            android:layout_height="30dp"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/rb1"
                style="@style/RadioButtonTitle"
                android:checked="true"
                android:text="首页"
                android:textColor="@drawable/tabs_radio_material" />

            <RadioButton
                android:id="@+id/rb2"
                style="@style/RadioButtonTitle"
                android:text="通讯录"
                android:textColor="@drawable/tabs_radio_material" />
            <RadioButton
                android:id="@+id/rb3"
                style="@style/RadioButtonTitle"
                android:text="发现"
                android:textColor="@drawable/tabs_radio_material" />

            <RadioButton
                android:id="@+id/rb4"
                style="@style/RadioButtonTitle"
                android:text="我的"
                android:textColor="@drawable/tabs_radio_material" />

        </RadioGroup>

        <View
            style="@style/listViewHeaderLineStyle"
            android:layout_below="@id/radiogroup1" />

        <ImageView
            android:id="@+id/id_tab_line"
            style="@style/radionButtonView"
            android:layout_below="@id/radiogroup1" />
    </RelativeLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/layout2" >
    </android.support.v4.view.ViewPager>

</RelativeLayout>

以上为布局页面;

public class MainActivity extends FragmentActivity {
    private RadioGroup radiogroup1;
    private RadioButton rb1,rb2,rb3,rb4;
    private ImageView tabLine;
    private int screenWidth;
    private FragmentManager fm;
    private ViewPager viewpager;
    private ArrayList<Object> items=new ArrayList<Object>();
    private ViewPagerAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initEvent();
    }
    private void initView(){
        radiogroup1 = (RadioGroup) findViewById(R.id.radiogroup1);
        rb1= (RadioButton) findViewById(R.id.rb1);
        rb2= (RadioButton) findViewById(R.id.rb2);
        rb3= (RadioButton) findViewById(R.id.rb3);
        rb4= (RadioButton) findViewById(R.id.rb4);

        tabLine = (ImageView) findViewById(R.id.id_tab_line);
        screenWidth = getW(MainActivity.this);
        RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) tabLine.getLayoutParams();// 获取控件的布局参数对象
        lp.width = screenWidth / 4;
        tabLine.setLayoutParams(lp); // 设置该控件的layoutParams参数

        viewpager = (ViewPager) findViewById(R.id.viewpager);
        fm = this.getSupportFragmentManager();

        items.add(new FristFragment());
        items.add(new SecondFragment());
        items.add(new ThridFragment());
        items.add(new FourFragment());

        adapter=new ViewPagerAdapter(fm, items);
        viewpager.setAdapter(adapter);
        viewpager.setCurrentItem(0, false);
        viewpager.setOffscreenPageLimit(items.size());
    }
    @SuppressWarnings("deprecation")
    private void initEvent(){
        radiogroup1.setOnCheckedChangeListener(new OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.rb1:
                        viewpager.setCurrentItem(0);// 选择某一页

                        break;
                    case R.id.rb2:
                        viewpager.setCurrentItem(1);
                        break;
                    case R.id.rb3:
                        viewpager.setCurrentItem(2);// 选择某一页

                        break;
                    case R.id.rb4:
                        viewpager.setCurrentItem(3);
                        break;

                }
            }
        });
        viewpager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                switch (position) {
                    case 0:
                        rb1.setChecked(true);
                        break;
                    case 1:
                        rb2.setChecked(true);
                        break;
                    case 2:
                        rb3.setChecked(true);
                        break;
                    case 3:
                        rb4.setChecked(true);
                        break;
                }
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                RelativeLayout.LayoutParams lp=(RelativeLayout.LayoutParams) tabLine.getLayoutParams();
                //获取组件距离左侧组件的距离
                lp.leftMargin=(int) ((positionOffset+position)*screenWidth/4);
                tabLine.setLayoutParams(lp);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
    /*
    * 获取屏幕的宽度
    */
    private int getW(Context context){
        DisplayMetrics dm = new DisplayMetrics();
        WindowManager windowMgr = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        windowMgr.getDefaultDisplay().getMetrics(dm);
        return dm.widthPixels;
    }
}

以上为主页面代码;

public class ViewPagerAdapter extends FragmentPagerAdapter {
    private ArrayList<Object> items;
    public ViewPagerAdapter(FragmentManager fm,ArrayList<Object> items) {
        super(fm);
        this.items = items;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
        case 0:
            return (Fragment) items.get(position);
        case 1:
            return (Fragment) items.get(position);
        case 2:
            return (Fragment) items.get(position);
        case 3: 
            return (Fragment) items.get(position);
        case 4: 
            return (Fragment) items.get(position);
        }
        return (Fragment) items.get(position);

    }

    @Override
    public int getCount() {
        return items.size();
    }

}

以上为适配器代码;

public class FristFragment extends Fragment {
    private View view;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.frist_fragment, container, false);
        return view;
    }
}

Fragment 中代码;在每个Fragment可以去实现每个页面的效果,不过在这里要注意FragmentManager fm = this.getSupportFragmentManager();导包和Fragment导包一致,一般为android.support.v4,如果导包不一致就会导致程序运行错误;
运行效果:
这里写图片描述
源码:http://download.csdn.net/detail/wangwo1991/9753986

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值