Android使用ViewPager實現滾動廣告

2019-10-21 21:35:36

字體：大中小

來源：轉載

供稿：網友

在一些類似于淘寶的電商網站上經常能夠看到一些滾動的廣告條，許多軟件在首頁也有類似的廣告條，如圖：

Android,ViewPager,滾動廣告

實現起來并不是很復雜的，結合網上的一些教程，實現了現在這樣一個可以幾張圖循環播放，并且可以手指滑動切換的效果。

工程文件結構：

Android,ViewPager,滾動廣告

布局文件：

<?xml version="1.0" encoding="utf-8"?><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" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="yuxin.ad.MainActivity"> <android.support.v4.view.ViewPager  android:id="@+id/viewPager"  android:layout_width="wrap_content"  android:layout_height="200dp"  android:adjustViewBounds="true" /> <LinearLayout  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:layout_alignBottom="@id/viewPager"  android:background="#33000000"  android:orientation="vertical"  android:padding="5dp">  <LinearLayout   android:id="@+id/show_point"   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:layout_gravity="center_horizontal"   android:orientation="horizontal" /> </LinearLayout></RelativeLayout>

最上面是一個ViewPager，用來展示需要滾動播放的圖片；下面是一個線性布局，用來放最下面的幾個小圓點，也可以在里面放一些TextView等，小圓點的數量是根據圖片數量動態添加的。

MainActivity.java

public class MainActivity extends AppCompatActivity { private ViewPager viewPager; // 存放圖片 private List<ImageView> imageViewList; private ImageView imageView; // 存放小圓點布局文件 private LinearLayout layoutPointGroup; // 線程開關，當activity銷毀后，線程也應該停止運行 private boolean isStop = false; private int previousPoint = 0; @Override protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);  // 初始化  init();  //設置圖片自動滾動  new Thread(new Runnable() {   @Override   public void run() {    //如果activity未銷毀則一直執行    while (!isStop) {     //先休息3秒鐘     try {      Thread.sleep(3000);     } catch (InterruptedException e) {      e.printStackTrace();     }     //以下代碼發送到主線程中執行     runOnUiThread(new Runnable() {      @Override      public void run() {       viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);      }     });    }   }  }).start(); } private void init() {  viewPager = (ViewPager) findViewById(R.id.viewPager);  layoutPointGroup = (LinearLayout) findViewById(R.id.show_point);  imageViewList = new ArrayList<ImageView>();  // TODO:獲取圖片ID  int[] imageIDs = {R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e};  for (int id : imageIDs) {   // 構造新的圖片對象,并根據id 設置圖片背景   imageView = new ImageView(this);   imageView.setImageResource(id);   // 所有圖片都存放在 imageViewList 里面   imageViewList.add(imageView);   // 構造小點   View v = new View(this);   // 設置小點的寬和高   LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(8, 8);   // 設置小點的左邊距   params.leftMargin = 12;   v.setLayoutParams(params);   // 設置小點是否可用，默認都不可用，當不可用時，小點是透明的，否則是白色的   v.setEnabled(false);   // 設置小點的背景，這個背景是使用xml文件畫的一個小圓點   v.setBackgroundResource(R.drawable.pointer_selector);   // 把小點添加到它的布局文件中   layoutPointGroup.addView(v);  }  // 計算應用打開時顯示的第一項 Integer.MAX_VALUE /2 - 3=0  int index = Integer.MAX_VALUE / 2 - 3;  // 給mViewPager設置數據  viewPager.setAdapter(new MyPagerAdapter());  // 給mViewPager設置頁面滑動事件  viewPager.setOnPageChangeListener(new MyOnPageChangeListener());  // 設置應用打開時顯示的第一項，index的值為0  // 使用這種方式得到的0，和直接寫0有什么區別呢？  // 直接寫0，應用打開后不能直接向右滑動，因為viewpager中存image位置不能為負值，只能先向左滑動  // 這種方式得到的0，可以實現應用一打開，就可以向右滑動  viewPager.setCurrentItem(index); } private class MyPagerAdapter extends PagerAdapter {  @Override  public int getCount() {   return Integer.MAX_VALUE;  }  @Override  public boolean isViewFromObject(View view, Object object) {   return view == object;  }  // 當一頁滑出去的時候將它銷毀  @Override  public void destroyItem(ViewGroup container, int position, Object object) {   container.removeView(imageViewList.get(position % imageViewList.size()));  }  // 向容器中添加圖片，由于我們要實現循環滑動的效果，所以要對position取模  @Override  public Object instantiateItem(ViewGroup container, int position) {   container.addView(imageViewList.get(position % imageViewList.size()));   return imageViewList.get(position % imageViewList.size());  } } private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {  // 開始  @Override  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  }  // 進行時  @Override  public void onPageSelected(int position) {   // 當頁面滑動結束時，先對頁面位置取模   position = position % imageViewList.size();   // 將上一個點的可用性設置為false   layoutPointGroup.getChildAt(previousPoint).setEnabled(false);   // 把當前點的可用性設置為true   layoutPointGroup.getChildAt(position).setEnabled(true);   // 把當前位置值賦值給previousPoint   previousPoint = position;  }  // 結束  @Override  public void onPageScrollStateChanged(int state) {  } } // 當activity銷毀時，讓線程停止 @Override public void onDestroy() {  isStop = true;  super.onDestroy(); }}

具體功能實現可以看代碼里的注釋，寫的十分詳細了。

未選中的小圓點pointer_disable.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <!-- 設置圓角半徑 --> <corners android:radius="0.5dip" /> <!-- 設置填充的顏色 --> <solid android:color="#55000000" /></shape>

選中時的小圓點pointer_focus.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <corners android:radius="0.5dip" /> <solid android:color="#aaFFFFFF" /></shape>

小圓點選擇器：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 選中時，小點為白色 --> <item android:drawable="@drawable/pointer_focus" android:state_enabled="true"></item> <!-- 未選中時，小點為透明色 --> <item android:drawable="@drawable/pointer_disable" android:state_enabled="false"></item></selector>

完整源碼下載

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。

注：相關教程知識閱讀請移步到Android開發頻道。

上一篇：Android自定義View實現拖拽效果

下一篇：Android獲取網絡圖片并顯示的方法