Android 实现手势滑动界面(ViewPager)

         最近在做项目时,解决了手势滑动显示不同的界面,主要采用ViewPager实现Fragment的装载,在屏幕上左划右划会显示不同的界面,如下图所示:

                                                                   

总体来说,主要还是使用了Fragment UI管理,废话不多说,一下为代码讲解:

1 主要的类文件结构:

                                 

2 布局文件结构:

                           

 由以上布局结构可以看出,有四个Fragment,分别为one,two,three,four,这说明在此程序中我只是做了四个Fragment,每个Fragment放一张图片,由上图可看出有四张图片,在这四个Fragment中切换。

1.1 fragmentadapter.java 自定义适配器,是用来装载Fragment    

<span style="font-size:18px;">package com.example.textviewpager;
/**
 * ViewPager的自定义适配器
 */
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 fragmentadapter   extends  FragmentPagerAdapter{

	   private  List<Fragment> fragments = new ArrayList<Fragment>();
	   
	
	public fragmentadapter(FragmentManager fm) {
		super(fm);
		// TODO Auto-generated constructor stub
	}
   //FragmentManager 类负责管理fragment并将它们的视图添加到Activity的视图层级结构
	public   fragmentadapter(FragmentManager  frag, List<Fragment> jiemian){
		super(frag);
	this.fragments = jiemian;
	}
	@Override
	public Fragment getItem(int arg0) {
		// TODO Auto-generated method stub
		return fragments.get(arg0);
	}

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

}
</span>
1.2 MainActivity.java 初始化界面,并且用自定义适配器装配Fragment

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

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.MenuItem;

import com.example.huadongjiemian.four;
import com.example.huadongjiemian.one;
import com.example.huadongjiemian.three;
import com.example.huadongjiemian.two;

public class MainActivity extends FragmentActivity {

	         private   ViewPager  viewpager ;
	         private   fragmentadapter   adapter;
	         private    List<Fragment> fragments = new ArrayList<Fragment>();   //装载图片
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		viewpager =(ViewPager) findViewById(R.id.showphoto);
		 chushihua();
		
	}
	//加载ViewPager
	public   void   chushihua(){
		      
		            fragments = new ArrayList<Fragment>();
		            fragments.add(new one());                                  //加载的页面
		            fragments.add(new two());                                    //加载的页面
		            fragments.add(new three());                                    //加载的页面
		            fragments.add(new four());                                     //加载的页面
		           adapter = new fragmentadapter(getSupportFragmentManager(), fragments);
		           viewpager.setAdapter(adapter);
		     		viewpager.setCurrentItem(0);
		
		
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
}
</span>
1.3 另外四个one,two,three,four.java

   one.java

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

import com.example.textviewpager.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 one  extends Fragment {
  
	
	     @Override
	    public View onCreateView(LayoutInflater inflater, ViewGroup container,
	    		Bundle savedInstanceState) {
	    	// TODO Auto-generated method stub
	    View   one = inflater.inflate(R.layout.one, container, false);
	    return  one;
	    }
	
	
}
</span>
two.java
<span style="font-size:18px;">package com.example.huadongjiemian;

import com.example.textviewpager.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 two  extends Fragment{
  
	    @Override
	    public View onCreateView(LayoutInflater inflater, ViewGroup container,
	    		Bundle savedInstanceState) {
	    	// TODO Auto-generated method stub
	       View  two  =inflater.inflate(R.layout.two, container, false);
	       return two;
	    }
	
	
	
}
</span>
另外两个three.java和four.java因为基本一样,在此不贴出代码

2.1 activity_main.xml

<span style="font-size:18px;"><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"
    >

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

    
    
</RelativeLayout>
</span>
ViewPager类需要在android.support.v4.view.ViewPager包中,要确定你的项目中有android-support-v4的包才行

2.2 one.xml , two.xml ,three.xml ,four.xml

<span style="font-size:18px;"><?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" >
        <ImageView  
                   android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                   android:background="@drawable/a"/>


</LinearLayout>
</span>
 在此我只插入一个布局文件的代码,其他一样。

 逻辑简单,代码清楚,还望大家多多批评, 有哪些不足的地方可以探讨,大家互相学习,源代码地址:

http://download.csdn.net/detail/danielntz/9468388


 



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值