對于做Android開發(fā)的工程師對于這個(gè)效果的實(shí)現(xiàn)一定不陌生，本篇我將帶領(lǐng)大家先簡單實(shí)現(xiàn)這個(gè)效果，再為大家介紹一下其中的原理，方便新手學(xué)習(xí)，老手復(fù)習(xí)，內(nèi)容簡單易懂，沒有基礎(chǔ)一樣學(xué)習(xí)，不扯沒用的了，下面開始我們本篇內(nèi)容的干貨。

　　對于這個(gè)效果的實(shí)現(xiàn)，第一次接觸時(shí)倍感困難，在之前的博客中為大家介紹了如何實(shí)現(xiàn)引導(dǎo)頁效果，雖然帶領(lǐng)大家實(shí)現(xiàn)了上述功能，但是對于具體的實(shí)現(xiàn)，其實(shí)內(nèi)心有疑惑的，當(dāng)初不是什么的清楚其中的原理，經(jīng)過這些天的不懈努力，終于被我攻破了，開始介紹一下實(shí)現(xiàn)的原理：1、既然是廣告效果，一定需要圖片切換；2、圖片切換要有標(biāo)識(shí)，方便用戶查看；3、圖片切換要實(shí)現(xiàn)自動(dòng)內(nèi)容切換。這三點(diǎn)中最難的當(dāng)屬后兩個(gè)了，在之前的文章中我已經(jīng)帶領(lǐng)大家實(shí)現(xiàn)過第一個(gè)效果了，有興趣的小童鞋可以自行學(xué)習(xí)。

　　我們開始今天的工作，首先我們需要準(zhǔn)備6張圖片（兩張圓點(diǎn)圖片+四張任意圖片），用于我們實(shí)現(xiàn)的需要。對于圓點(diǎn)圖片大家有時(shí)間不容易找，我為大家提供兩種參考：

　　白色：

　　藍(lán)色：

　　僅供參考，大家如果有更好的，請繞道。

　　準(zhǔn)備好素材后，下面我們開始設(shè)計(jì)我們的代碼：
　　一、在res下新建一個(gè)drawable文件夾，在其中新建一個(gè)round.xml，用于我們上面兩張圖片切換顯示控制，具體代碼如下：

<?xml version="1.0" encoding="UTF-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_selected="true" android:drawable="@drawable/blank"/><item android:state_selected="false" android:drawable="@drawable/white"/> </selector>

　　二、下面我們開始我們的布局文件書寫：

<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.ViewPagerandroid:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="match_parent"/><LinearLayout android:id="@+id/ll"android:orientation="horizontal"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_marginBottom="20dp"android:layout_centerHorizontal="true"><ImageView android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/round"android:layout_marginRight="5dp"android:visibility="gone"android:clickable="true"/><ImageView android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/round"android:layout_marginRight="5dp"android:visibility="gone"android:clickable="true"/><ImageView android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/round"android:layout_marginRight="5dp"android:visibility="gone"android:clickable="true"/><ImageView android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/round"android:layout_marginRight="5dp"android:visibility="gone"android:clickable="true"/><ImageView android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/round"android:layout_marginRight="5dp"android:visibility="gone"android:clickable="true"/></LinearLayout></RelativeLayout>

?　　注釋：藍(lán)色標(biāo)注處表示LinearLayout至于界面底部；紅色標(biāo)注處表示應(yīng)用我們配置好的圖片信息，現(xiàn)在我們的界面效果是看不出來的，因?yàn)镮magerView我設(shè)置了銷毀屬性（android:visibility="gone"），這個(gè)不影響，在下面的代碼中我們來控制顯示。

　　三、我們實(shí)現(xiàn)圖片切換時(shí)，用到了PagerAdapter，這里為了方便我們設(shè)計(jì)代碼，我設(shè)計(jì)了一個(gè)自定義的PagerAdapter對象：MyselfPagerAdapter.java:

