English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Android ViewPagerでスライドショー効果を実現

まずは效果图を一つご紹介します:

ViewPagerでスライドショー効果を実現する場合、PagerAdapterを使用するのが一般的です。まず、このクラスについて紹介します。

PagerAdapterの概要

PagerAdapterはAndroid.support.v4このパッケージ内のクラスは、Objectを直接継承する抽象クラスであり、android.support.vパッケージをインポートしています。4.view.PagerAdapterを使用できます。

PagerAdapterはViewPagerのアダプターであり、ViewPagerもandroid.support.v4新しいパッケージに追加された強力なコントロールで、スライド効果を実現できます。例えば、アプリ内でよく見る広告バーのスライド効果は、ViewPagerを使用して実現できます。本日はviewPagrの使用方法とPagerAdapterのオーバーライドについて説明します。

抽象クラスであるため、新しいクラスを作成してこのクラスを継承し、4つのメソッドをオーバーライドします:

 1.public Object instantiateItem(ViewGroup container, int position)

 2.public void destroyItem(ViewGroup container, int position, Object object)

 3.public int getCount()

 4.public boolean isViewFromObject(View arg0, Object arg1)

MyViewPagerAdapterクラス:

public class MyViewPagerAdapter extends PagerAdapter {
private List<ImageView> mList;
public MyViewPagerAdapter(List<ImageView> mList){
 this.mList=mList;
}
//表示する画像がキャッシュされる際に、このメソッドが呼び出され、画像の初期化が行われます
//表示するImageViewをViewGroupに追加します
public Object instantiateItem(ViewGroup container, int position) {
 // TODO Auto-生成されたメソッドスタブ
 container.addView(mList.get(position));
 return mList.get(position);
}
@Override
//PagerAdapterは表示する画像の3枚をキャッシュしており、スライドする画像がキャッシュ範囲を超えた場合、このメソッドが呼び出され、画像が破棄されます
public void destroyItem(ViewGroup container, int position, Object object) {
 // TODO Auto-生成されたメソッドスタブ
 container.removeView(mList.get(position));
}
//获取要滑动的控件的数量,
public int getCount() {
 // TODO Auto-生成されたメソッドスタブ
 return mList.size();
}
//来判断显示的是否是同一张照片,这个我们将两个图片对比 再返回
public boolean isViewFromObject(View arg0, Object arg1) {
 // TODO Auto-生成されたメソッドスタブ
 return arg0==arg1;
}
}

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" >
<android.support.v4.view.ViewPager
 android:id="@"+id/vp"
 android:layout_width="match_parent"
 android:layout_height="200dp" />
<LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignBottom="@id/vp"
 android:background="#33000000"
 android:orientation="vertical"
 android:paddingBottom="10dp" >
 <LinearLayout
 android:id="@"+id/ll_points"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:gravity="center_horizontal"
 android:orientation="horizontal"
 android:paddingBottom="10dp" >
 </LinearLayout>
</LinearLayout>
</RelativeLayout>

MainActivity:

public class MainActivity extends Activity {
private ViewPager mVp;
//private TextView tvTitle;
private LinearLayout llPoints;
//private String[] titles;// すべての表示するタイトルを保存します
private int[] images;// すべての表示する画像リソースIDを保存します
private List<ImageView> list = new ArrayList<ImageView>();;// ViewPagerオブジェクトに表示するすべてのImageViewオブジェクトを保存します
private int prevPosition = 0;
private Handler handler = new Handler() {
 @SuppressLint("HandlerLeak") 
 public void handleMessage(android.os.Message msg) {
 switch (msg.what) {
 case 0:
  // mvpの現在のページのインデックスを取得します
  int currentItem = mVp.getCurrentItem();
  // 表示する次のページのインデックス
  currentItem++;
  // ViewPagerが表示するページを設定します
  mVp.setCurrentItem(currentItem % list.size());
  break;
 default:
  break;
 }
 };
};
@SuppressWarnings("deprecation")
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 initView(); 
 // titles = getTitles();
 images = getImages();
 for (int i = 0; i < images.length; i++) {
 ImageView iv = new ImageView(this);
 iv.setBackgroundResource(images[i]);
 list.add(iv);
 //画像の数に応じて対応する数の小さな丸い点を生成します
 final View view = new View(this);
 view.setBackgroundResource(R.drawable.login__05);
 DisplayMetrics metrics = new DisplayMetrics();
 float width=TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX,30, metrics);
 float height=TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 30, metrics);
 LinearLayout.LayoutParams params=new LinearLayout.LayoutParams((int)width,(int)height);
 params.leftMargin=5;
 view.setLayoutParams(params);
 llPoints.addView(view);
 }
 //最初のページに表示されるタイトルを設定
 //tvTitle.setText(titles[0]);
 //最初のページを設定したとき、小さな丸いポイントの背景画像を表示
 llPoints.getChildAt(0).setBackgroundResource(R.drawable.login__03);
 //以下はViewPagerのアダプターをラップしています
 MyViewPagerAdapter adapter=new MyViewPagerAdapter(list);
 mVp.setAdapter(adapter);
 //ViewPagerオブジェクトのページ変更時のリスナーを設定
 mVp.setOnPageChangeListener(new OnPageChangeListener() {
 @Override
 //次のページが選択されたとき
 public void onPageSelected(int arg0) {
  // TODO Auto-生成されたメソッドスタブ
  //tvTitle.setText(titles[arg0%list.size()]);
  llPoints.getChildAt(prevPosition).setBackgroundResource(R.drawable.login__05);
  llPoints.getChildAt(arg0).setBackgroundResource(R.drawable.login__03);
  //現在のポイント位置を次の変更の前のポイント位置として
  prevPosition=arg0;
 }
 @Override
 public void onPageScrolled(int arg0, float arg1, int arg2) {
  // TODO Auto-生成されたメソッドスタブ
 }
 @Override
 public void onPageScrollStateChanged(int arg0) {
  // TODO Auto-生成されたメソッドスタブ
 }
 });
 new Thread(new Runnable() {
 @Override
 public void run() {
  // TODO Auto-生成されたメソッドスタブ
  while (true) {
  SystemClock.sleep(3000);
  handler.sendEmptyMessage(0);
  }
 }
 }).start();
}
private void initView() {
 // TODO Auto-生成されたメソッドスタブ
 mVp = (ViewPager) findViewById(R.id.vp);
 //tvTitle = (TextView) findViewById(R.id.tv_title);
 llPoints = (LinearLayout) findViewById(R.id.ll_points);
}
private int[] getImages(){
 return new int[]{R.drawable.banner_01,R.drawable.banner_02,R.drawable.banner_03};
}
}

これでこの記事はすべて終わりです。皆様の学習に役立つことを願っています。また、ナイアラチュートリアルのサポートをたくさんお願いします。

声明:この記事の内容はインターネットから提供されています。著作権は原作者に帰属します。インターネットユーザーが自発的に提供し、アップロードした内容であり、このサイトは所有権を有しないものです。人工的に編集されていないため、関連する法的責任を負いません。著作権侵害を疑う内容がある場合は、メールを送信して:notice#oldtoolbag.com(メールの際は、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がとれましたら、このサイトは即座に侵害疑いのコンテンツを削除します。)

おすすめ