您的位置: 首页  >  IT文章  >  兔子-Fragment与ViewPager实现切换与侧滑成效

兔子-Fragment与ViewPager实现切换与侧滑成效

分类: IT文章 • 2023-03-30 17:12:23
兔子--Fragment与ViewPager实现切换与侧滑效果


效果图：

兔子-Fragment与ViewPager实现切换与侧滑成效

目录结构：

兔子-Fragment与ViewPager实现切换与侧滑成效

代码分析：

MainActivity.java

package com.example.myfragment;

/**
 * @author Arthur Lee
 * @time 04/08/2014
 * */
import java.util.ArrayList;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.LinearLayout;
import android.widget.RadioButton;

import com.fragment.FirstFragment;
import com.fragment.FourthFragment;
import com.fragment.SecondFragment;
import com.fragment.ThirdFragment;

public class MainActivity extends FragmentActivity {

	ArrayList<Fragment> fragment;
	public static ViewPager viewpager;
	public static ArrayList<RadioButton> rb;
	LinearLayout lLayout;
	// ViewPager的适配器，但为了和Fragment相结合，要自定义适配器
	MyAdapter adapter;

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

	}

	public void initView() {
		viewpager = (ViewPager) findViewById(R.id.main_viewpager);
		lLayout = (LinearLayout) findViewById(R.id.zone_rbt);
		fragment = new ArrayList<Fragment>();
		fragment.add(new FirstFragment());
		fragment.add(new SecondFragment());
		fragment.add(new ThirdFragment());
		fragment.add(new FourthFragment());
	}

	public void initAdapter() {
		adapter = new MyAdapter(getSupportFragmentManager(), fragment);
		viewpager.setAdapter(adapter);
		viewpager.setOnPageChangeListener(myOnPageChangeListener);
		// 默认显示的页面
		viewpager.setCurrentItem(0);
		rb.get(0).setChecked(true);

	}

	public void initButton() {
		rb = new ArrayList<RadioButton>();
		rb.add((RadioButton) findViewById(R.id.rb_first));// 1号
		rb.add((RadioButton) findViewById(R.id.rb_second));// 2号
		rb.add((RadioButton) findViewById(R.id.rb_third));// 3号
		rb.add((RadioButton) findViewById(R.id.rb_fourth));// 4号
		for (int i = 0; i < rb.size(); i++) {
			rb.get(i).setOnClickListener(new MyListener(i));
		}
	}

	public class MyListener implements OnClickListener {
		private int index;

		public MyListener(int index) {
			this.index = index;
		}

		@Override
		public void onClick(View v) {
			viewpager.setCurrentItem(index);
			rb.get(index).setChecked(true);
		}

	}

	OnPageChangeListener myOnPageChangeListener = new OnPageChangeListener() {

		// 页卡状态改变时候。
		@Override
		public void onPageScrollStateChanged(int arg0) {
			Log.i("Main", "onPageScrollStateChanged");

		}

		// 页卡切换过程中
		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			Log.i("Main", "onPageScrolled");
		}

		// 当radioButton被选中
		@Override
		public void onPageSelected(int position) {

			Log.i("Main", "onPageSelected");
			rb.get(position).setChecked(true);
		}
	};

}

MyAdapter.java 

package com.example.myfragment;

import java.util.ArrayList;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyAdapter extends FragmentPagerAdapter {
	private ArrayList<Fragment> fragment;

	public MyAdapter(FragmentManager fm) {
		super(fm);
		// TODO Auto-generated constructor stub
	}

	public MyAdapter(FragmentManager fm, ArrayList<Fragment> fragment) {
		super(fm);
		// TODO Auto-generated constructor stub
		this.fragment = fragment;
	}

	@Override
	public Fragment getItem(int position) {
		// TODO Auto-generated method stub
		return fragment.get(position);
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return fragment.size();
	}

}


FirstFragment.java

package com.fragment;
/**
 * @author Arthur Lee
 * @time 04/08/2014
 * */
import com.example.myfragment.R;

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

public class FirstFragment extends Fragment{
	    //缓存视图
		private View view;

		@Override
		public void onCreate(Bundle savedInstanceState) {
			// TODO Auto-generated method stub
			super.onCreate(savedInstanceState);
		}
	    
		@Override
		public View onCreateView(LayoutInflater inflater, ViewGroup container,
				Bundle savedInstanceState) {
			// TODO Auto-generated method stub
			//如果当前视图为空，初始化视图
			if(view == null){
				//指定当前视图在viewpager中显示的是view_first。xml,通过LayoutInflater来指定.
				view = inflater.inflate(R.layout.view_first, null);
			}
			//指定当前视图的父类，以便调用父类的移除功能。
		    ViewGroup parent = (ViewGroup) view.getParent();
		    if (parent != null) {
				parent.removeView(view);
			}
		
			return view;
		}
}

其他的三个与这个类似，不再提供。

下面是布局文件

main_activity.xml

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <!-- 纵向分布两个，以AB标记 -->


    <!-- A -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" >

        <android.support.v4.view.ViewPager
            android:id="@+id/main_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
        </android.support.v4.view.ViewPager>
    </LinearLayout>
    <!-- B -->

    <LinearLayout
        android:id="@+id/zone_rbt"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="6"
        android:orientation="horizontal" >

        <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/rb_first"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/holo_blue_light"
                android:text="1号" />

            <RadioButton
                android:id="@+id/rb_second"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/holo_green_light"
                android:text="2号" />

            <RadioButton
                android:id="@+id/rb_third"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/holo_blue_light"
                android:text="3号" />

            <RadioButton
                android:id="@+id/rb_fourth"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/holo_green_light"
                android:text="4号" />
        </RadioGroup>
    </LinearLayout>

</LinearLayout>

view_first.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <!-- @author Arthur Lee -->
    <TextView
        android:id="@+id/view_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一页面"
        android:textSize="20sp" />

</LinearLayout>


其他的三个布局文件与这个类似，不再提供。

相关推荐