Viewpager以及ViewPagerIndicator的相關使用

ViewPagerIndicator開源框架可以用來在ViewPager上方做標題，可以在ViewPager下方做跟隨移動的小圓點，這個類庫必須和自己的項目在電腦的同一磁盤盤符下，比如都在D盤或者E盤，下載這個開源框架后一般有類庫和例子程序，然后自己的項目引入這個類庫，這時會出現的問題是，自己的項目的V4包和ViewPagerIndicator的V4包產生沖突，解決辦法是：在自己項目的libs目錄下刪除V4包，進入到文件目錄下使用360強力刪除，即可解決V4包沖突問題

　　

　　第一個例子，在ViewPager上方添加標題:，每個ViewPager的界面都是一個Fragment

　　這是Activity的布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#fff" tools:context=".MainActivity" >

　　//ViewPager上的標題
    <com.viewpagerindicator.TabPageIndicator android:id="@+id/indicator" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#fff"　　//標題背景為白色
        />

    <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

 

 

 

MainActivity里面的代碼：

 

public class MainActivity extends FragmentActivity { private ViewPager vp; //用來裝3個切換的View
    private List<View> list=new ArrayList<View>(); private String titles[]=new String[]{"1111標題1    ","2222標題","3333標題3    ","4444標題4"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); vp = (ViewPager) findViewById(R.id.vp); vp.setAdapter(new MyAdapter(getSupportFragmentManager())); TabPageIndicator indicator=(TabPageIndicator) findViewById(R.id.indicator); indicator.setViewPager(vp);//把TabPageIndicator標題 和ViewPager關聯起來
 } class MyAdapter extends FragmentPagerAdapter{ public MyAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { Fragment1 fragment1 = new Fragment1(position); return fragment1; } @Override public int getCount() { return titles.length; } //返回標題
 @Override public CharSequence getPageTitle(int position) { String title = titles[position]; return title; } } }

 這是Fragment里的代碼：

//這一個Fragment，但是會用四次，每次的布局都不同
public class Fragment1 extends Fragment {
    public int postion;
    //四個布局Id
    private int[] layouts=new int[]{R.layout.vp_1,R.layout.vp_2,R.layout.vp_3,R.layout.vp_4};
    public Fragment1(){
        
    };
    public Fragment1(int position){
        this.postion=position;
        System.out.println("創建Fragment");
    }
    //此方法用於創建Fragment的布局
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = initView(postion);
        return view;
    }

    public View initView(int positon) {
        View view = View.inflate(getActivity(), layouts[positon], null);
        return view;
    }
}

 此時運行程序時，發現並不是Simple例子中的效果，自己寫的項目里標題都是擠在一起的，然后發現，是和Simple里Activity的Theme不同，所以在清單文件中配置本Activity時加上了這個主題   　　android:theme="@style/Theme.PageIndicatorDefaults"

這樣，標題就和例子程序一樣好看了，如果要加上一些個性化的標題樣式，那么就把@style/Theme.PageIndicatorDefaults這個主題進行更改；

結果圖：

 

 

 

 

 

　　二：在ViewPager下方添加移動的小圓點

主界面布局：整個界面都是ViewPager，小圓點是與父控件底部對齊

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    </android.support.v4.view.ViewPager>

    <com.viewpagerindicator.CirclePageIndicator
        android:layout_alignParentBottom="true"
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp" />

</RelativeLayout>

MainActivity代碼：

public class MainActivity extends FragmentActivity {

    private ViewPager vp;
    //三張圖片的資源ID
    private int[] imageIds=new int[]{R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        vp = (ViewPager) findViewById(R.id.vp);
        vp.setAdapter(new MyAdapter());
        
        CirclePageIndicator mIndicator = (CirclePageIndicator)findViewById(R.id.indicator);
        mIndicator.setViewPager(vp);//把圓點和ViewPager關聯起來
        
    }
    class MyAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            return imageIds.length;
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0==arg1;
        }
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = new ImageView(MainActivity.this);
            
            imageView.setImageResource(imageIds[position]);
            container.addView(imageView);//把imageView添加到父容器中
            
            return imageView;
        }
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
        
    }
}

發現還是沒有想要的效果，那么就是theme的問題，到清單文件中為本Activity加一個Theme-->　　　　android:theme="@style/StyledIndicators

這個主題是在自己項目中建立的，然后把Sample中的那個Activity的主題代碼拷貝過來，相應的狀態選擇器以及資源圖片，缺什么拷什么，也可以自己進行相應的修改，形成自己的風格

運行結果圖：

 

以上就是關於ViewPager添加標題，已經ViewPager添加移動圓點。