美文网首页
广告条效果(ViewPager)

广告条效果(ViewPager)

作者: GeekGray | 来源:发表于2018-10-02 22:34 被阅读1次

阅读原文

广告条效果(ViewPager)

1. ViewPager的使用(参考ViewPager使用笔记)

1_创建工程名:

02.广告条效果
首页影片推广效果,并且拷贝图片到drawable-hdpi目录

2_写布局文件

<?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.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="180dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/viewpager"
        android:background="#44000000"
        android:orientation="vertical"
        android:padding="5dp">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:padding="3dp"
            android:text="美国队长3"
            android:textColor="#ffffff" />

        <LinearLayout
            android:id="@+id/ll_point_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:orientation="horizontal" />

    </LinearLayout>

</RelativeLayout>

3_实例化ViewPager(单独)

private ViewPager viewpager;
viewpager = (ViewPager) findViewById(R.id.viewpager);

4_设置图片资源ID和图片标题集合和准备ImageView列表数据

private TextView tv_title;
private LinearLayout ll_point_group;
private ArrayList<ImageView> imageViews;
// 图片资源ID
private final int[] imageIds = { R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e };
// 上一次高亮显示的位置
private int prePosition = 0;
// 是否已经滚动
private boolean isDragging = false;
// 图片标题集合
private final String[] imageDescriptions = { "尚硅谷波河争霸赛!", "凝聚你我,放飞梦想!", "抱歉没座位了!", "7月就业名单全部曝光!", "平均起薪11345元" };

设置数据

        imageViews=new ArrayList<ImageView>();
        for(int i=0;i<imageIds.length;i++)
        {
            ImageView imageView=new ImageView(this);
            imageView.setBackgroundResource(imageIds[i]);
            
            //添加到集合中
            imageViews.add(imageView);
            .......
        }

5_为ViewPager设置适配器(单独)

    //4.设置适配器(PagerAdapter)-item布局-绑定数据
    viewpager.setAdapter(new MyPagerAdapter());

MyPagerAdapter

class MyPagerAdapter extends PagerAdapter
    {

        /**
         * 得到图片的总数
         * @return
         */
        @Override
        public int getCount()
        {
            return Integer.MAX_VALUE;
        }
        
        @Override
        public Object instantiateItem(ViewGroup container, int position)
        {
            int realPosition=position%imageViews.size();
            
            final ImageView imageView=imageViews.get(realPosition);
            container.addView(imageView);
            //添加到ViewPager中
//          Log.e(TAG, "instantiateItem==" + position + ",---imageView==" + imageView);
            imageView.setOnTouchListener(new View.OnTouchListener()
            {
                
                @Override
                public boolean onTouch(View v, MotionEvent event)
                {
                    switch (event.getAction())
                    {
                    case MotionEvent.ACTION_DOWN://手指按下
                        Log.e(TAG,"onTouch==手指按下");
                        handler.removeCallbacksAndMessages(null);
                        break;

                     case MotionEvent.ACTION_MOVE://手指在这个控件上移动
                         Log.e(TAG,"onTouch==事件取消");
                         break;
                         
                     case MotionEvent.ACTION_UP://手指离开
                         Log.e(TAG,"onTouch==手指离开");
                         handler.removeCallbacksAndMessages(null);
                         handler.sendEmptyMessageDelayed(0, 4000);
                         break;
                         
                    default:
                        break;
                    }
                    return false;
                }
            });
            
            imageView.setTag(position);
            imageView.setOnClickListener(new View.OnClickListener()
            {
                
                @Override
                public void onClick(View v)
                {
                     Log.e(TAG,"点击事件");
                     int position = (int) v.getTag()%imageViews.size();
                     String text = imageDescriptions[position];
                        Toast.makeText(MainActivity.this, "text=="+text, Toast.LENGTH_SHORT).show();
                }
            });
            
            return imageView;
        }

        @Override
        public boolean isViewFromObject(View view, Object object)
        {
            return view == object;
        }
        
        /**
         * 释放资源
         * viewpager 默认创建2个页面,先销毁再创建
         * @param container viewpager
         * @param position 要释放的位置
         * @param object 要释放的页面
         */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object)
        {
            container.removeView((View) object);
        }
    }

