ViewPager和RadioGroup实现页面切换效果

最新推荐文章于 2022-04-02 20:11:58 发布

原创最新推荐文章于 2022-04-02 20:11:58 发布 · 446 阅读

CC 4.0 BY-SA版权

本文介绍了如何利用ViewPager和RadioGroup在Android中实现页面切换效果。通过ViewPager的滑动特性展示多个界面，并结合RadioGroup进行底部按钮切换。文章详细讲解了关键代码实现，包括BaseFragment和BasePager的抽象类设计，以及HomeFragment的实现，展示了如何填充数据并处理用户交互。

ViewPager和RadioGroup实现页面切换效果

1.ViewPager类提供了多界面切换的新效果，新效果有如下特征：

<1>当前显示一组界面中的其中一个界面；

<2>当用户通过左右滑动界面时，当前的屏幕显示当前界面和下一个界面的一部分；

<3>滑动结束后，界面自动跳转到当前选择的界面中。

2.ViewPager详细说明

Android-support-v4.jar 是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包，里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一利用它，我们可以做很多事情，从最简单的页面导航，到页面菜单等等。官方文档api地址

http://developer.android.com/reference/android/support/v4/view/ViewPager.html

下面我们就实现一个页面内容和底部的按钮滑动切换的效果吧,本次用到了注解,所以要导入开源的项目xutillibrary

3这次只给出部分重要的核心代码,首先需要一个内容页的帧布局,用一个上面是ViewPager下面是RadioGroup的布局来替换,非常类似上次写的侧拉菜单,都是替换而已

给出MianActivity.Java的部分代码

[java]view plaincopy 
   
 public void onCreate(Bundle savedInstanceState) {  
         super.onCreate(savedInstanceState);  
         setContentView(R.layout.content);  
     //替换上面的R.layout.content帧布局  
     HomeFragment homeFragment = new HomeFragment();  
          getSupportFragmentManager()  
          .beginTransaction()  
          .replace(R.id.content_frame, homeFragment, "HOME")  
          .commit();  

下面是要替换的布局

[html]view plaincopy 
   
 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
     android:layout_width="fill_parent"  
     android:layout_height="fill_parent"  
     android:orientation="vertical" >   
     <android.support.v4.view.ViewPager  
         android:id="@+id/layout_content"  
         android:layout_width="match_parent"  
         android:layout_height="0dip"  
         android:layout_weight="1.0" />  
   
     <RadioGroup  
         android:id="@+id/main_radio"  
         android:layout_width="fill_parent"  
         android:layout_height="60dp"  
         android:layout_gravity="bottom"  
         android:background="@drawable/bottom_tab_bg"  
         android:gravity="center_vertical"  
         android:orientation="horizontal"  
         android:paddingTop="2dp" >  
   
         <RadioButton  
             android:id="@+id/rb_function"  
             style="@style/main_tab_bottom"  
             android:drawableTop="@drawable/icon_function"  
             android:text="@string/tab_function" />  
   
         <RadioButton  
             android:id="@+id/rb_news_center"  
             style="@style/main_tab_bottom"  
             android:drawableTop="@drawable/icon_newscenter"  
             android:text="@string/tab_news_center" />  
   
         <RadioButton  
             android:id="@+id/rb_smart_service"  
             style="@style/main_tab_bottom"  
             android:drawableTop="@drawable/icon_smartservice"  
             android:text="@string/tab_smart_service" />  
   
         <RadioButton  
             android:id="@+id/rb_gov_affairs"  
             style="@style/main_tab_bottom"  
             android:drawableTop="@drawable/icon_govaffairs"  
             android:text="@string/tab_gov_affairs" />  
   
         <RadioButton  
             android:id="@+id/rb_setting"  
             style="@style/main_tab_bottom"  
             android:drawableTop="@drawable/icon_setting"  
             android:text="@string/tab_setting" />  
     </RadioGroup>  
   
 </LinearLayout>  

再给出HomeFragment 类,它继承与BaseFragment,而BaseFragment又继承于Fragment

为什么要这样写呢?便于重复使用代码,分工合作等.

这是BaseFragment类,是HomeFragment 的父类,具体的数据和将要显示的view由子类去实现,因为每个页面的数据和View是不同的

[java]view plaincopy 
   
 public abstract class BaseFragment extends Fragment {  
     public  Context context;  
     public View view;  
       
     public abstract View initView();  
     public abstract void initData();  
     //初始化  
     @Override  
     public void onCreate(Bundle savedInstanceState) {  
         super.onCreate(savedInstanceState);  
         context =getActivity();  
     }  
     //xml-->View将要显示的View  
     @Override  
     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
             Bundle savedInstanceState) {  
         view = initView();  
         return view;  
     }  
     //填充数据  
     @Override  
     public void onActivityCreated(Bundle savedInstanceState) {  
         super.onActivityCreated(savedInstanceState);  
         initData();  
     }  
       
 }  

[java]view plaincopy 
   
    

