ViewPager(下)--利用Fragment实现漂亮的页面切换

之前用的ViewPager适用于简单的广告切换,但实现页面间的切换最好是用官方推荐的Fragment来处理.

本人力争做到最简单、最实用,是想以后用到的时候可以方便的拿过来复制就可以了.

效果图:

      
 

功能:可点击按钮切换页面,也可滑动界面切换页面.

文件:java文件5个、xml文件4个、.9图片4张

java主类:

<span style="font-size:12px;">package com.example.viewpageractivity;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.widget.Button;

public class MainActivity extends FragmentActivity {

	public ViewPager mViewPager;
	public Button bt_myclass_studing;
	public Button bt_myclass_over;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //调用封装好的actionbar
        BuildingActionBar.setActionBarLayout(R.layout.actionbar,
        		MainActivity.this);

        bt_myclass_studing = (Button)this.findViewById(R.id.id_myclass_button_studing);
		bt_myclass_over = (Button)this.findViewById(R.id.id_myclass_button_over);

		bt_myclass_studing.setText("正在进行");
		bt_myclass_over.setText("已结课");

		bt_myclass_studing.setOnClickListener(new myButtonListener());
		bt_myclass_over.setOnClickListener(new myButtonListener());

		//构建适配器
        FragmenAdapter mFragmenAdapter = new FragmenAdapter(this.getSupportFragmentManager());

        mViewPager = (ViewPager)this.findViewById(R.id.id_myclass_viewpager);

        mViewPager.setAdapter(mFragmenAdapter);

        //添加滑动监听
        mViewPager.setOnPageChangeListener(new OnPageChangeListener(){
			@Override
			public void onPageScrollStateChanged(int arg0) {}
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {}
			@Override
			public void onPageSelected(int arg0) {
				switch(arg0){
				case 0:
					setButtonColor(true);
					break;
				case 1:
					setButtonColor(false);
					break;
				}
			}
		});

        setButtonColor(true);
    }

	/**
	 * 设置按钮背景色
	 * 附上色值
	 * liteblue : #a1dff8
	 * */
	public void setButtonColor(boolean myTouchButton) {

		if (myTouchButton == true) {
			//当点击左边按钮的点击效果
			bt_myclass_studing.setBackgroundResource(R.drawable.title_switch_left_on);
			bt_myclass_studing.setTextColor(getResources().getColor(R.color.white));
			bt_myclass_over.setBackgroundResource(R.drawable.title_switch_right_off);
			bt_myclass_over.setTextColor(getResources().getColor(R.color.liteblue));
			mViewPager.setCurrentItem(0, true);
		} else {
			//当点击右边按钮的点击效果
			bt_myclass_over.setBackgroundResource(R.drawable.title_switch_right_on);
			bt_myclass_over.setTextColor(getResources().getColor(R.color.white));
			bt_myclass_studing.setBackgroundResource(R.drawable.title_switch_left_off);
			bt_myclass_studing.setTextColor(getResources().getColor(R.color.liteblue));
			mViewPager.setCurrentItem(1, true);
		}
	}

	/**
	 * 按钮的监听
	 * */
	class myButtonListener implements View.OnClickListener{

		@Override
		public void onClick(View arg0) {
			switch(arg0.getId()){
			case R.id.id_myclass_button_studing:
				setButtonColor(true);
				break;
			case R.id.id_myclass_button_over:
				setButtonColor(false);
				break;
			}
		}
	}

}
</span>

FragmentPagerAdapter适配器类

<span style="font-size:12px;">package com.example.viewpageractivity;

import java.util.ArrayList;
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class FragmenAdapter extends FragmentPagerAdapter{

	List<Fragment> mFragment;

	public FragmenAdapter(FragmentManager fm) {
		super(fm);

		mFragment = new ArrayList<Fragment>();

		mFragment.add(new FragmentActivityA());

		mFragment.add(new FragmentActivityB());

	}

	@Override
	public Fragment getItem(int arg0) {
		return mFragment.get(arg0);
	}

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

}
</span>

FragmentActivityA类

<span style="font-size:12px;">package com.example.viewpageractivity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentActivityA extends Fragment{

	public View myView;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {

		//添加布局文件
		myView = inflater.inflate(R.layout.fragmenta, container, false);

		return myView;

	}
}
</span>

FragmentActivityB类

<span style="font-size:12px;">package com.example.viewpageractivity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentActivityB extends Fragment{

	public View myView;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {

		//添加布局文件
		myView = inflater.inflate(R.layout.fragmentb, container, false);

		return myView;
	}

}
</span>

之前用到的封装好的Actionbar类

<span style="font-size:12px;">package com.example.viewpageractivity;

import android.app.ActionBar;
import android.app.ActionBar.LayoutParams;
import android.app.Activity;
import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
/**
 * 设置action bar
 * */
public class BuildingActionBar {
	public static ActionBar mActionbar;
	/**
	 * 设置action bar
	 * */
	public static void setActionBarLayout(int layoutID,Activity mActivity) {

		mActionbar = mActivity.getActionBar();

		if (mActionbar != null) {

			// 设置home标题隐藏
			mActionbar.setDisplayShowHomeEnabled(false);

			// 使自定义的普通View能在title栏显示,即actionBar.setCustomView能起作用
			mActionbar.setDisplayShowCustomEnabled(true);

			LayoutInflater inflator = (LayoutInflater) mActivity
					.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

			View v = inflator.inflate(layoutID, null);

			ActionBar.LayoutParams layout = new ActionBar.LayoutParams(
					LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

			mActionbar.setCustomView(v, layout);

		} else {
			Log.e("BuildingActionBar", "actionbar为空");
		}
	}
}
</span>

actionbar的xml文件

<span style="font-size:12px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/actionbarLayoutId"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#1D92F9" > 

