ITKeyword,专注技术干货聚合推荐

注册 | 登录

ViewPager和RadioGroup实现页面切换效果

u013128651 分享于 2016-01-23

推荐:使用RadioGroup+ViewPager+Fragment实现带滑动的页卡效果TabHost时遇到的问题

最近的项目中有一两个界面需要实现带滑动的页卡效果,我这次的需求是大概是这样的:有三个tab,左边的tab要求他的左上角与左下角都是带圆角的,右上角和右下角都

2018阿里云全部产品优惠券(新购或升级都可以使用,强烈推荐)
领取地址https://promotion.aliyun.com/ntms/yunparter/invite.html

                                                                  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的部分代码

推荐:实现页面切换(动画效果实现,不用ViewPager)

源码地址 http://download.csdn.net/detail/u013210620/8791687 先看主页面布局activity_main <xml version="1.0" encoding="utf-8"><RelativeLayout xmlns:a

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();


 

下面是要替换的布局

<?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是不同的

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();
	}
	
}
 
看看子类HomeFragment的代码有两个方法就是要实现父类的抽象方法
运用到了注解的知识,其实可以用findViewById替代,但是在学知识的期间,
自然是学得越多越好. MyViewPager 可以用ViewPager,下面是为了屏蔽预加载效果
 
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);
	    	 }
	    
}  
}
 
再看看BasePager 的类和上面的是不是一样,具体的数据和要显示的View有子类实现
所以FunctionPager,NewCenterPager,SmartServicePager,SettingPager,GovAffarisPager五个类只需要继承BasePager实现两个抽象方法就行了那就列举一个吧
 
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; //

 

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

本人Android新手,很多东西都是现学现卖。。。模仿大神们,分享一下自己的解决办法,也做个记录。大家认为有什么问题随时沟通,一般你都是对的=。= 最近做的项目

                                                                  ViewPager和RadioGroup实现页面切换效果 1.ViewPager类提供了多界面切换的新效果,新效果有如下特征: <1>当前显示一组界

相关阅读排行


用户评论

游客

相关内容推荐

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。