ViewPager の簡単な使用法

このセクションの紹介:

このセクションでは、Android 3.0 以降に導入された UI コントロール - ViewPager (ビュースライド切り替えツール) を紹介します。これは本当に予想外です。このコントロールはどのように呼び出すのでしょうか? おおよその機能: ジェスチャースライドによってビューの切り替えを完了できます。これは一般的に APP で使用されます。ブートページまたはイメージカルーセルは 3.0 以降に導入されたため、それより前のバージョンで使用したい場合は v4 を導入する必要があります。互換性パッケージ~、ViewPager が次の場所にあることもわかります: android.support.v4.view.ViewPager ディレクトリ~ このコントロールの基本的な使い方を学びましょう~ 公式 API ドキュメント: ViewPager

1. ViewPager の簡単な紹介

ViewPager は、複数のビューを入力して終了できます。右にスワイプして別のビューを切り替えることができます。 ViewPager の setPageTransformer() メソッドです。切り替え時のアニメーション効果を設定しますもちろんアニメーションはまだ学習していないので、ViewPagerにアニメーションを設定します。それは次の章「描画とアニメーション」に任せましょう。前に学んだ ListView と GridView と同様に、Adapter も必要です (アダプター) は View と ViewPager をバインドしており、ViewPager には特定のアダプターPagerAdapter があります。さらに、Google は ViewPager を埋めるために Fragment を使用することを公式に推奨しています。各ページを生成し、各ページのライフサイクルを管理する方が便利です。 2 つのフラグメントが提供されます専用アダプター: FragmentPageAdapter と FragmentStatePagerAdapter これら 2 つのアダプターの違いを簡単に分析してみましょう:
FragmentPageAdapter: PagerAdapter と同様に、現在のフラグメントと左側のフラグメントと右側のフラグメントのみをキャッシュします。 1 つ、つまり合計 3 つのフラグメントがキャッシュされます。ページ 1、2、3、4 がある場合:
はページ 1: キャッシュ 1、2
はページ 2: キャッシュ 1、2、3
はページ 3 です: 1 ページが破棄され、キャッシュ 2、3、4
ページ 4 が破棄されます: ページ 2、キャッシュ 3、4
さらにページが続きます~
FragmentStatePagerAdapter: フラグメントが役に立たない場合ユーザー見られると、フラグメント全体が破壊されます。フラグメントの状態のみが保存されます。ページを再表示する必要がある場合は、新しいページが生成されます。
要約すると、FragmentPageAdapter は固定ページが少ない場合に適しており、FragmentStatePagerAdapter は次の場合に適しています。ページ数が多い場合、またはページのコンテンツが非常に複雑である (大量のメモリを消費する) 場合に最適です。

2. PagerAdapter の使用

まず、最も一般的な PagerAdapter を紹介します。この PagerAdapter を使用するには、次の 4 つのメソッドを書き直す必要があります。もちろん、これは単なる公式の提案です。実際には、getCount() と isViewFromObject()~
を書き換えるだけで済みます。
getCount(): ビューページャーにあるビューの数を取得します。
destroyItem(): 指定された位置にあるページを削除します。このビューをコンテナから削除するのはアダプタの責任です。これは、finishUpdate(viewGroup) が返されたときにビューを確実に削除できるようにするためです。
他の 2 つのメソッドにはキーが関係します:
instantiateItem(): ①ViewGroup(コンテナ)に任意の位置のビューを追加し、作成・表示します ②新しく追加したページを表すオブジェクト（キー）を返す通常はビューそのものを返すだけでも十分です。独自のキーをカスタマイズしますが、キーは各ビューと 1 対 1 で対応する必要があります
isViewFromObject(): instantiateItem(ViewGroup, int) 関数によって返されたキーがページビューと同じかどうかを判断します。同じビューを表す (つまり、それらが対応しているかどうか、および対応するものが同じビューを表す)。通常は直接書きます。 return view == object!

使用例 1: 最も単純な使用法

レンダリングの実行:

コードの重要な部分:

OK、コードの書き方は非常に簡単です: まず、これは、3 つの各ビューのレイアウトであり、他の 2 つのビューは同じです。

< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent" android:layout_height="match_parent" android:background="../ style/images /android-tutorial-viewpager.html"

android:gravity="center"

android:orientation="vertical">

その後编写一自定のPagerAdapter：

MyPagerAdapter.java：

public class MyPagerAdapter extends PagerAdapter {
private ArrayList<View> viewLists;

public MyPagerAdapter() {
}

public MyPagerAdapter(ArrayList<View> viewLists) {
super();
this.viewLists = viewLists;
}

@Override
public int getCount() {
return viewLists.size();
}

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

@Override
public Object inst antiateItem(ViewGroup container, int position) {
container.addView(viewLists.get(position));
return viewLists.get(position);
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.remo veView(viewLists.get (位置));
}
}

続いてActivity了、以前のListViewに非常に似ています:

OneActivity.java:

public class OneActivity extends AppCompatActivity{

private ViewPager vpager_one;
private ArrayList<View> aList;
private MyPagerAdapter mAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R. layout.activity_one);
vpager_one = (ViewPager) findViewById(R.id. vpager_one);

aList = new ArrayList<View>();
LayoutInflater li = getLayoutInflater();
aList.add(li.inflate(R.layout.view_one,null,false));
aList.add(li .inflate(R.layout.view_two,null,false));
aList.add(li.inflate(R.layout.view_three,null,false));
mAdapter = new MyPagerAdapter(aList);
vpager_one.setAdapter( mアダプター);
}
}

さて、キーコードは上記の部分です、とても分かりやすいですよ〜

使用例2：タイトルバー - PagerTitleStripとPagerTabStrip

ViewPagerのスライドに合わせてスライドするタイトルですこの2つが公式で提供されています。 1 つは通常のテキストです。 1 つは下線付きで、テキストをクリックするとページを切り替えることができます。簡単な例を書いてみましょう~

レンダリングの実行:

キーコードの実装:

2 つの違いはレイアウトのみです。は異なりますが、他はすべて同じです:

PagerTitleStrip Activtiy のレイアウト: activity_two.xml:

而PagerTabStrip が存在する布局：

activity_three.xml：

前の書き換えられたものを除いて、次の 2 つは同じです。最初にカスタム PagerAdapter を作成しましょう。 4 つのメソッドに加えて、別のメソッド getPageTitle() を書き直す必要があります。これはタイトルを設定します~ コードは次のとおりです:

MyPagerAdapter2.java:

/**
* 2015/10/8 0008 に Jay によって作成されました。
*/
public class MyPagerAdapter2 extends PagerAdapter {
private ArrayListviewLists;
private ArrayList;

public MyPagerAdapter2() {} B Public MyPageradapter2 (ArrayList & LT; View & GT; ViewLists, ArrayList & LT; String & GT; TitleLists) ; S This.titalLists = TitleLists; Return viewLists.size();
}

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

@Override
public Object instantiateItグループコンテナ、整数位置) {
container.addView(viewLists.get(position));
return viewLists.get(position);
}

@Override
public void destroyItem(ViewGroupcontainer, int Position, Object object) {
container.re moveView( viewLists.get (position));
}

@Override
public CharSequence getPageTitle(intposition) {
return titleLists.get(position);

最後はアクティビティ部分、二都は一样的：

TwoActivity.java：

/**
* 2015/10/8 0008 に Jay によって作成されました。
*/
public class TwoActivity extends AppCompatActivity {

private ViewPager vpager_two;
プライベート ArrayList<View> ; aList;
private ArrayList<String> sList;
private MyPagerAdapter2 mAdapter;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R. layout.activity_two);
vpager_two = (ViewPager) findViewById(R.id. vpager_two);
aList = new ArrayList<View>();
LayoutInflater li = getLayoutInflater();
aList.add(li.inflate(R.layout.view_one,null,false));
aList.add(li. inflate(R.layout.view_two,null,false));
aList.add(li.inflate(R.layout.view_three, null, false));
sList = new ArrayList<String>();
sList.add ("橘黄");
sList.add("淡黄");
sList.add("浅棕");
mAdapter = new MyPagerAdapter2(aList,sList);
vpager_two.setAdapter(mAdapter);
}
}