    <TextView
        android:id="@+id/actionbar_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:textColor="#fff"
        android:layout_marginLeft="3dip"
        android:text="左边"
        android:textSize="20sp" />

      <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_centerVertical="true" >

        <Button
            android:id="@+id/id_myclass_button_studing"
            android:layout_width="wrap_content"
            android:layout_height="48dip"
            android:background="@drawable/title_switch_left_off"
            android:textColor="#A3A3A3"
            android:textSize="15sp" />

        <Button
            android:id="@+id/id_myclass_button_over"
            android:layout_width="wrap_content"
            android:layout_height="48dip"
            android:layout_toRightOf="@id/id_myclass_button_studing"
            android:background="@drawable/title_switch_right_off"
            android:textColor="#A3A3A3"
            android:textSize="15sp" />
    </RelativeLayout>

</RelativeLayout></span>

主类的xml文件

<span style="font-size:12px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/id_myclass_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout></span>

还有两个fragmentActivity 的布局文件可随意定义 就不再贴上来了

ViewPager(下)--利用Fragment实现漂亮的页面切换

时间: 2024-11-05 20:46:43

ViewPager(下)--利用Fragment实现漂亮的页面切换的相关文章

利用pushState开发无刷页面切换

利用pushState开发无刷页面切换<转> 相关文档:https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulatingthebrowser_history 实现目标 页面的跳转(前进后退,点击等)不重新请求页面 页面URL与页面展现内容一致(符合人们对传统网页的认识) 在不支持的浏览器下降级成传统网页的方式 使用到的API history.state 当前URL下对应的状态信息.如果当前URL不是通过pushSta

centos下利用phantomjs来完成网站页面快照截图

最近研究了下phantomjs,感觉还是非常不错的. 首先到官网下载一个源码包 http://phantomjs.org/download.html 点击源码包下载如图: 然后在linux下将必要的一些软件都用yum方式先安装好 sudo yum -y install gcc gcc-c++ make flex bison gperf ruby openssl-devel freetype-devel fontconfig-devel libicu-devel sqlite-devel libp

ionic-native-transitions调用原生页面切换实现ionic路由切换

废话不多说:ionic-native-transitions调用原生页面切换实现ionic路由切换,从而大大提升ionic应用的性能. ionic-native-transitions是一个ionic的的页面切换插件,主要功能是可以让我们在不改变ionic路由的情况下,实现调用原生的页面切换,从而提升App性能.还可以让原生页面切换和ionic页面切换同时存在. ionic-native-transitions演示图片: ionic-native-transitions  github地址 :

Android 利用ViewPager实现底部圆点导航左右滑动效果以及Fragment页面切换

上一篇博文我们介绍了利用ViewPager和Fragment实现顶部滑块左右滑动效果,具体参考(http://blog.csdn.net/a123demi/article/details/39480385). 而本篇博文将实例讲解利用ViewPager实现底部圆点导航左右滑动效果,以及被滑动界面实现监听事件,同时通过Fragment实现页面的切换. 对于该效果的实现,需要实现以下几个问题: 1. 底部圆点加载和实现方法? 2. 怎样实现左右滑动效果? 3. 被滑动页面,怎样实现监听事件? 4.

ViewPager和Fragment组合 v4包下的页面切换

/* *主页面下 */ //-------------主页面下---------------------- package com.example.viewpagerfragment; import android.os.Bundle;import android.app.Activity;import android.graphics.Color;import android.support.v4.app.Fragment;import android.support.v4.app.Fragm

ViewPager之Fragment页面切换

一.概述 ViewPager是android-support-v4中提供的类,它是一个容器类,常用于页面之间的切换. 继上篇文章<ViewPager之引导页>之后,本文主要介绍ViewPager更为通用的实践:ViewPager搭配Fragment实现页面切换. 这种实现方式相对于上篇文章而言,可以更好的支持不同页面各自的复杂逻辑,与此同时,也能够保障页面之间的耦合度尽可能的低. 按照惯例,先晒出效果图:        二.实现思路 首先分析一下不同区域的交互需求: 中间灰色区域除了要支持三套

友盟页面统计 - 关于Viewpager中的Fragment的生命周期

Activity和Fragment各自理论上的生命周期 Activity的生命周期是较为经典也最清晰的.在此不表: Fragment从出现到广泛运用也有一段时间了.其标准生命周期也仅比Activity多出一些流程,如onCreateView(); Activity和Fragment在实际编码中必然是结合出现的,表现为Activity作为容器,装载有一个或若干个Fragment: 装载多个Fragment时,常常使用TabHost和Viewpager作为载体: 在实际编码中发现,Activity和

ViewPager+Fragment+广播来实现一个滑动页面切换

要实现这样一个页面,上面的好说,下面的是一个滑动视图,我们想到的是用viewpager来实现,但是这个有一个问题,按照平时的写法,我们会写5个Activity放到viewpager里面去,这自然是可以实现的.但是这里有一个问题,一进来,在主界面manager.startActivity(id, intent).getDecorView();来取得view加到viewpager里,这样一启动,五个子界面都同时启动,都去加载数据,会导致很卡,也浪费了资源,我们想法是,默认只加载第一个页面,滑到第二个

Android中使用ViewPager实现屏幕页面切换和页面轮播效果

之前关于如何实现屏幕页面切换,写过一篇博文<Android中使用ViewFlipper实现屏幕切换>,相比ViewFlipper,ViewPager更适用复杂的视图切换,而且Viewpager有自己的adapter,这也让其适应复杂对象,实现数据的动态加载. ViewPager是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api.而viewpager就是其中之一,利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等. 下面我们就展示下Vie