Android(安卓)使用ViewPager实现广告条滚动

本文为android学习笔记，由博主总结整理

1.首先是效果图

2. 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="finch.scu.cn.rollingad.MainActivity">    <android.support.v4.view.ViewPager  android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="200dp"/>    <LinearLayout  android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#33000000" android:orientation="vertical" android:layout_alignBottom="@id/viewpager" >        <TextView  android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:textColor="@android:color/white" android:textSize="16sp" android:text="我是广告上的文字内容" android:id="@+id/tv_ad" />        <LinearLayout  android:layout_marginTop="5dp" android:layout_marginBottom="5dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/point_group" android:layout_gravity="center_horizontal" android:orientation="horizontal" >        </LinearLayout>    </LinearLayout></RelativeLayout>

3.在res/drawable下新建一个selector用于实现切换点的背景改变效果。

point_bg.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:drawable="@drawable/point_nomal" android:state_enabled="true"></item>    <item android:drawable="@drawable/point_focured" android:state_enabled="false"></item></selector>

point_focured.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >    <size android:width="5dp" android:height="5dp"></size>    <solid android:color="#aaFFFFFF"></solid></shape>

point_nomal.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >    <size android:width="5dp" android:height="5dp"></size>    <solid android:color="#55000000"></solid></shape>

4.ViewPager图片切换+handler实现自动循环效果+切换的同时改变文字和点的状态，下面上代码。

package finch.scu.cn.rollingad;import android.app.Activity;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;import java.util.ArrayList;public class MainActivity extends Activity {    private ViewPager viewPager;    private TextView adText;    private LinearLayout pointGroup;    //图片资源id    private final int[] imageIds = {R.drawable.a,R.drawable.b,R.drawable.c,            R.drawable.d,R.drawable.e};    private ArrayList<ImageView> imageList;    //上一个页面的位置    protected int lastPosition;    //图片标题集合    private final String[] imageDescriptions = {            "巩俐不低俗，我就不能低俗",            "扑树又回来啦！",            "揭秘北京电影如何升级",            "乐视网TV版大派送",            "热血屌丝的反杀"    };    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        viewPager = (ViewPager)findViewById(R.id.viewpager);        adText = (TextView)findViewById(R.id.tv_ad);        //初始显示第一条        adText.setText(imageDescriptions[0]);        pointGroup = (LinearLayout)findViewById(R.id.point_group);        //初始化图片资源        imageList = new ArrayList<ImageView>();        for(int i =0;i<imageIds.length;i++){            ImageView iv = new ImageView(this);            iv.setBackgroundResource(imageIds[i]);            imageList.add(iv);            //添加指示点            ImageView point = new ImageView(this);            //设置布局参数            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);            params.leftMargin = 20;            point.setLayoutParams(params);            point.setBackgroundResource(R.drawable.point_bg);                if(i==0){                    point.setEnabled(true);                }else{                    point.setEnabled(false);                }            pointGroup.addView(point);        }        viewPager.setAdapter(new MyPagerAdapter());        viewPager.setCurrentItem(Integer.MAX_VALUE/2-3);//设置当前为第一项，且可无限前后循环        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            /** * 页面切换后调用 * @param position 新的页面的位置 */            @Override            public void onPageSelected(int position) {                position = position%imageList.size();                adText.setText(imageDescriptions[position]);                //改变指示点的enbale状态，把当前点设为true ，上一个点设为false                pointGroup.getChildAt(position).setEnabled(true);                pointGroup.getChildAt(lastPosition).setEnabled(false);                lastPosition = position;            }            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageScrollStateChanged(int state) {            }        });        isRunning = true;        handler.sendEmptyMessageDelayed(0,2000);    }    private  Boolean isRunning = false; //是否自动滚动    private Handler handler = new Handler(){        @Override        public void handleMessage(Message msg) {            viewPager.setCurrentItem(viewPager.getCurrentItem()+1);            if(isRunning){                handler.sendEmptyMessageDelayed(0,2000);            }        }    };    @Override    protected void onDestroy() {            isRunning= false;            super.onDestroy();    }    private class MyPagerAdapter extends PagerAdapter{        /** * @param container view的容器 * @param position 相应的位置 * @return 相应位置上的view */        @Override        public Object instantiateItem(ViewGroup container, int position) {            container.addView(imageList.get(position%imageList.size()));            return imageList.get(position%imageList.size());        }        /** * 销毁对应位置上的object */        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView((View)object);            object = null;        }        //获取页面的总数        public int getCount() {            return Integer.MAX_VALUE;        }        // 判断两者的对应关系,将两个参数相比较返回即可        @Override        public boolean isViewFromObject(View view, Object object) {            return view==object;        }    }}

更多相关文章

随机推荐