2. 广告条的基本功能

1.根据页面改变设置文本

        int realPosition=position%imageViews.size();
        //设置对应页面的文本信息
        tv_title.setText(imageDescriptions[realPosition]);
        
        //把上一个高亮的设置默认-灰色
        ll_point_group.getChildAt(prePosition).setEnabled(false);
        
        //当前的设置为高亮-红色
        ll_point_group.getChildAt(realPosition).setEnabled(true);
        
        prePosition=realPosition;

2.添加指示点(在准备数据的循环体中循环添加)

        //添加点
        ImageView point=new ImageView(this);
        point.setBackgroundResource(R.drawable.point_selector);
        LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(8,8);
        
        if(i==0)
        {
            //显示红色
            point.setEnabled(true);
            
        }
        else
        {
            //显示灰色
            point.setEnabled(false);
            params.leftMargin=0;
        }
        
        point.setLayoutParams(params);
        ll_point_group.addView(point);

3. 支持左右无限滑动

在MyPagerAdapter适配器中,在getCount()方法体中把图片总数变得很大

        /**
         * 得到图片的总数
         * @return
         */
        @Override
        public int getCount()
        {
            return Integer.MAX_VALUE;
        }

//设置中间位置,//要保证imageViews的整数倍

    int item=Integer.MAX_VALUE/2-Integer.MAX_VALUE/2%imageViews.size();
    
    
    viewpager.setCurrentItem(item);
    
    tv_title.setText(imageDescriptions[prePosition]);

4.自动滑动页面

实现的方式有很多,这里使用handler,先发消息,然后

//在onCreate()中发消息

    handler.sendEmptyMessageDelayed(0, 3000);

然后在handler中处理消息

int item=viewpager.getCurrentItem()+1//滑到最后一个不会蹦,viewpager会停止

viewpager.setCurrentItem(item)

//延迟发消息
handler.sendEmptyMessageDelayed(0, 4000);

5.当手滑动或者按下的时候停止滑动

在按下的时候移除消息,up的时候发消息,不过有个小bug,按下滑动就没有了up,从此以后不滚动!

imageView.setOnTouchListener(new View.OnTouchListener()
            {
                
                @Override
                public boolean onTouch(View v, MotionEvent event)
                {
                    switch (event.getAction())
                    {
                    case MotionEvent.ACTION_DOWN://手指按下
                        Log.e(TAG,"onTouch==手指按下");
                        handler.removeCallbacksAndMessages(null);
                        break;

                     case MotionEvent.ACTION_MOVE://手指在这个控件上移动
                         Log.e(TAG,"onTouch==事件取消");
                         break;
                         
                     case MotionEvent.ACTION_UP://手指离开
                         Log.e(TAG,"onTouch==手指离开");
                         handler.removeCallbacksAndMessages(null);
                         handler.sendEmptyMessageDelayed(0, 4000);
                         break;
                         
                    default:
                        break;
                    }
                    return false;
                }
            });

解决上述bug,当手滑动或者按下的时候停止滑动

其实,如果up事件丢失后,会触发一个取消,即MotionEvent.ACTION_CANCEL;打印log发现,如果按下,确实没滑动,放开滑动这没有问题,但是一滑动,就会触发取消,不会执行up。

在页面改变监听(MyOnPageChangeListener)中解决这个bug,

定义一个状态isDragging,是否已经滚动

        /**
        当页面滚动状态变化的时候回调这个方法
        静止->滑动
        滑动-->静止
        静止-->拖拽

        */
        @Override
        public void onPageScrollStateChanged(int state)
        {
            if(state==ViewPager.SCROLL_STATE_DRAGGING)
            {
                isDragging=true;
                handler.removeCallbacksAndMessages(null);//拖拽的时候移除
            }
            else if(state==ViewPager.SCROLL_STATE_SETTLING)
            {
                 Log.e(TAG,"SCROLL_STATE_SETTLING-----------------");
            }
            
            else if(state==ViewPager.SCROLL_STATE_IDLE&&isDragging)
            {
                isDragging=false;//不让它多次执行
                handler.removeCallbacksAndMessages(null);//发消息之前先移除,防止消息执行密集
                handler.sendEmptyMessageDelayed(0, 4000);
            }
        }

