Android實現頂部輪播圖
阿新 • • 發佈:2019-02-13
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,輪播圖要顯示的圖片:
//3,設定介面卡,動態新增指示點,開啟輪播:頂部輪播圖 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);
MyPagerAdapter adapter= new MyPagerAdapter(); vp_top_pic.setAdapter(adapter); //動態新增指示點4,新增指示點以及介面卡的程式碼如下:addPointToContainer(viewList); //開啟輪播 maxValue= Integer.MAX_VALUE/2; extra = maxValue % viewList.size(); //這裡以一個%3為0的數開始,這樣開啟預設會在第0個item顯示 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) { } });
/** * 給容器新增點 * @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,否則會丟擲IllegalStateException。 ViewParent 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>
以上程式碼就可以實現輪播了!