Viewpager以及ViewPagerIndicator的相關使用

ViewPagerIndicator開源框架能夠用來在ViewPager上方作標題,能夠在ViewPager下方作跟隨移動的小圓點,這個類庫必須和本身的項目在電腦的同一磁盤盤符下,好比都在D盤或者E盤,下載這個開源框架後通常有類庫和例子程序,而後本身的項目引入這個類庫,這時會出現的問題是,本身的項目的V4包和ViewPagerIndicator的V4包產生衝突,解決辦法是:在本身項目的libs目錄下刪除V4包,進入到文件目錄下使用360強力刪除,便可解決V4包衝突問題android

  

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

  這是Activity的佈局:ide

<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裏的代碼:post

//這一個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"ui

這樣,標題就和例子程序同樣好看了,若是要加上一些個性化的標題樣式,那麼就把@style/Theme.PageIndicatorDefaults這個主題進行更改;this

結果圖:spa

 

 

 

 

 

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

主界面佈局:整個界面都是ViewPager,小圓點是與父控件底部對齊xml

<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添加移動圓點。

相關文章
相關標籤/搜索