[java]view plaincopy 
   
 看看子类HomeFragment的代码有两个方法就是要实现父类的抽象方法  
 运用到了注解的知识,其实可以用findViewById替代,但是在学知识的期间,  
 自然是学得越多越好. MyViewPager 可以用ViewPager,下面是为了屏蔽预加载效果  

[java]view plaincopy 
   
    

[java]view plaincopy 
   
 public class HomeFragment extends BaseFragment {  
     @ViewInject(R.id.layout_content)  
     private MyViewPager layout_content;    
     @ViewInject(R.id.main_radio)  
     private RadioGroup main_radio;  
     //这BasePager每个ViewPager页面的父类  
     private List<BasePager> pagerList = new ArrayList<BasePager>();  
       
     @Override  
     public View initView() {  
         view = View.inflate(context, R.layout.frag_home, null);  
         //通过xutil(注解,反射,代理,泛型)  
         ViewUtils.inject(this, view);  
         return view;  
     }  
   
     @Override  
     public void initData() {  
     //通过数据适配器把ViewPager填充起来  
        //;  
         pagerList.clear();  
         pagerList.add(new FunctionPager(context));  
         pagerList.add(new NewCenterPager(context));  
         pagerList.add(new SmartServicePager(context));  
         pagerList.add(new GovAffarisPager(context));  
         pagerList.add(new SettingPager(context));  
           
         layout_content.setAdapter(new MyPagerAdapter());  
         main_radio.setOnCheckedChangeListener(new OnCheckedChangeListener() {             
             @Override  
             public void onCheckedChanged(RadioGroup group, int checkedId) {  
                 //通过点击按钮显示不同的ViewPager项  
                 switch (checkedId) {  
                 case R.id.rb_function:  
                     layout_content.setCurrentItem(0);  
                     break;  
                 case R.id.rb_news_center:  
                     layout_content.setCurrentItem(1);  
                     break;  
                 case R.id.rb_smart_service:  
                     layout_content.setCurrentItem(2);  
                     break;  
                 case R.id.rb_gov_affairs:  
                     layout_content.setCurrentItem(3);  
                     break;  
                 case R.id.rb_setting:  
                     layout_content.setCurrentItem(4);  
                     break;  
                 }  
                   
             }  
         });  
         //默认选中首页  
         main_radio.check(R.id.rb_function);  
     }  
      class MyPagerAdapter extends PagerAdapter{  
          
             @Override  
             public int getCount() {  
                 return pagerList.size();  
             }  
             //谷歌官方推荐吧两个参数相等就OK了  
             @Override  
             public boolean isViewFromObject(View arg0, Object arg1) {  
                 return arg0 == arg1;  
             }  
             //添加的每一项  
              @Override  
             public Object instantiateItem(ViewGroup container, int position) {  
                  container.addView(pagerList.get(position).getRootView());  
                  return pagerList.get(position).getRootView();  
             }  
              //销毁  
              @Override  
             public void destroyItem(ViewGroup container, int position, Object object) {  
                  container.removeView((View) object);  
              }  
           
 }    
 }  

[java]view plaincopy 
   
    

[java]view plaincopy 
   
 再看看BasePager 的类和上面的是不是一样,具体的数据和要显示的View有子类实现  
 所以FunctionPager,NewCenterPager,SmartServicePager,SettingPager,GovAffarisPager五个类只需要继承BasePager实现两个抽象方法就行了那就列举一个吧  

[java]view plaincopy 
   
    

[java]view plaincopy 
   
 public abstract class BasePager {  
     public View view;  
     public Context context;  
   public BasePager(Context context) {  
      //构建单曲界面展示效果,但是父类对子类未知  
       //上下文坏境需要给子类的initView()用.所以要放在上面  
       this.context=context;  
       view =initView();  
   }  
     public abstract View initView();  
     public abstract void initData();  
     //返回View getRootView  
     public View getRootView(){  
     return view;  
    }  
 }  
 给一个FunctionPager代码  
 package com.smart.zhbj_gaomin.base.pager;  
   
 import android.content.Context;  
 import android.view.View;  
 import android.widget.TextView;  
   
 import com.smart.zhbj_gaomin.base.BasePager;  
   
 public class FunctionPager extends BasePager {  
   
     public FunctionPager(Context context) {  
         super(context);  
     }  
   
     @Override  
     public View initView() {  
         TextView textView =new TextView(context);  
         textView.setText("首页");  
         return textView;  
     }  
   
     @Override  
     public void initData() {  
         // TODO Auto-generated method stub  
   
     }  
   
 }  

基本核心的代码都写完了,运行起来表面没什么问题,但是ViewPager有一个特性

就是预加载功能,就是在当前页面,会预加载下一个页面,这对于此处的要求,不太好,所以要利用官方源代码,修改一个地方就好了,找到官方API,这个类LazyViewPager,修改下面,再让MyViewPager继承它就行了

//屏蔽预加载功

private static final int DEFAULT_OFFSCREEN_PAGES = 0;//默认viewpager当前变量的�?1

private static final int MAX_SETTLE_DURATION = 600; //