android中 Fragment中的viewpager

       这是在Fragment中写viewpager,在这个Fragment中嵌入三个Fragment,用viewpager实现在这个Fragment中三个Fragment的滑动替换。在写viewpager之前看过很多网上的资料,csdn和github上都有很多关于viewpager的文章写得都很好,我将他们的方法与自己的程序综合了一下,写成了这个Fragment中的viewpager。

界面实现效果图:

1.首先这个Fragment的程序:LoginFragment.java

public class LoginFragment extends Fragment {

	Resources resources;
	private ViewPager mPager;
	private ArrayList<Fragment> fragmentsList;
	private ImageView ivBottomLine;
	private TextView tvTab1, tvTab2, tvTab3;

	private int currIndex = 0;
	private int bottomLineWidth;
	private int offset = 0;
	private int position_one;
	private int position_two;
	public final static int num = 3;
	Fragment login1;
	Fragment login2;
	Fragment login3;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View view = inflater.inflate(R.layout.fragment_login, container, false);

		this.resources = getResources();
		mPager = (ViewPager) view.findViewById(R.id.vPager);


		login1 = new LoginFragment1();
		login2 = new LoginFragment2();
		login3 = new LoginFragment3();

		tvTab1 = (TextView) view.findViewById(R.id.tv_tab_1);
		tvTab2 = (TextView) view.findViewById(R.id.tv_tab_2);
		tvTab3 = (TextView) view.findViewById(R.id.tv_tab_3);

		initWidth(view);
		initTextView(view);
		initViewPager(view);

		TranslateAnimation animation = new TranslateAnimation(offset,
				position_two, 0, 0);

		animation.setFillAfter(true);
		animation.setDuration(30);
		ivBottomLine.startAnimation(animation);

		return view;
	}

	public void initTextView(View parentView) {
		// TODO Auto-generated method stub
		tvTab1.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				mPager.setCurrentItem(0);
			}
		});
		tvTab2.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				mPager.setCurrentItem(1);
			}
		});
		tvTab3.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				mPager.setCurrentItem(2);
			}
		});
	}

	private void initViewPager(View parentView) {
		fragmentsList = new ArrayList<Fragment>();
		fragmentsList.add(login1);
		fragmentsList.add(login2);
		fragmentsList.add(login3);

		mPager.setAdapter(new MyFragmentPagerAdapter(getChildFragmentManager(),
				fragmentsList));
		mPager.setOnPageChangeListener(new MyOnPageChangeListener());
		mPager.setCurrentItem(2);

	}

	private void initWidth(View parentView) {
		ivBottomLine = (ImageView) parentView.findViewById(R.id.iv_bottom_line);
		bottomLineWidth = ivBottomLine.getLayoutParams().width;
		DisplayMetrics dm = new DisplayMetrics();
		getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
		int screenW = dm.widthPixels;
		offset = (int) ((screenW / num - bottomLineWidth) / 2);
		int avg = (int) (screenW / num);
		position_one = avg + offset - 8;
		position_two = 2 * avg + offset - 18;

	}

	public class MyOnPageChangeListener implements OnPageChangeListener {

		@Override
		public void onPageSelected(int arg0) {
			Animation animation = null;
			switch (arg0) {
			case 0:
				if (currIndex == 1) {
					animation = new TranslateAnimation(position_one, offset, 0,
							0);
				}
				if (currIndex == 2) {
					animation = new TranslateAnimation(position_two, offset, 0,
							0);
				}
				break;
			case 1:
				if (currIndex == 0) {
					animation = new TranslateAnimation(offset, position_one, 0,
							0);
				}
				if (currIndex == 2) {
					animation = new TranslateAnimation(position_two,
							position_one, 0, 0);
				}
				break;
			case 2:
				if (currIndex == 1) {
					animation = new TranslateAnimation(position_one,
							position_two, 0, 0);
				}
				if (currIndex == 0) {
					animation = new TranslateAnimation(offset, position_two, 0,
							0);
				}
				break;

			default:
				break;
			}

			currIndex = arg0;
			animation.setFillAfter(true);
			animation.setDuration(30);
			ivBottomLine.startAnimation(animation);
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
		}

		@Override
		public void onPageScrollStateChanged(int arg0) {
		}
	}

}


 这个Fragment的布局:fragment_login.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#d0d0d0"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/ll_top_viewer"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#CC0000"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="7"
            android:gravity="center"
            android:text="我"
            android:textColor="#ffffff"
            android:textSize="24sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp"
        android:background="#ffffff"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/img_myview"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:src="@drawable/myview" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:textColor="#000000"
                android:textSize="20sp" />

            <TextView
                android:id="@+id/tv_email"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:textColor="#000000"
                android:textSize="13sp" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center" >

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:background="#ffffff"
            android:gravity="center"
            android:paddingTop="10dp" >

            <TextView
                android:id="@+id/tv_tab_1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1.0"
                android:gravity="center"  
                android:text="我发表的"
                android:textColor="#000000"
                android:textSize="18sp" />
            
            <ImageView android:layout_width="1dp"
                android:layout_height="20dp"
                android:layout_gravity="center"
                android:src="@drawable/dividegrey"/>

            <TextView
                android:id="@+id/tv_tab_2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1.0"
                android:gravity="center"
                android:text="关于软件"
                android:textColor="#000000"
                android:textSize="18sp" />
            
            <ImageView android:layout_width="1dp"
                android:layout_height="20dp"
                android:layout_gravity="center"
                android:src="@drawable/dividegrey"/>
            
            <TextView
                android:id="@+id/tv_tab_3"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1.0"
                android:gravity="center"
                android:text="登录软件"
                android:textColor="#000000"
                android:textSize="18sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="vertical"
            android:paddingBottom="3dp" >

            <ImageView
                android:id="@+id/iv_bottom_line"
                android:layout_width="100dp"
                android:layout_height="2dp"
                android:scaleType="matrix"
                android:src="@drawable/below" />
        </LinearLayout>
    </LinearLayout>
    
    <!-- android:scaleType="matrix" -->

    <android.support.v4.view.ViewPager
        android:id="@+id/vPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_gravity="center"
        android:layout_weight="1.0"
        android:background="#ffffff"
        android:flipInterval="30"
        android:persistentDrawingCache="animation" />