public class MyselfPagerAdapter extends PagerAdapter {private List<View> view;public MyselfPagerAdapter(List<View> view){this.view = view;}@Overridepublic int getCount() {if(view!=null){return view.size();}return 0;}@Override//銷毀position位置的界面public void destroyItem(View container, int position, Object object) {((ViewPager) container).removeView(view.get(position));}@Override//初始化position位置的界面public Object instantiateItem(View container, int position) {((ViewPager) container).addView(view.get(position));return view.get(position);}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}}

　　下面就是我們今天的重頭戲了：MainActivity.java，先看代碼，下面做解釋。

public class MainActivity extends Activity implements OnPageChangeListener, OnClickListener{private ViewPager vp;private MyselfPagerAdapter myselfPagerAdapter;private List<View> listView;private ImageView[] round;private static final int [] imagerResource = {R.drawable.imager1, R.drawable.imager2, R.drawable.imager3, R.drawable.imager4};public int currentIndex = 0;private Handler handler = new Handler();public MyRunnable myRunnable = new MyRunnable();public boolean flag = false;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);init();vp = (ViewPager) findViewById(R.id.viewPager);myselfPagerAdapter = new MyselfPagerAdapter(listView);vp.setAdapter(myselfPagerAdapter);vp.setOnPageChangeListener(this);//初始化底部小點(diǎn) initRound();handler.postDelayed(myRunnable, 3000);}private void init() {listView = new ArrayList<View>();for(int i = 0; i<imagerResource.length; i++){ImageView imageView = new ImageView(this);imageView.setImageResource(imagerResource[i]);listView.add(imageView);}}private void initRound() {LinearLayout ll = (LinearLayout) findViewById(R.id.ll);round = new ImageView[imagerResource.length];for(int i=0; i<imagerResource.length; i++){round[i] = (ImageView) ll.getChildAt(i);round[i].setVisibility(View.VISIBLE);round[i].setOnClickListener(this);round[i].setSelected(false);round[i].setTag(i);}round[currentIndex].setSelected(true);}private void setCurView(int position){if(position<0||position>=imagerResource.length){return;}vp.setCurrentItem(position);}private void setRoundView(int position){if(position<0||position>=imagerResource.length||currentIndex==position){return;}round[position].setSelected(true);round[currentIndex].setSelected(false);currentIndex = position;}@Override//當(dāng)滑動(dòng)狀態(tài)改變時(shí)調(diào)用 public void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub }@Override//當(dāng)前頁面被滑動(dòng)時(shí)調(diào)用 public void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub }@Override//當(dāng)新的頁面被選中時(shí)調(diào)用 public void onPageSelected(int arg0) {// TODO Auto-generated method stub setRoundView(arg0);}@Overridepublic void onClick(View v) {int position = (Integer)v.getTag();setCurView(position);setRoundView(position);}class MyRunnable implements Runnable{@Overridepublic void run() {int n = currentIndex;if(n == imagerResource.length-1){flag = false;}else{if(n == 0){flag = true;}}if(flag){n = (n + 1)%listView.size();}else{n = (n - 1)%listView.size();}setCurView(n);setRoundView(n);handler.postDelayed(myRunnable, 3000);}}}

　　這兩段代碼的作用：為我們添加ImagerView的點(diǎn)擊事件做鋪墊

private void setCurView(int position){if(position<0||position>=imagerResource.length){return;}vp.setCurrentItem(position);}private void setRoundView(int position){if(position<0||position>=imagerResource.length||currentIndex==position){return;}round[position].setSelected(true);round[currentIndex].setSelected(false);currentIndex = position;}

　　這段代碼的作用：實(shí)現(xiàn)圖片的自動(dòng)切換，有別于平常的切換，大家運(yùn)行自行查看：

class MyRunnable implements Runnable{@Overridepublic void run() {int n = currentIndex;if(n == imagerResource.length-1){flag = false;}else{if(n == 0){flag = true;}}if(flag){n = (n + 1)%listView.size();}else{n = (n - 1)%listView.size();}setCurView(n);setRoundView(n);handler.postDelayed(myRunnable, 3000);}}

　　最后附一張效果圖，供大家參考：

　　

　　今天的介紹就到這里，大家有什么疑問，請留言。

　　

　　

轉(zhuǎn)載于:https://www.cnblogs.com/AndroidJotting/p/4540637.html

總結(jié)

以上是生活随笔為你收集整理的Androd开发之广告栏设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。