Androd開發之廣告欄設計，androd開發廣告欄

Androd開發之廣告欄設計，androd開發廣告欄

　　對於做Android開發的工程師對於這個效果的實現一定不陌生，本篇我將帶領大家先簡單實現這個效果，再為大家介紹一下其中的原理，方便新手學習，老手複習，內容簡單易懂，沒有基礎一樣學習，不扯沒用的了，下面開始我們本篇內容的乾貨。

　　對於這個效果的實現，第一次接觸時倍感困難，在之前的部落格中為大家介紹了如何?引導頁效果，雖然帶領大家實現了上述功能，但是對於具體的實現，其實內心有疑惑的，當初不是什麼的清楚其中的原理，經過這些天的不懈努力，終於被我攻破了，開始介紹一下實現的原理：1、既然是廣告效果，一定需要圖片切換；2、圖片切換要有標識，方便使用者查看；3、圖片切換要實現自動內容切換。這三點中最難的當屬後兩個了，在之前的文章中我已經帶領大家實現過第一個效果了，有興趣的小童鞋可以自行學習。

　　我們開始今天的工作，首先我們需要準備6張圖片（兩張圓點圖片+四張任意圖片），用於我們實現的需要。對於圓點圖片大家有時間不容易找，我為大家提供兩種參考：

　　白色：

　　藍色：

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

　　準備好素材後，下面我們開始設計我們的代碼：
　　一、在res下建立一個drawable檔案夾，在其中建立一個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.ViewPager        android: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>

 　　注釋：藍色標註處表示LinearLayout至於介面底部；紅色標註處表示應用我們配置好的圖片資訊，現在我們的介面效果是看不出來的，因為ImagerView我設定了銷毀屬性（android:visibility="gone"），這個不影響，在下面的代碼中我們來控制顯示。

　　三、我們實現圖片切換時，用到了PagerAdapter，這裡為了方便我們設計代碼，我設計了一個自訂的PagerAdapter對象：MyselfPagerAdapter.java:

public class MyselfPagerAdapter extends PagerAdapter {        private List<View> view;        public MyselfPagerAdapter(List<View> view){        this.view = view;    }    @Override    public 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);    }    @Override    public 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;    @Override    protected 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);                //初始化底部小點          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    //當滑動狀態改變時調用      public void onPageScrollStateChanged(int arg0) {        // TODO Auto-generated method stub            }    @Override    //當前頁面被滑動時調用     public void onPageScrolled(int arg0, float arg1, int arg2) {        // TODO Auto-generated method stub            }    @Override    //當新的頁面被選中時調用      public void onPageSelected(int arg0) {        // TODO Auto-generated method stub        setRoundView(arg0);    }    @Override    public void onClick(View v) {        int position = (Integer)v.getTag();        setCurView(position);        setRoundView(position);    }        class MyRunnable implements Runnable{        @Override        public 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的點擊事件做鋪墊

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;    }

　　這段代碼的作用：實現圖片的自動切換，有別於平常的切換，大家運行自行查看：

class MyRunnable implements Runnable{        @Override        public 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);        }            }

　　最後附一張，供大家參考：

　　

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