View Pager+Fragmentを使って、スクロールバー付きの多画面スライドを実現します.

7168 ワード

転載は出典を明記してください.http://blog.csdn.net/singwhatiwanna/article/details/17201587
紹介する
Androidアプリケーションでは、マルチスクリーンスライドは非常に一般的なスタイルです.ブロガーは以前にもいくつかのマルチスクリーンスライドのデモを書いていました.http://blog.csdn.net/singwhatiwanna/article/details/8875241)とスタンバイのコントロールがあります.今回はより効果的なスタイルを紹介します.スクロールバー付きの多画面スライドは、グーグルプレイのようなスタイルです.私が以前書いたbannerを見たら、そのbannerは元のもので、view pagerなどを使っていないので、コードが長いです.Viewer Pagerを使うと、コードが短くなります.でも、View Pagerを使うと、android-support-v 4.jarを導入する必要があります.詳細は制御できません.しかし、現在の状況はもう違っています.android-support-v 4は実用的な機能が多く提供されています.そのため、現在はAndroidプロジェクトを新設し、デフォルトではこのjarパッケージを導入しています.私たちもviewpagerを使ってスライドしましょう.もう一つの概念はFragmentとFragment Activityで、Fragmentは特殊な種類で、activityと一致するライフサイクルとviewが一致するインターフェース、つまりFragmentはライフサイクルを持つViewと同じです.Fragmentを使う利点は、Fragmentは再利用できますし、各Fragmentは自分の業務を内部で処理することができます.activityのようにモジュール間結合が低いので、すべての業務を一つのactivityの内部ロジックに書くよりもずっとはっきりしています.また、各モジュールの業務はFragment内で実現されますので、このようにactivityはいくつかのフラジャイティを管理すればいいです.業務に関することをする必要はありません.最後に、Fragmentは様々な解像度の機種の適応に使えます.Fragmentはsdkとandroid-support-v 4の中にありますが、互換性の問題で、私たちはandroid-support-v 4の中のFragmentを使うしかないです.あなたのアプリが3.0以降のAndroidの携帯だけを走ってほしいなら、Fragment Activityの状況とFragmentは似ています.FragmentとFragment Activityについては、いくつかの基本的な使い方がありますが、Fragmentは本文のポイントではないので、ここでは紹介しません.
Indicator Fragment Activityの実現過程
1新しいプロジェクトを作成します.ディレクトリ構造は以下の通りです.
使用ViewPager+Fragment来实现带滚动条的多屏滑动-IndicatorFragmentActivity
2 uiパッケージ下の三つのファイルを実現する.
View Pager Comput.java:これはViewer Pagerの強化クラスで、主に滑り衝突の問題を解決するためです.そうでないと、Viewer Pagerの内部にListViewなどのスライドコントロールを入れると、両者の間に干渉が発生します.
ここでもっと言いたいのですが、このような問題について、解決策は父コントロールのオンインテットTouchEvent関数を書き直して、moveの時に必要に応じてtrueに戻ります.例えば、左右スライドしてtrueに戻ります.他の場合はfalseに戻ります.このように、左右にスライドすると、one Intercept TouchEventがtrueに戻ってきますので、親コントロールが処理できます.他の場合、イベントはlistviewに渡されます.listview自身は上下スライドを処理できます.
 
public class ViewPagerCompat extends ViewPager {



    //mViewTouchMode  ViewPager          ,   false,    

    private boolean mViewTouchMode = false;



    public ViewPagerCompat(Context context, AttributeSet attrs) {

        super(context, attrs);

    }



    public void setViewTouchMode(boolean b) {

        if (b && !isFakeDragging()) {

            //        

            beginFakeDrag();

        } else if (!b && isFakeDragging()) {

            //        

            endFakeDrag();

        }

        mViewTouchMode = b;

    }



    /**

     *  mViewTouchMode true   ,ViewPager       ,       View  

     */

    @Override

    public boolean onInterceptTouchEvent(MotionEvent event) {

        if (mViewTouchMode) {

            return false;

        }

        return super.onInterceptTouchEvent(event);

    }



    @Override

    public boolean onTouchEvent(MotionEvent ev) {

        try {

            return super.onTouchEvent(ev);

        } catch (Exception e) {

            return false;

        }

    }



    /**

     *  mViewTouchMode true             ,ViewPager         ,

     *        ViewPager   ListView        ,              

     */