6.添加某一条的点击事件

目的是得到当前item的信息,先得到position才能得到信息,设置一个tag,即

imageView.setTag(position)

有了tag,就能设置点击事件,

在点击事件和触摸事件同时存在的情况下,触摸事件应该返回false,否则点击事件不会生效

如果触摸事件返回false即不消费,也就是点击事件消费这个事件

此时的position也要取模,否则会越界崩溃

imageView.setTag(position);
            imageView.setOnClickListener(new View.OnClickListener()
            {
                
                @Override
                public void onClick(View v)
                {
                     Log.e(TAG,"点击事件");
                     int position = (int) v.getTag()%imageViews.size();
                     String text = imageDescriptions[position];
                        Toast.makeText(MainActivity.this, "text=="+text, Toast.LENGTH_SHORT).show();
                }
            });

改进成全屏引导页面

ViewPager的android:layout_height属性设置为填充父窗体

android:layout_height="match_parent"

怎么定时刷新界面-知识扩展

方式一、使用Timer(定时器)和TimerTask实现

方式二、使用Runnable和Handler

方式三、Alarm(闹铃)

在做Android客户端软件的时候经常需要刷新某区块内容,比如微博客户端就需要定期检测是否有新发布的微博内容,如果有新微博客户端就显示出来。Android里可以选用两种方式来实现此功能。

方式一、使用Timer(定时器)和TimerTask实现

示例代码:

public class MainActivity extends Activity {
    private TextView msg;
    final Handler handler = new Handler() {
        public void handleMessage(Message msg) {
            switch (msg.what) {
            case 1:
                update();
                break;
            }
            super.handleMessage(msg);
        }
        void update() {
            //刷新msg的内容
        }
    };
    Timer timer = new Timer();
    TimerTask task = new TimerTask() {
        public void run() {
            Message message = new Message();
            message.what = 1;
            handler.sendMessage(message);
        }
    };
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        msg = (TextView) findViewById(R.id.txtMsg);
        msg.setText("你好啊!");
        timer.schedule(task, 1000 * 40, 1000 * 30); //启动timer
    }
    @Override
    protected void onDestroy() {
        if (timer != null) {// 停止timer
            timer.cancel();
            timer = null;
        }
        super.onDestroy();
    }
}

方式二、使用Runnable和Handler

示例代码

public class MainActivity extends Activity {
    private TextView msg;
    private Handler handler = new Handler();
    private Runnable runnable = new Runnable() {
        public void run() {
            this.update();
            handler.postDelayed(this, 1000 * 120);// 间隔120秒
        }
        void update() {
            //刷新msg的内容
        }
    }; 
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        msg = (TextView) findViewById(R.id.txtMsg);
        msg.setText("你好啊!");
        handler.postDelayed(runnable, 1000 * 60);
    }
    @Override
    protected void onDestroy() {
        handler.removeCallbacks(runnable); //停止刷新
        super.onDestroy();
    }
}

第三种:Alarm

示例代码:

开始计时

Intent intent = new Intent(widgetUpdate);
refreshIntent = PendingIntent.getBroadcast(pContext, 0, intent, 0);
alarm = (AlarmManager)pContext.getSystemService(Context.ALARM_SERVICE);
alarm.setRepeating(AlarmManager.RTC, 0, 1000, refreshIntent);//每秒刷新1次

停止计时

if (alarm!=null) {
     alarm.cancel(refreshIntent);
     refreshIntent.cancel();
     refreshIntent = null;
  alarm = null;
}

第一种方式还适用于消息通知的方式实现更新,第二种方式通常是主动去检查是否需要刷新。对于定时刷新这种使用第二种方式更好。

相关文章

网友评论

      本文标题:广告条效果(ViewPager)

      本文链接:https://www.haomeiwen.com/subject/gqnaoftx.html