1.将ViewPager和Fragment绑定使用
(1) 继承FragmentPagerAdapter,重写ViewPager的适配器
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
/**
* Created by qd on 2016/8/17.
*/
public class ViewPagerAdapter extends FragmentPagerAdapter {
List<Fragment> fragmentList;
public ViewPagerAdapter(FragmentManager fm, List<Fragment> fragmentList) {
super(fm);
this.fragmentList = fragmentList;
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
}
(2) 新建要添加的Fragment 以OneFragment为例子
public class ThreeFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_three, container, false);
return view;
}
}
(3) 添加数据,并为ViewPager添加适配器
public void initViewpager() {
if(fragment1==null) fragment1 = new OneFragment();
if(fragment2==null) fragment2=new TwoFragment();
if(fragment3==null) fragment3=new ThreeFragment();
if(fragment4==null) fragment4=new FourFragment();
list.add(fragment1);
list.add(fragment2);
list.add(fragment3);
list.add(fragment4);
viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), list);
viewpager.setAdapter(viewPagerAdapter);
//设置初始的时候显示第一页
viewpager.setCurrentItem(0);
}
(4)如果有指示器,则需要为ViewPager添加页面改变监听器
viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
2.使用ViewPager实现简单的轮播图效果(待优化)
(1) 准备图片素材:轮播时候需要显示的图片、指示器的选中和未选中状态时候的小圆点。
(2) 轮播图的布局
<?xml version="1.0" encoding="utf-8"?>
<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="com.ebeijia.viewpaerbanner.MainActivity">
<RelativeLayout
android:id="@+id/rl_vp"
android:layout_width="match_parent"
android:layout_height="200dp">
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="200dp">
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:background="#88D0D0D0"
android:padding="5dp"
>
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:id="@+id/dot_0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="@mipmap/dot_normal"
/>
<ImageView
android:id="@+id/dot_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="@mipmap/dot_normal"
/>
<ImageView
android:id="@+id/dot_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="@mipmap/dot_normal"
/>
<ImageView
android:id="@+id/dot_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="@mipmap/dot_normal"
/>
<ImageView
android:id="@+id/dot_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="@mipmap/dot_normal"
/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
(3)代码实现 :最后一张切换至第一张的时候仍然存在BUG,等待修复
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;
public class MainActivity extends AppCompatActivity {
private int imageIds[];
private String[] titles;
private ArrayList<ImageView> images;
private ArrayList<ImageView> dots;
private TextView title;
private ViewPager mViewPager;
private ViewPagerAdapter adapter;
private int oldPosition = 0;//记录上一次点的位置
private int currentItem; //当前页面
private ScheduledExecutorService scheduledExecutorService;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//图片ID
imageIds = new int[]{
R.mipmap.a,
R.mipmap.b,
R.mipmap.c,
R.mipmap.d,
R.mipmap.e
};
//图片标题
titles = new String[]{
"图片1",
"图片2",
"图片3",
"图片4",
"图片5"
};
//显示的图片
images = new ArrayList<ImageView>();
for(int i =0; i < imageIds.length; i++){
ImageView imageView = new ImageView(this);
imageView.setBackgroundResource(imageIds[i]);
images.add(imageView);
}
//显示的点
dots = new ArrayList<ImageView>();
dots.add((ImageView)findViewById(R.id.dot_0));
dots.add((ImageView)findViewById(R.id.dot_1));
dots.add((ImageView)findViewById(R.id.dot_2));
dots.add((ImageView)findViewById(R.id.dot_3));
dots.add((ImageView)findViewById(R.id.dot_4));
title = (TextView) findViewById(R.id.title);
title.setText(titles[0]);
mViewPager = (ViewPager) findViewById(R.id.vp);
adapter = new ViewPagerAdapter();
mViewPager.setAdapter(adapter);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
title.setText(titles[position]);
dots.get(oldPosition).setBackgroundResource(R.mipmap.dot_normal);
dots.get(position).setBackgroundResource(R.mipmap.dot_focused);
oldPosition = position;
currentItem = position;
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
private class ViewPagerAdapter extends PagerAdapter {
@Override
public int getCount() {
return images.size();
//return Integer.MAX_VALUE;
}
//是否是同一张图片
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public void destroyItem(ViewGroup view, int position, Object object) {
view.removeView(images.get(position));
}
@Override
public Object instantiateItem(ViewGroup view, int position) {
view.addView(images.get(position));
return images.get(position);
}
}
@Override
protected void onStart() {
// TODO Auto-generated method stub
super.onStart();
scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
//每隔2秒钟切换一张图片
scheduledExecutorService.scheduleWithFixedDelay(new ViewPagerTask(), 2, 2, TimeUnit.SECONDS);
}
//切换图片
private class ViewPagerTask implements Runnable {
@Override
public void run() {
currentItem = (currentItem +1) % imageIds.length;
//更新界面
handler.obtainMessage().sendToTarget();
}
}
private Handler handler = new Handler(){
@Override
public void handleMessage(Message msg) {
//设置当前页面
mViewPager.setCurrentItem(currentItem);
}
};
}
(4) 运行效果