ViewPage+Fragment+indicator+Tabhost効果

14546 ワード

ダウンロード先:
https://github.com/asijack/ViewPage-Fragment-indicator-TabhostDemo
まず効果を見てみましょう.
ViewPage+Fragment+indicator+Tabhost效果
私の前の文章http://www.cnblogs.com/asijack/p/4239445.htmlもこのスライドの効果ですが、それは私が望んでいる効果ではありません.私が望んでいるのは、このスライドのときにカーソルがスライドに従う効果で、スライドが終わってから動くのではありません.
demoはlibraries:ListSamples-libraryを導入する必要があります
注意が必要なのはlibrariesとdemoのandroid-support-v 4です.jarの必要性は一致しています(不要な面倒を省くために、同じjarパッケージを推奨します)
 
コードもそれほど多くありません
まずレイアウトを見てみましょう
<?xml version="1.0" encoding="utf-8"?>



<LinearLayout

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

    android:layout_width="fill_parent"

    android:orientation="vertical"

    android:layout_height="fill_parent">

    

     <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >



        <TextView

            android:id="@+id/tv_guid1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1.0"

            android:layout_marginTop="5dp"

            android:layout_marginBottom="5dp"

            android:gravity="center"

            android:text="fragment1"

            android:textSize="18sp" />



        <TextView

            android:id="@+id/tv_guid2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1.0"

            android:layout_marginTop="5dp"

            android:layout_marginBottom="5dp"

            android:gravity="center"

            android:text="fragment2"

            android:textSize="18sp" />



        <TextView

            android:id="@+id/tv_guid3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1.0"

            android:layout_marginTop="5dp"

            android:layout_marginBottom="5dp"

            android:gravity="center"

            android:text="fragment3"

            android:textSize="18sp" />



        <TextView

            android:id="@+id/tv_guid4"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1.0"

            android:layout_marginTop="5dp"

            android:layout_marginBottom="5dp"

            android:gravity="center"

            android:text="fragment4"

            android:textSize="18sp" />

    </LinearLayout>



   <RelativeLayout 

       android:layout_width="match_parent"

       android:layout_height="match_parent">

        <android.support.v4.view.ViewPager

            android:id="@+id/pager"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

        />

        <com.viewpagerindicator.UnderlinePageIndicator

            android:id="@+id/indicator"

            android:layout_height="5dp"

            android:layout_width="fill_parent"

            android:layout_alignParentTop="true"

        />

   </RelativeLayout>

</LinearLayout>

v 4インジケータ付き
 <android.support.v4.view.PagerTabStrip

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="top" />

これです.
ここにはカスタムインジケータがあります
com.viewpagerindicator.UnderlinePageIndicatorはlibrariesで実現されています.
MainActivityのコードも比較的簡単です
@Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        //   textview

        initTextView();

        

        mAdapter = new MyFragmentAdapter(getSupportFragmentManager());



        mPager = (ViewPager)findViewById(R.id.pager);

        mPager.setAdapter(mAdapter);



        //   

        UnderlinePageIndicator indicator = (UnderlinePageIndicator)findViewById(R.id.indicator);

        indicator.setViewPager(mPager);

        //        

        indicator.setFades(false);

    }



    private void initTextView() {

        //  fragment(view)     textview

        view1=(TextView) findViewById(R.id.tv_guid1);

        view2=(TextView) findViewById(R.id.tv_guid2);

        view3=(TextView) findViewById(R.id.tv_guid3);

        view4=(TextView) findViewById(R.id.tv_guid4);

        //    

        view1.setOnClickListener(new TxListener(0));

        view2.setOnClickListener(new TxListener(1));

        view3.setOnClickListener(new TxListener(2));

        view4.setOnClickListener(new TxListener(3));

    }

    

    public class TxListener implements View.OnClickListener{

        private int index=0;

        

        public TxListener (int i){

            index=i;

        }

        @Override

        public void onClick(View view) {

            mPager.setCurrentItem(index);

        }

        

    }
 //   

        UnderlinePageIndicator indicator = (UnderlinePageIndicator)findViewById(R.id.indicator);

        indicator.setViewPager(mPager);

        //        

        indicator.setFades(false);

ここでインジケータのアニメーション効果、背景などを設定できます.xmlレイアウトで設定することもできます.
その同期カーソルの色はここにある
  final int defaultSelectedColor = res.getColor(R.color.default_underline_indicator_selected_color);
このlibrariesでは、円、線、カスタムなど、カーソルスタイルの変更もサポートされています.
興味があれば、このソースコードを見てもいいです.
ダウンロード先:
https://github.com/asijack/ViewPage-Fragment-indicator-TabhostDemo