ViewPager_html/css_WEB-ITnose はユーザーガイドを左右にスライドさせて実装されています

前回のブログに引き続き、前回のブログではImageSwitcherを使用してユーザーガイド機能を実装しましたが、今回はViewPagerを使用して同じ機能を実装します。コードを直接見てください:

レイアウト ファイル activity_main.xml

<RelativeLayout 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.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="fill_parent"        android:layout_height="fill_parent"/>    <LinearLayout        android:id="@+id/dots"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_marginBottom="50dp"        android:gravity="center_horizontal"        android:orientation="horizontal" >    </LinearLayout></RelativeLayout>

ViewPager ページ切り替えでは、現在のページを示すために小さなドットが使用されます。次のように、drawable.xml ファイルが使用されます。 xml

rrreedot_nomal.xml

<?xml version="1.0" encoding="utf-8"?>  <shape xmlns:android="http://schemas.android.com/apk/res/android"       android:shape="oval">      <corners android:radius="5dip" />      <solid android:color="#FF930000" /></shape>

のアクティビティには次のコードがあります:

<?xml version="1.0" encoding="utf-8"?>  <shape xmlns:android="http://schemas.android.com/apk/res/android"       android:shape="oval">      <corners android:radius="5dip" />      <solid android:color="#FF3C3C3C" /></shape>

ここでの ViewPager と ImageSwitcher の違いは、ViewPager はインストールする必要があるページをカプセル化するためにアダプタを使用するのに対し、ImageSwitcher はViewFactoryを使用してインストールします。したがって、viewPager を使用する場合は、PagerAdapter を統合して、対応するインターフェイスを実装する必要があります。以下の通り:

MyPagerAdapter.java

package com.example.viewpagerautoswitch;import java.util.ArrayList;import java.util.List;import android.annotation.SuppressLint;import android.app.Activity;import android.content.Context;import android.os.Bundle;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup.LayoutParams;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;import android.widget.Toast;@SuppressLint("HandlerLeak")public class MainActivity extends Activity {	private ViewPager mViewPager ;	private MyPagerAdapter mViewPagerAdapter ;	private LinearLayout mLinearLayout ;	private ImageView[] mImageDots ;	private Context mContext ;		@Override	protected void onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		setContentView(R.layout.activity_main);		mContext = MainActivity.this ;		mViewPager = (ViewPager)findViewById(R.id.viewpager);		mLinearLayout = (LinearLayout)findViewById(R.id.dots);		initViewPager(getImageItem() ,0);	}		public void initViewPager(List<ImageView> mList ,int position){		mImageDots = new ImageView[mList.size()];		for(int i=0 ;i<mList.size() ;i++){			ImageView image = new ImageView(mContext);			image.setLayoutParams(new LayoutParams(10, 10));			image.setBackgroundResource(R.drawable.dot_nomal);			mImageDots[i] = image ;			mLinearLayout.addView(image);			TextView tv = new TextView(mContext);			tv.setLayoutParams(new LayoutParams(20, 10));			mLinearLayout.addView(tv);		}		mViewPagerAdapter = new MyPagerAdapter(mContext,mList);				mViewPager.setOnPageChangeListener(new OnPageChangeListener() {			// onPageScrollStateChanged --> onPageSelected --> onPageScrolled -->onPageScrollStateChanged			@Override			public void onPageSelected(int position) {				for(int i=0 ;i<mImageDots.length ;i++){					if(i == position){						mImageDots[i].setBackgroundResource(R.drawable.dot_focus);					}else{						mImageDots[i].setBackgroundResource(R.drawable.dot_nomal);					}				}			}						@Override			public void onPageScrolled(int current_position, float persent, int px) {			}						@Override			public void onPageScrollStateChanged(int state) {			}		});				mViewPager.setOnClickListener(new OnClickListener() {			@Override			public void onClick(View view) {			}		});				mViewPager.setAdapter(mViewPagerAdapter);		mViewPager.setCurrentItem(position);		mImageDots[position].setBackgroundResource(R.drawable.dot_focus);	}		public List<ImageView> getImageItem(){		List<ImageView> list = new ArrayList<ImageView>();		ImageView img = new ImageView(mContext);		img.setBackgroundResource(R.drawable.img1);		list.add(img);		img = new ImageView(mContext);		img.setBackgroundResource(R.drawable.img2);		list.add(img);		img = new ImageView(mContext);		img.setBackgroundResource(R.drawable.img3);		list.add(img);		return list ; 	}		@Override	public void finish() {		super.finish();	}}

この方法で、ユーザーガイド機能を実現できます。具体的なページ効果は次のとおりです。 写真は、Android フォンでの 2 番目のページャーの状況を示しています。 Androidの場合 セットトップボックスで使用する場合、左右のキーをキャプチャして時間をスライドさせることができます。

アプリケーションでは、単に画像を切り替えるだけでなく、クリックすると特定のWebページにジャンプするなど、クリックイベントの意味を持っている場合があります。 ? ここで、アダプタ データをカプセル化し、定義したカプセル化データで ImageView を置き換え、アダプタ内で書き換えられた instantiateItem() で View をインスタンス化し、それを返すことができます。これは、初期化されたアダプタのリストが MainActivity Data に元の値を持っているためです。ユーザーがページャーをクリックすると、URL リンクなど、ページャーによって表される情報が抽​​出されます。

実際、現在、多くのアプリが自動ループ切り替えの効果を使用しています。この効果は、次のコードを追加するだけです。

package com.example.viewpagerautoswitch;import java.util.List;import android.content.Context;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;public class MyPagerAdapter extends PagerAdapter {		private List<ImageView> items ; 	private Context mContext ;		public MyPagerAdapter(Context context,List<ImageView> item){		mContext = context ;		items = item ;	}	@Override	public int getCount() {		return items == null ? 0 : items.size();	}	@Override	public boolean isViewFromObject(View view, Object obj) {		return view == (View)obj;	}		 @Override  	 public Object instantiateItem (ViewGroup container, int position) {  	        ImageView image = items.get(position); 	        ((ViewPager)container).addView(image, 0);  	        return image;  	 }  	      	 @Override  	 public void destroyItem (ViewGroup container, int position, Object object) {  	        container.removeView((View)object);  	 }  }

このコードは、開始と停止のスイッチを提供します。自動サイクル切り替えは startTimer() と stopTimer() です。これら 2 つのメソッドを通じて、ニーズに応じて ViewPager を自動的に切り替える必要があるかどうかを決定できます。

さらに、ImageSwitcherの自動切り替えもこのコードを使用して制御できます。