    @Override

    public boolean arrowScroll(int direction) {

        if (mViewTouchMode) return false;

        if (direction != FOCUS_LEFT && direction != FOCUS_RIGHT) return false;

        return super.arrowScroll(direction);

    }



}
下の二つのファイルコードはちょっと多くて、くっつけませんでした.後にダウンロード住所が付いています.ダウンロードしてみてください.コードは全部注釈しました.何か質問がありましたら、交流を歓迎します.
TitleIndicator.java:この一つはスクロールバー付きのタブで、viewpagerのスライドに従ってスライドします.その実現思想はこうです.各タブはviewです.必要に応じてadd複数のview、つまり複数のタブが入ってきます.タブの下部にはロールバーがあります.スクロールバーはcanvasで描いたものです.すべてのinvalidate方法はonDrawをトリガします.ページがスクロールする時、スクロール距離があります.その後、onDrawがトリガされると、新しい位置にスクロールバーを描き直します.
Indicator Fragment Activity.java:これはIndicator FrantActivityのメインインターフェースであり、上記の2つのviewを管理し、サブクラスにprotected astractact supplyTabs(List<TabInfo>tabs)インターフェースを提供してページを生成する.
このIndicator FrangentActivityの使い方を紹介します.
 
 
どう使いますか
 
次の手順でお願いします.
1新しいクラスを作成し、Indicator Fragment Activityを継承し、supplyTabsの抽象的な方法を実現し、タブを生成するために必要なデータを提供します.
 
public class MainActivity extends IndicatorFragmentActivity {



    public static final int FRAGMENT_ONE = 0;

    public static final int FRAGMENT_TWO = 1;

    public static final int FRAGMENT_THREE = 2;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

    }



    //             

    @Override

    protected int supplyTabs(List<TabInfo> tabs) {

        tabs.add(new TabInfo(FRAGMENT_ONE, getString(R.string.fragment_one),

                FragmentOne.class));

        tabs.add(new TabInfo(FRAGMENT_TWO, getString(R.string.fragment_two),

                FragmentTwo.class));

        tabs.add(new TabInfo(FRAGMENT_THREE, getString(R.string.fragment_three),

                FragmentThree.class));



	    //                   fragment   

        return FRAGMENT_TWO;

    }



}
 
2タブごとにfragmentクラスを提供します.
一番簡単なfragmentで、何もしないで、一つのlayoutをロードしてからlistviewを初期化します.実は私のデモには3つのインターフェースのようなfragmentがありますが、ブロガーは怠けるために直接にBaseFragmentを書いています.この3つは全部このBaseFragmentを引き継ぎます.どうせインターフェースは同じです.
 
public class BaseFragment extends Fragment {

    protected View mMainView;

    protected static ArrayList<Map<String, Object>> mlistItems;

    protected Context mContext;



    static {

        mlistItems = new ArrayList<Map<String, Object>>();

        for (int i = 0; i < 20; i++) {

            Map<String, Object> map = new HashMap<String, Object>();

            map.put("name", "name#" + i);

            map.put("sex", i % 2 == 0 ? "male" : "female");

            mlistItems.add(map);

        }

    }



    public BaseFragment() {

        super();

    }



    @Override

    public void onAttach(Activity activity) {

        super.onAttach(activity);

        mContext = activity.getApplicationContext();

    }



    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        mMainView = inflater.inflate(R.layout.fragment_one, container, false);

        ListView listView = (ListView) mMainView.findViewById(R.id.list);

        SimpleAdapter adapter = new SimpleAdapter(mContext, mlistItems,

                R.layout.listview_item, new String[] {

                        "name", "sex"

                }, new int[] {

                        R.id.name, R.id.download

                });

        listView.setAdapter(adapter);

        return mMainView;

    }



}
 
これでOKです.簡単です.つまり、この効果がほしいなら、スウェーデンのカバンの中の3つの種類を導入して、上記の2つのステップでやればいいです.また、タブの色やスクロールバーの色は調整できます.また、各タブの上には他のマークが表示されます.例えば、赤い点々など、新しいメッセージがあるような状態です.何か問題がありましたら、下のメッセージで交流してください.
使用ViewPager+Fragment来实现带滚动条的多屏滑动-IndicatorFragmentActivity
コードダウンロード:アップロード待ち