ViewPager的基础运用

摘要: 本人是Android方面的新手，自学了段时间，很多东西学了过些天就忘，只有大概的印象，所以想要自己多总结下，看看效果。
所以其实这是个笔记本~~~~内容可能跟网上的有相同，请见谅

ViewPager的基本运用

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

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<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.ViewPager>

</LinearLayout>

加载要显示的页卡：

LayoutInflater lf = getLayoutInflater().from(this);
view1 = lf.inflate(R.layout.layout1,null);
view2 = lf.inflate(R.layout.layout2,null);
view3 = lf.inflate(R.layout.layout3,null);

viewlist = new ArrayList<View>();
viewlist.add(view1);
viewlist.add(view2);
viewlist.add(view3);

titlelist = new ArrayList<String>();
titlelist.add("aaa");
titlelist.add("bbb");
titlelist.add("ccc");

创建一个PagerAdapter，并设置返回title内容

public class MyViewPagerAdapter extends PagerAdapter{
private List<View> mListView;

public MyViewPagerAdapter(List<View> mListView){
this.mListView = mListView;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
container.removeView(mListView.get(position));
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
container.addView(mListView.get(position));
return mListView.get(position);
}

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

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}

@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titlelist.get(position);
}

}

最后在将Adapter加入到ViewPager中

MyViewPagerAdapter m = new MyViewPagerAdapter(viewlist);

viewpager = (ViewPager) findViewById(R.id.viewpager);
p = (PagerTabStrip) findViewById(R.id.pagertab);
p.setTabIndicatorColor(Color.BLACK);
p.setDrawFullUnderline(false);
p.setBackgroundColor(Color.CYAN);
p.setTextSpacing(50);
viewpager.setAdapter(m);

全部代码如下：

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.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends Activity {

private View view1,view2,view3;
private ArrayList<View> viewlist;
private ViewPager viewpager;
private ArrayList<String> titlelist;
private PagerTabStrip p;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}

private void initView(){

LayoutInflater lf = getLayoutInflater().from(this);
view1 = lf.inflate(R.layout.layout1,null);
view2 = lf.inflate(R.layout.layout2,null);
view3 = lf.inflate(R.layout.layout3,null);

viewlist = new ArrayList<View>();
viewlist.add(view1);
viewlist.add(view2);
viewlist.add(view3);

titlelist = new ArrayList<String>();
titlelist.add("aaa");
titlelist.add("bbb");
titlelist.add("ccc");

MyViewPagerAdapter m = new MyViewPagerAdapter(viewlist);

viewpager = (ViewPager) findViewById(R.id.viewpager);
p = (PagerTabStrip) findViewById(R.id.pagertab);
p.setTabIndicatorColor(Color.BLACK);
p.setDrawFullUnderline(false);
p.setBackgroundColor(Color.CYAN);
p.setTextSpacing(50);
viewpager.setAdapter(m);
}

public class MyViewPagerAdapter extends PagerAdapter{
private List<View> mListView;

public MyViewPagerAdapter(List<View> mListView){
this.mListView = mListView;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
container.removeView(mListView.get(position));
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
container.addView(mListView.get(position));
return mListView.get(position);
}

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

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}

@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titlelist.get(position);
}

}

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

}

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

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<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.ViewPager>

</LinearLayout>

达到效果:



下面是些改进，如图：



可以达到点击转换和左右切换的效果。这次是固定的TextView为标头。下滑杠用图片ImageView实现。

JAVA代码：

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

import android.os.Bundle;
import android.app.Activity;
import android.content.DialogInterface;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {

private ViewPager viewpager;
private ArrayList<View> views;
private View view1;
private View view2;
private View view3;
private ImageView imageView;
private int bmpW;
private int offset;
private TextView textView1;
private TextView textView3;
private TextView textView2;

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

//初始化TestView
private void InitTextView(){
textView1 = (TextView) findViewById(R.id.tv1);
textView2 = (TextView) findViewById(R.id.tv2);
textView3 = (TextView) findViewById(R.id.tv3);

textView1.setOnClickListener(new MyOnClickListener(0));
textView2.setOnClickListener(new MyOnClickListener(1));
textView3.setOnClickListener(new MyOnClickListener(2));
}
//初始主要的显示内容。并且加入组件中
public void init(){
viewpager = (ViewPager) findViewById(R.id.viewpager);
views = new ArrayList<View>();
LayoutInflater f = getLayoutInflater();
view1 = f.inflate(R.layout.layou1, null);
view2 = f.inflate(R.layout.layout2, null);
view3 = f.inflate(R.layout.layout3, null);

views.add(view1);
views.add(view2);
views.add(view3);

viewpager.setAdapter(new MyViewPagerAdapter(views));
viewpager.setCurrentItem(0);
viewpager.setOnPageChangeListener(new MyOnPageChangeListener());
}
//这是初始化一开始的下横杆位置并且计算相关值
private void initImageView(){
imageView = (ImageView) findViewById(R.id.imageview);
//得到照片宽
bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a).getWidth();
//得到屏幕宽
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int screenW = dm.widthPixels;
//计算间隔距离
offset = (screenW/3 - bmpW) / 2;
Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
//设置初始位置
imageView.setImageMatrix(matrix);
}
//TextView的按键处理
public class MyOnClickListener implements OnClickListener{
private int index = 0;
public MyOnClickListener(int i ){
index = i;
}
public void onClick(View v) {
// TODO Auto-generated method stub
viewpager.setCurrentItem(index);
}
}

//主要的Adapter内容
public class MyViewPagerAdapter extends PagerAdapter{
private List<View> list;
public MyViewPagerAdapter(List<View> m){
this.list = m;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
container.removeView(list.get(position));
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
container.addView(list.get(position),0);
return list.get(position);
}

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

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;
}

}
//当改变页面的时候得处理
public class MyOnPageChangeListener implements OnPageChangeListener{

int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量
int two = one * 2;// 页卡1 -> 页卡3 偏移量
private int currIndex;
public void onPageScrollStateChanged(int arg0) {
}
public void onPageScrolled(int arg0, float arg1, int arg2) {
}

public void onPageSelected(int arg0) {
Animation animation = new TranslateAnimation(one*currIndex, one*arg0, 0, 0);//显然这个比较简洁，只有一行代码。
currIndex = arg0;
animation.setFillAfter(true);// True:图片停在动画结束位置
animation.setDuration(300);
imageView.startAnimation(animation);
Toast.makeText(MainActivity.this, "您选择了"+ viewpager.getCurrentItem()+"页卡", Toast.LENGTH_SHORT).show();
}

}

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

}