Android View Pagerは画像の輪播効果を実現します。

8817 ワード
viewPager 臀部のピクチャー
appでは、画像のルーレット表示は、一般的な実現効果といえるが、これはViewer Pagerを利用して、handlerを利用して、一定の時間ごとにViewer PagerのcurrentItemを現在のitemのpositionn＋1に設定すれば良い。まず効果図を見てみましょう。
 
このような輪播広告の効果を実現します。
これは自分で練習するためにある旅行アプリを真似して作ったので、ここのデータはトラッキングツールを使って取ります。データを準備するなどの仕事はここでは詳しく説明しません。データの追加は大体同じです。私の考えはこのようにして、ネット上からリアルタイムでデータを取得し（もちろん、あなたもデータを書き込み死ぬことができます）、そしてネットツール類とjson解析類を通じて、Listからデータの解析とパッケージを完成します。集合の長さによって、Viewer Pagerのページ数を決めます。下の小さい円点はどれぐらいありますか？関数ではまずブーメランタイプのフラグビットを設定して、ロードショーを停止するかどうかを判断します。（このページでは見えない場合は、ロードショーを終了します。）グローバル変数を定義して、現在の小さな円の位置を記録します。
prvate bootlean isStop=false;  //ロードショーを停止するかどうかを判断する。
prvate int previous PointEnale=0  //前の小さな円の位置をマークします。
そして、私たちはViewer Pagerのルーレットのために準備します。例えば、動的にデータ項目によって小さな円を生成し、アダプターを定義するなど、コードは以下の通りです。

/**
   * banner          
   */
  private void initCycleEvent() {
    //           ，      
    LinearLayout.LayoutParams params;
    for (int i = 0; i < imageViewList.size(); i++) {
      View dot = new View(getActivity());
      dot.setBackgroundResource(R.drawable.point_background); 
      params = new LinearLayout.LayoutParams(15, 15);
      params.leftMargin = 10;
      dot.setLayoutParams(params);
      dot.setEnabled(false);
      ll_dot_group.addView(dot);
    }

    //       
    adapter = new PagerAdapter() {
      @Override
      public int getCount() {
        //       ，           
        return Integer.MAX_VALUE;
      }

      @Override
      public boolean isViewFromObject(View view, Object object) {
        return view == object;
      }

      @Override
      public Object instantiateItem(ViewGroup container, final int position) {
        imageViewList.get(position % imageViewList.size()).setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
            Intent intent = new Intent(getActivity(), WebViewActivity.class);
            intent.putExtra("url", bannerList.get(position % imageViewList.size()).getUrl());
            startActivity(intent);
          }
        });
        container.addView(imageViewList.get(position % imageViewList.size()));
        return imageViewList.get(position % imageViewList.size());
      }

      @Override
      public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(imageViewList.get(position % imageViewList.size()));
      }
    };
    vp_banner.setAdapter(adapter);
    //      page        
    vp_banner.setCurrentItem(0);
    ll_dot_group.getChildAt(0).setEnabled(true);
    // viewPager    
    vp_banner.addOnPageChangeListener(new MyPageChangeListener());
  }
ここの小さい円点は写真ではなく、カスタムの「selector」と「shape」を組み合わせて展示しています。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/point_bg_enable" android:state_enabled="true"/>
   <item android:drawable="@drawable/point_bg_normal" android:state_enabled="false"/>

</selector>
小さい円が焦点を得る時に表示されるのはこのリソースファイルです。 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval" >

  <corners android:radius="3dp" />

  <solid android:color="#AAFFFFFF" />

</shape>
焦点を失う時： 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval" >

  <corners android:radius="3dp" />

  <solid android:color="#55000000" />

</shape>
アダプターPagerAdapterのget Count（）方法は、生成するViewer Pagerのpageページの個数を示すもので、instantiateItem（）メソッドの実行回数はget Count（）の戻り値によって決まるので、ここでは「無限」ループにするため、その設定の大きさをINTERGE.最大の整数値で表します。imagew Listは、私たちが展示したいimagViewの集合を記憶しています。通常の場合は、順番で放映する必要がない場合は、そのままpositionによってaddView（）を実行すればいいですが、ルーレットを実現するために、positionとimagew Listの集合の長さを求めて、画像の下付きを決定します。
position%imagew List.size()
次にアダプタと画像の位置を識別する小さなドットを動的に生成するコードを定義します。 

/**
   * banner          
   */
  private void initCycleEvent() {
    //           ，      
    LinearLayout.LayoutParams params;
    for (int i = 0; i < imageViewList.size(); i++) {
      View dot = new View(getActivity());
      dot.setBackgroundResource(R.drawable.point_background);
      params = new LinearLayout.LayoutParams(15, 15);
      params.leftMargin = 10;
      dot.setLayoutParams(params);
      dot.setEnabled(false);
      ll_dot_group.addView(dot);
    }

    //       
    adapter = new PagerAdapter() {
      @Override
      public int getCount() {
        //       ，           
        return Integer.MAX_VALUE;
      }

      @Override
      public boolean isViewFromObject(View view, Object object) {
        return view == object;
      }

      @Override
      public Object instantiateItem(ViewGroup container, final int position) {
        imageViewList.get(position % imageViewList.size()).setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
            Intent intent = new Intent(getActivity(), WebViewActivity.class);
            intent.putExtra("url", bannerList.get(position % imageViewList.size()).getUrl());
            startActivity(intent);
          }
        });
        container.addView(imageViewList.get(position % imageViewList.size()));
        return imageViewList.get(position % imageViewList.size());
      }

      @Override
      public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(imageViewList.get(position % imageViewList.size()));
      }
    };
    vp_banner.setAdapter(adapter);
    //      page        
    vp_banner.setCurrentItem(0);
    ll_dot_group.getChildAt(0).setEnabled(true);
    // viewPager    
    vp_banner.addOnPageChangeListener(new MyPageChangeListener());
  }
addView()とremoveView()を覚えるときは、余裕のある値を求めて対応する位置を探すためのimagViewです。初期化作業が完了しました。次は輪播操作が完了したはずです。ここではスレッドを開いて、一定の時間を置いて、現在のビューPagerのPageページのpositionを取得して、+1して、現在のページの下に新しい値を設定すればいいです。 

/**
   *          
   */
  private void startBannerScrollThread() {
    new Thread(new Runnable() {
      @Override
      public void run() {
        //         
        while (!isStop) {
          SystemClock.sleep(2000);
          handler.post(new Runnable() {
            @Override
            public void run() {
              int newindex = vp_banner.getCurrentItem() + 1;
              vp_banner.setCurrentItem(newindex);
            }
          });
        }
      }
    }).start();
  }
もちろん、各画像が私達に展示されている時に、絵の下の指示性の小さい円点には相応の変化がありますので、ViePagerの中でスライドイベントを処理しなければなりません。だから、私達は一つの種類をカスタマイズして、ViePager.OnPage Listenerインターフェースを実現しました。onPageSelected()方法で対応するイベントを処理します。 

   /**
* viewPager      
   */
  class MyPageChangeListener implements ViewPager.OnPageChangeListener {

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
      //         
      int newPosition = position % imageViewList.size();
      //                
      ll_dot_group.getChildAt(previousPointEnale).setEnabled(false);
      //    page       
      ll_dot_group.getChildAt(newPosition).setEnabled(true);
      //        previousPointEnale
      previousPointEnale = newPosition;
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
  }
肝心なコードと考え方はこのようにしています。ここには私が参照している文章があります。いいです。リンクをここに置いてください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
Androidは簡易計算機を実現します。
Android SQLiteデータベース接続によるログイン機能の実現