android开发中经常需要用到viewpager,今天写了一个简单的viewpager的案例如下:
首先定义四个子选项页面的布局
<?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:background="#ff0000"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第一个页面"
/>
</LinearLayout>
其他几个页面和这个没什么大同小异,在这里就不写了。
activity_main.xml的内容如下:
<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/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
<android.support.v4.view.PagerTabStrip
android:id="@+id/pagertab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top">
</android.support.v4.view.PagerTabStrip>
</android.support.v4.view.ViewPager>
</RelativeLayout>
其中<pre name="code" class="html">android.support.v4.view.PagerTabStrip是用来标识选项卡的。
MyAdapter的代码如下:
<pre name="code" class="java">package com.example.viewpagerdemo;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
public class MyPagerAdapter extends PagerAdapter {
//用来显示的view的集合
private List<View>list;
//定义标题
private List<String>listTitle;
public MyPagerAdapter(List<View> list, List<String>listTitle) {
this.list = list;
this.listTitle = listTitle;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return list.size();
}
/**
* 至少应该重写这几个方法:
* public void destroyItem(ViewGroup container, int position, Object object)
* public int getItemPosition(Object object)
* public Object instantiateItem(ViewGroup container, int position)
* public boolean isViewFromObject(View arg0, Object arg1)
* public int getCount()
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
container.removeView(list.get(position));
}
@Override
public int getItemPosition(Object object) {
// TODO Auto-generated method stub
return super.getItemPosition(object);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
container.addView(list.get(position),0);//首先添加该view到list集合
return list.get(position);
}
@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return listTitle.get(position);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;//官方是这样写的
}
}
MainActivity.java如下:
<pre name="code" class="java">package com.example.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.View;
import android.view.Window;
public class MainActivity extends Activity {
List<View>list = new ArrayList<View>();
ViewPager viewPager;
PagerTabStrip pagerStrip;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
pagerStrip = (PagerTabStrip) findViewById(R.id.pagertab);
viewPager = (ViewPager) findViewById(R.id.viewpager);
View one = View.inflate(this,R.layout.one,null);
View two = View.inflate(this,R.layout.two,null);
View three = View.inflate(this,R.layout.three,null);
View four = View.inflate(this,R.layout.four,null);
list.add(one);
list.add(two);
list.add(three);
list.add(four);
List<String>listTitle = new ArrayList<String>();
listTitle.add("one");
listTitle.add("two");
listTitle.add("three");
listTitle.add("four");
MyPagerAdapter myAdapter = new MyPagerAdapter(list,listTitle);
pagerStrip.setActivated(true);
pagerStrip.setAlpha(0.7f);
pagerStrip.setTextSpacing(20);
pagerStrip.setBackgroundColor(Color.RED);
pagerStrip.setFadingEdgeLength(8);
pagerStrip.setTextColor(Color.BLUE);
pagerStrip.setBottom(2);
pagerStrip.setContentDescription("tsetsetset");
pagerStrip.setDrawFullUnderline(true);
viewPager.setCurrentItem(2);
viewPager.setAdapter(myAdapter);
}
@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;
}
}
至此一个简单的viewpag+view方式滑动的功能已经实现
接下来看看
<span style="color:#ff0000;">viewpager+fragment</span>
布局文件同上
新建四个需要加载的fragment视图,FragmentOne.java如下:
<pre name="code" class="html">package com.example.viewpagerfragment;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragmentone extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.one, container,false);
}
}
其他几个fragment也是大同小异。
这里需要注意的一点是这里的adapter继承自FragmentPagerAdapter,,,MyFramgentAdapter.java如下:
<pre name="code" class="java">package com.example.viewpagerfragment;
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.View;
import android.view.ViewGroup;
public class MyFramgentAdapter extends FragmentPagerAdapter {
private List<Fragment>list;
private List<String>listString;
public MyFramgentAdapter(FragmentManager fm,List<Fragment>list,List<String>listString) {
super(fm);
this.list = list;
this.listString = listString;
}
@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return list.get(arg0);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return list.size();
}
@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return listString.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
super.destroyItem(container, position, object);
}
@Override
public Object instantiateItem(ViewGroup arg0, int arg1) {
// TODO Auto-generated method stub
return super.instantiateItem(arg0, arg1);
}
}
MainActivity.java如下:
<pre name="code" class="java">package com.example.viewpagerfragment;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.Window;
public class MainActivity extends FragmentActivity {
List<Fragment>list = new ArrayList<Fragment>();
List<String>listString = new ArrayList<String>();
ViewPager viewpager;
PagerTabStrip tab;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
Fragment one = new Fragmentone();
Fragment two = new Fragmenttwo();
Fragment three = new Fragmentthree();
Fragment four = new Fragmentfour();
list.add(one);
list.add(two);
list.add(three);
list.add(four);
viewpager = (ViewPager) findViewById(R.id.viewpager);
tab=(PagerTabStrip) findViewById(R.id.pagertab);
tab.setBackgroundColor(Color.YELLOW);
tab.setTabIndicatorColor(Color.BLUE);
tab.setDrawFullUnderline(false);
tab.setTextColor(Color.RED);
listString.add("one");
listString.add("two");
listString.add("three");
listString.add("four");
MyFramgentAdapter adapter = new MyFramgentAdapter(getSupportFragmentManager(),list, listString);
viewpager.setAdapter(adapter);
}
@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;
}
}
至此一个fragment+viewpager的功能也已经实现
可是我们发现已经实现的viewpager的切换效果是系统自带的,我们在这里加上自己的切换效果
首先自定义DethPageTransformer.java类继承自PageTransformer,如下:
<pre name="code" class="html">package com.example.viewpagerself;
import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;
public class DethPageTransformer implements PageTransformer {
@Override
public void transformPage(View view, float position) {
// TODO Auto-generated method stub
int pageWidth = view.getWidth();
if (position < -1) {//不显示
view.setAlpha(0);
}else if (position <= 0) {只position有在[-1,1]之间显示
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
}else if (position <= 1) {
view.setAlpha(1-position);
view.setTranslationX(pageWidth*-position);
float scaleFactor = 0.75f + (1-0.75f) * (1-Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
}else{
view.setAlpha(0);
}
}
}
在MainActivity中只需要添加一句代码,就可以应用这个定义好的切换动画:
<pre name="code" class="java">viewPager.setPageTransformer(true, new RotateDownPageTransformer());
源码连接: http://download.csdn.net/detail/mockingbirds/8112415