わかりました、とても簡単です。質問がある場合は、デモをダウンロードするだけで理解できます~

例 3: ViewPager を使用して TabHost の効果を実現します:

もちろん、例 2 は単なる単なる例です。良いアイデアですが、実際の開発では、このタイトルバーを自分でカスタマイズする必要があるかもしれません。 TabHost が何なのかわからない場合は、TabHost の効果を実現する簡単な例を書いてみましょう。もしそうなら、レンダリングを見てください！

レンダリングの実行:

ロジック分析の実装:

上記の効果を達成するためのロジックを説明し、コードを貼り付けましょう:

最初はレイアウトです: 上部に LinearLayout 、ラップされた 3 つの TextView の場合、weight 属性はすべて 1 であり、その後は次のようになります。スライダーの ImageView の場合、幅を match_parent に設定します。一番下は ViewPager です。不明なプロパティが 2 つあります。1 つは次のとおりです。flipInterval: これは、ビューアニメーション間の時間間隔を指定します。
persistentDrawingCache: コントロールの描画キャッシュ戦略を設定します。
none: 描画キャッシュをメモリに保存しません。
animation: アニメーション描画キャッシュのみを保存します。 : スクロール効果の描画キャッシュのみを保存します;
all: すべての描画キャッシュをメモリに保存する必要があります。
このようにアニメーション | スクロールを同時に使用できます~

レイアウトコード:

activity_four。 xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id= @+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<LinearLayout
android :レイアウト幅="fill_parent"
android:layout_height="48dp"
android:background="../style/images/android-tutorial-viewpager.html">

<TextView
android:id="@+id/ tv_one"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="橘黄"
android:textColor="#000000 " />

<TextView
android:id="@+id/tv_two"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity= "center"
android:text="淡黄"
android:textColor="#000000" />

<TextView
android:id="@+id/tv_three"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="浅棕"
android:textColor="#000000" / >
</LinearLayout>

<ImageView
android:id="@+id/img_cursor"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="マトリックス"
android:src="@mipmap/line" />