</LinearLayout>

2.这格Fragment中viewpager切换的又有三个Fragment,这仨个Fragment中的方法需要自己写,在这里我的例子用来特别说明在这三个的其中一个Fragment的点击事件使界面滑动到另一个Fragment,

①viewpager的”登陆软件“界面LoginFragment3.java的程序(在里面通过点击登录按钮,界面滑动到”我发表的“界面LoginFragment1.java)

public class LoginFragment3 extends Fragment {

	// 声明登录和注册按钮控件对象
	private Button btn_login;

	private Activity activity;

	public LoginFragment3() {

	}

	@Override
	public void onAttach(Activity activity) {
		super.onAttach(activity);
		this.activity = activity;
	}


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

			View v = inflater.inflate(R.layout.in_no, container, false);
			// 获取控件对象
			// 获取登录按钮控件对象
			btn_login = (Button) v.findViewById(R.id.btn_login);
			
			return v;
	}

	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);
		// 登录按钮的操作
		btn_login.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// ☆解决viewPager中Fragment之间的跳转
				ViewPager vg = (ViewPager) getParentFragment().getActivity()
						.findViewById(R.id.vPager);
				vg.setCurrentItem(0);

			}
		});
		
	}
}


LoginFragment3的布局文件:in_no.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" >

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_marginTop="30dp"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:layout_gravity="center"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:orientation="horizontal" >
                
                <FrameLayout 
                    android:layout_width="220dp"
                    android:layout_height="wrap_content"
                    android:background="@drawable/log_btn1">

                <EditText
                    android:id="@+id/login_user"
                    android:layout_width="220dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="5dp"
                    android:background="@android:color/transparent"
                    android:textCursorDrawable="@null"
                    android:gravity="left"
                    android:textColor="#000000"
                    android:textSize="18sp" />
                </FrameLayout>
                
                <FrameLayout 
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/log_btn2">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="账号"
                    android:textSize="20sp"
                    android:textStyle="bold"
                    android:textColor="#000000" />
                </FrameLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:layout_gravity="center"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="10dp" >

                <FrameLayout 
                    android:layout_width="220dp"
                    android:layout_height="wrap_content"
                    android:background="@drawable/log_btn1">

                <EditText
                    android:id="@+id/login_pass"
                    android:layout_width="220dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="5dp"
                    android:background="@android:color/transparent"
                    android:textCursorDrawable="@null"
                    android:gravity="left"
                    android:textColor="#000000"
                    android:textSize="18sp" />
                </FrameLayout>
                
                <FrameLayout 
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/log_btn2">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="密码"
                    android:textSize="20sp"
                    android:textStyle="bold"
                    android:textColor="#000000" />
                </FrameLayout>
            </LinearLayout>
            
            <FrameLayout 
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="10dp">

            <Button
                android:id="@+id/btn_login"
                android:layout_width="match_parent"
                android:layout_height="40dp"           
                android:background="@drawable/lg_btn"/>
            
            <TextView 
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:text="登    录"
                android:gravity="center"
                android:textColor="#ffffff"
                android:textStyle="bold"
                android:textSize="16sp"/>
            </FrameLayout>

            <LinearLayout
                android:layout_marginTop="5dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center|left"
                    android:layout_marginLeft="10dp"
                    android:gravity="center"
                    android:textSize="12sp"
                    android:text="非会员请点击" />

                <TextView
                    android:id="@+id/tv_reg"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center|left"
                    android:layout_marginLeft="5dp"
                    android:gravity="center"
                    android:text="注册"
                    android:textColor="#00CCCC"
                    android:textSize="15sp" />
            </LinearLayout>
        </LinearLayout>
    </ScrollView>

</LinearLayout>

②LoginFragment1.java的程序

public class LoginFragment1 extends Fragment {

	private TextView tv_none;

	private Activity activity;

	@Override
	public void onAttach(Activity activity) {
		super.onAttach(activity);
		this.activity = activity;
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		return inflater.inflate(R.layout.my_show_none, container, false);

	}

}

LoginFragment1的布局文件:my_show_none.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">
    
    <TextView 
        android:layout_marginLeft="10dp"
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="未登录,请登录后查看"
        android:gravity="center"
        android:textColor="#000000"
        android:textStyle="bold"/>

</LinearLayout>



③LoginFragment2.java的程序

public class LoginFragment2 extends Fragment {


	private Activity activity;

	@Override
	public void onAttach(Activity activity) {
		super.onAttach(activity);
		this.activity = activity;
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View v = inflater.inflate(R.layout.about_soft, container, false);

		return v;

	}
	
	
	

}

LoginFragment2的布局文件:about_soft.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="330dp"
    android:orientation="vertical" >


</LinearLayout>




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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值