1. 程式人生 > >Android實現頂部輪播圖

Android實現頂部輪播圖

1,首先,宣告一些引用:

SharedPreferences sp;
private ViewPager vp_top_pic;
private List viewList;
private ViewPager rollViewPager;
private LinearLayout ll_point,ll_fragment_unlogin;
/**用於小圓點圖片*/
private List<ImageView> dotViewList;
private int currentItem  = 0;//當前頁面
int maxValue;
int extra;
2,輪播圖要顯示的圖片:
//
頂部輪播圖 vp_top_pic= (ViewPager) findViewById(R.id.viewpager); ll_point= (LinearLayout)findViewById(R.id.ll_point); dotViewList = new ArrayList<ImageView>(); View view1 = LayoutInflater.from(this).inflate(R.layout.top_pic, null); View view2 = LayoutInflater.from(this).inflate(R.layout.top_pic, null
); View view3 = LayoutInflater.from(this).inflate(R.layout.top_pic, null); viewList = new ArrayList<View>();// 將要分頁顯示的View裝入陣列中 viewList.add(view1); viewList.add(view2); viewList.add(view3);
3,設定介面卡,動態新增指示點,開啟輪播:
MyPagerAdapter adapter= new MyPagerAdapter();
vp_top_pic.setAdapter(adapter);
//動態新增指示點
addPointToContainer(viewList); //開啟輪播 maxValue= Integer.MAX_VALUE/2; extra = maxValue % viewList.size(); //這裡以一個%30的數開始,這樣開啟預設會在第0item顯示 vp_top_pic.setCurrentItem(maxValue-extra); startScroll(); //viewPager設定頁面改變的監聽 vp_top_pic.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int i, float v, int i1) { } @Override public void onPageSelected(int position) { // TODO Auto-generated method stub //這裡面動態改變小圓點的被背景,來實現效果 currentItem = position % dotViewList.size(); //Toast.makeText(MainActivity.this,position+"",Toast.LENGTH_LONG).show(); for(int i=0;i < dotViewList.size();i++){ //Toast.makeText(MainActivity.this,dotViewList.size()+"",Toast.LENGTH_LONG).show(); if(i == currentItem){ (dotViewList.get(currentItem)).setBackgroundResource(R.drawable.dot_focus); }else { (dotViewList.get(i)).setBackgroundResource(R.drawable.dot_normal); } } } @Override public void onPageScrollStateChanged(int i) { } });
4,新增指示點以及介面卡的程式碼如下:
/**
 * 給容器新增點
* @param data
*/
protected void addPointToContainer(List<String> data) {
    ll_point.removeAllViews();
    for (int i = 0; i < data.size(); i++) {
        ImageView view = new ImageView(this);
view.setBackgroundResource(R.drawable.dot_normal);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                android.view.ViewGroup.LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin = 15;//設定小圓點的外邊距
params.rightMargin = 15;
params.height = 20;//設定小圓點的大小
params.width = 20;
        if(i == 0){
            view.setBackgroundResource(R.drawable.dot_focus);
}else{

            view.setBackgroundResource(R.drawable.dot_normal);
}
        ll_point.addView(view, params);
dotViewList.add(view);
//上面是動態添加了三個小圓點
}
}


Handler handler = new Handler(){
    public void handleMessage(Message msg) {
        super.handleMessage(msg);
        int currentItem  = vp_top_pic.getCurrentItem();
currentItem ++;
vp_top_pic.setCurrentItem(currentItem);
handler.sendEmptyMessageDelayed(1, 2000);//2s傳送訊息
}
};
//每隔2s中傳送一條訊息,開啟輪播
private void startScroll(){
    //開啟輪播
handler.sendEmptyMessageDelayed(1, 2000);//2s傳送訊息
}

//當介面退出的時候,停止輪播
private void stopScroll(){
    //停止輪播
handler.removeCallbacksAndMessages(1);
}

@Override
protected void onPause() {
    super.onStop();
//介面失去焦點的時候停止輪播
stopScroll();
}

class MyPagerAdapter extends PagerAdapter {

    @Override
public int getCount() {
        return Integer.MAX_VALUE;
}

    @Override
public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;//官方提示這樣寫
}

    @Override
public void destroyItem(ViewGroup container, int position, Object object) {
        //container.removeView((View) viewList.get(position));//刪除頁卡
}

    @Override
public Object instantiateItem(ViewGroup container, int position) {
        //ViewPager頁號求模取出View列表中要顯示的項
position %= viewList.size();
        if (position<0){
            position = viewList.size()+position;
}
        View view = (View) viewList.get(position);
//如果View已經在之前新增到了一個父元件,則必須先remove,否則會丟擲IllegalStateExceptionViewParent vp =view.getParent();
        if (vp!=null){
            ViewGroup parent = (ViewGroup)vp;
parent.removeView(view);
}
        container.addView(view);
//add listeners here if necessary
return view;
}
}
5,佈局檔案如下所示:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="120dp">
    <android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
    </android.support.v4.view.ViewPager>
    <LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content"
android:background="#00000000"
android:layout_alignParentBottom="true"
android:weightSum="1">
        <TextView
android:textColor="@color/white"
android:textSize="15sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="頂部輪播圖示題"
android:layout_weight="1" />
        <LinearLayout
android:id="@+id/ll_point"
android:layout_weight="0.31"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

以上程式碼就可以實現輪播了!