Advertisement bar Design for Androd development and advertisement bar development for androd

Advertisement bar Design for Androd development and advertisement bar development for androd

There is no stranger to the engineers who are doing Android Development for the implementation of this effect. In this article, I will lead you to simply implement this effect and introduce the principles of this effect for beginners to learn more, the veteran reviews the content, which is easy to understand and can be learned without any foundation. Let's start with the following content.

The implementation of this effect is very difficult during the first contact. In my previous blog, I introduced how to implement the boot page effect. Although I have led you to implement the above functions, for specific implementation, in fact, I had some doubts. I didn't know the principle at the beginning. After unremitting efforts over the past few days, I finally broke it and began to introduce the principle of implementation: 1. Image switching is required because of the advertising effect. 2. images must be marked for easy display. 3. Automatic Content Switching is required for image switching. The last two are the most difficult of these three points. In my previous articles, I have already led you to achieve the first effect. If you are interested, you can learn for yourself.

To start today's work, we need to prepare 6 images (two bullets and four arbitrary images) for our implementation. It is difficult for you to find dot images. I will provide you with two references:

White:

Blue:

It is for reference only. If you have any better information, Please bypass.

After the materials are ready, let's start designing our code:
1. Create a drawable folder under res, and create a round. xml folder to switch the display control of the two images above. The Code is as follows:

<?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>

Ii. Let's start writing our layout file:

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

Note: The Blue annotation area indicates that LinearLayout is at the bottom of the interface. The red annotation area indicates that the image information we configured is applied. The interface effect cannot be seen now, because ImagerView I set the destroy attribute (android: visibility = "gone"), this does not affect. In the following code, we will control the display.

3. PagerAdapter is used for image switching. To facilitate code design, I designed a custom PagerAdapter object: 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 // destroy the position of the public void destroyItem (View container, int position, Object object) {(ViewPager) container ). removeView (view. get (position) ;}@ Override // interface for initializing 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 ;}}

The following is the main story of today: MainActivity. java. First read the code and explain it below.

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); // initialize the initRound (); handler. post delayed (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 // call public void onPageScrollStateChanged (int arg0) when the sliding status changes) {// TODO Auto-generated method stub} @ Override // call public void onPageScrolled when the current page is sliding (int arg0, float arg1, int arg2) {// TODO Auto-generated method stub} @ Override // call public void onPageSelected (int arg0) when a new page is selected) {// 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 );}}}

The role of these two codes: Paving the way for adding click events of 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;    }

The role of this Code: achieve automatic switching of images, different from normal switching, you can view it yourself:

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

The last one is provided for your reference:

　　

Today's introduction is here. If you have any questions, please leave a message.