<android.support.v4.view.ViewPager
android:id="@+id/vpager_four"
android:layout_width="wrap_content"
android:layout_height = "0DP"
android：layout_gravity = "center"
android：layout_weight = "1.0"
次に、アクティビティに移ります。考えてみましょう:
ステップ 1: 移動ブロックを最初のテキストの下の中央に配置する必要があるため、ここでオフセットを計算する必要があります。まず画像の幅 pw を取得し、次に画面の幅 sw を取得します。計算方法は非常に簡単です:
offset (offset) = ((sw / 3)-pw) / 2 //画面の幅/3 - 画面の幅、そして2で割りますよね？
次に、setImageMatrix を呼び出して、スライダーの現在位置を設定します。
同時に、1 ページと 2 ページを切り替えて、スライダーの移動距離を計算します。これは非常に簡単です:
one = offset * 2 + pw;
two = one * 2;
ステップ 2: ページをスライドするとき、スライダーを移動する必要があり、 OnPageChangeListenerイベントでは、スライド後のページを判定し、スライド前のページを記録する必要があります。どのページか、下に絵を描いてみた方が分かりやすいかも知れません！
追伸: 長い間書いていませんでしたが、文字が醜いのがはっきりと見えると良いです、笑〜
そうですね、まだできるなら。理解できない、自分で描いてみれば理解できる、以下のコード:
FourActvitiy.java:
/**
* 2015/10/8 0008 に Jay によって作成されました。
*/
public class FourActivity extends AppCompatActivity 実装 View.OnClickListener,
ViewPager.OnPageChangeListener {

private ViewPager vpager_four;
private ImageView img_cursor;
プライベート TextView tv_one;
プライベート TextView tv_two;
プライベート TextView tv_three;

private ArrayList<View> listViews;
private int offset = 0;// 移動バー画像のオフセット
private int currIndex = 0;// 現在のページの番号
private int bmpWidth;// 移動バー画像
の長さ private int one = 0; //スライダーが 1 ページ移動する距離
private int two = 0 //スライダーが 2 ページ移動する距離

public void onCreate(Bundle SavedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_four);
initViews(); tv_one = ( TextView) findViewById(R.id.tv_one);
tv_two = (TextView) findViewById(R.id.tv_two);
tv_three = (TextView) findViewById(R.id.tv_three);
img_cursor = (画像ビュー) findViewById(R .id.img_cursor); // 関連設定ラインアニメーション:
bmpwidth = bitmapFactory.DecodeResource (getResources (), R.MIPMAP.Line) .GetWidth (); // aymetrics dm = New Displaymetrics ( );
getWindowManager().getDefaultDisplay().getMetrics(dm);
int screenW = dm.widthPixels;// 解像度の幅を取得します
offset =（screenw -bmpwidth）//オフセット= new Matrix（）; using using using using using ‐ ' out of through out through off out out together out out out outmb outmbmb outmbmb outmbmballowce outce out outmb out out out out out out out of '''' through through''''‐‐ 1 use using ‐ through using through outアウトアウトアウトスルーアウトスルーアウトの ''s '' s ‐ ‐‐ ‐‐‐‐‐ 1 to 3 to 3
listViews .add(mInflater.inflate(R.layout.view_one, null, false));
listViews.add(mInflater.inflate(R.layout.view_two, null, false));
listViews.add(mInflater.inflate(R .layout.view_three, null, false); tv_one.setOnClickListener(this) ;
tv_two. setonclicklistener（this）; void onclick（v.getId（））{ vpager_four.setCurrentItem(1);
break;
case R.id.tv_three:
vpager_four.setCurrentItem(2);
break;
}
}

@Override
public void onPageSelected(int index) {
アニメーション animation = null;
switch (index) {
case 0:
if (currIndex == 1) {
animation = new TranslateAnimation(one, 0, 0 , 0);
} else if (currIndex == 2) {
アニメーション = new TranslateAnimation(two, 0, 0, 0);
}
break;
case 1:
if (currIndex == 0) {
animation = new TranslateAnimation(offset, one, 0, 0);
} else if ( currIndex == 2) {
animation = new TranslateAnimation(two, one, 0, 0);
}
break;
ケース 2:
1) {
anime = new TranslateAnimation(one, two, 0, 0 ); //アニメーション時間を設定します。 300 ミリ秒
img_cursor.startAnimation(animation) //アニメーションを開始します
}

@Override
public void onPageScrollStateChanged(int i) {

}

@Override
public void onPageScrolled( int i, float v, int i1) {

}
}

アニメーションに慣れている方は大丈夫です、次の章に進んでいきます~

3. ViewPagerとFragmentの組み合わせの例

まあ、以前にFragmentを説明するときに説明します。使用例は次のとおりです: Android基本入門チュートリアル- 5.2.4 フラグメントの例 - 下部のナビゲーションバー + ViewPager のスライド切り替えページについてはここでは詳しく説明しませんので、興味のある方はリンクをクリックしてご覧ください~

4. コードサンプルのダウンロード
ViewPagerDemo.zip
このセクションの概要:
ViewPager については、スペースの都合上、記載されていない箇所もあります。その他は自分でドキュメントを参照する必要があります~
また、上記でも説明しています。 ViewPager のアニメーションは次の章で説明します。はい、以上です〜
さて、国慶節の前に、国慶節の連休中にシリーズを全部終わらせると言いましたが、結局一章も書かずにすみませんでした…。女の子が遊びに来てるからね～
、進行スピード上げて～、早く進めるように頑張ります！

← メニュー

DrawerLayoutの簡単な使い方（公式サイドスライドメニュー） →

提出する

ViewPager の簡単な使用法

このセクションの紹介:

1. ViewPager の簡単な紹介

2. PagerAdapter の使用

使用例 1: 最も単純な使用法

使用例2：タイトルバー - PagerTitleStripとPagerTabStrip

例 3: ViewPager を使用して TabHost の効果を実現します:

ViewPager については、スペースの都合上、記載されていない箇所もあります。その他は自分でドキュメントを参照する必要があります~

、進行スピード上げて～、早く進めるように頑張ります！

PHP中国語ウェブサイト