利用MVC编写广告条轮播效果

我理解的安卓中MVC思想是利用Holder进行编程,展示布局,提供视图,将视图和数据进行绑定起来,在很多App中我们能见到广告条,广告条这里我们可以使用FramLayout进行填充,然后利用MVC的思想将提供的布局添加到FrameLayout中即可; 广告条的实现也可以利用Banner等开源框架等,这里就不列举了,感兴趣的朋友可以去搜下

当然由于我这里的项目的图片是设计师那边提供好的,并不是从网上获取的,所以我这里就直接写了ViewPager来进行填充了

<!--轮播图-->
  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="328px"> 

    <android.support.v4.view.ViewPager
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:id="@+id/fragment_work_pic_viewpager"/> 

    <!-- 指针容器 --> 

    <RelativeLayout
      android:background="@android:color/transparent"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:padding="5dp"
      android:layout_alignBottom="@id/fragment_work_pic_viewpager"> 

    <!--<TextView
      android:textSize="12sp"
      android:layout_gravity="left"
      android:layout_marginLeft="5dp"
      android:id="@+id/tv_desc"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textColor="@android:color/white"
      android:text="图片的描述"/>--> 

    <LinearLayout
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      android:id="@+id/ll_dots"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="horizontal"> 

      </LinearLayout>
    </RelativeLayout>

逻辑:

package com.hanzheng.znxl.fragment; 

import android.support.v4.view.ViewPager;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout; 

import com.hanzheng.znxl.R;
import com.hanzheng.znxl.adapter.OnPagerChangeListenerImp;
import com.hanzheng.znxl.adapter.WorkFragmentBannerAdapter;
import com.hanzheng.znxl.base.BaseFragment;
import com.hanzheng.znxl.base.MyApplication;
import com.hanzheng.znxl.utils.ToastUtil; 

import butterknife.Bind;
import butterknife.ButterKnife;
import butterknife.OnClick; 

/**
 * Created by zmybi on 29/12/2016.
 */
public class WorkFragment extends BaseFragment { 

  @Bind(R.id.fragment_work_pic_viewpager)
  ViewPager mFragmentWorkPicViewpager;
  @Bind(R.id.ll_dots)
  LinearLayout mLLDots;
//  @Bind(R.id.tv_desc)
//  TextView mTvDesc;
  @Bind(R.id.ll_kaoqing)
  LinearLayout mLlKaoqing;
  @Bind(R.id.ll_execute)
  LinearLayout mLlExecute;
  @Bind(R.id.ll_daohang)
  LinearLayout mLlDaohang;
  @Bind(R.id.ll_sudden)
  LinearLayout mLlSudden;
  @Bind(R.id.ll_policething)
  LinearLayout mLlPolicething;
  @Bind(R.id.ll_collect)
  LinearLayout mLlCollect;
  @Bind(R.id.ll_search)
  LinearLayout mLlSearch;
  @Bind(R.id.ll_noticevoice)
  LinearLayout mLlNoticevoice;
  @Bind(R.id.iv_book)
  ImageView mIvBook;
  @Bind(R.id.rl_shouce)
  RelativeLayout mRlShouce;
  @Bind(R.id.ibtn_yuan)
  ImageView mIbtnYuan;
  @Bind(R.id.ibtn_helpbook)
  ImageView mIbtnHelpbook; 

  private int[] imageResIds = {R.drawable.banner1,R.drawable.banner2};
  private String[] descs = {"武汉保安集团","智能巡逻系统"};
  private AutoScrollTask mAutoScrollTask; 

  @Override
  public void initData() {
    mFragmentWorkPicViewpager.addOnPageChangeListener(new OnPagerChangeListenerImp() {
      @Override
      public void onPageSelected(int position) {
        changeDotAndDesc(position);
      }
    });
    mFragmentWorkPicViewpager.setAdapter(new WorkFragmentBannerAdapter(imageResIds));
    initDot();
    changeDotAndDesc(0);  //默认选择第一页
    mFragmentWorkPicViewpager.setCurrentItem(mFragmentWorkPicViewpager.getAdapter().getCount() / 2); 

    if(mAutoScrollTask == null) {
      mAutoScrollTask = new AutoScrollTask();
      mAutoScrollTask.start();
    }
    //按下去停止轮播
    mFragmentWorkPicViewpager.setOnTouchListener(new View.OnTouchListener() {
      @Override
      public boolean onTouch(View view, MotionEvent motionEvent) {
        switch (motionEvent.getAction()) {
          case MotionEvent.ACTION_DOWN:
          case MotionEvent.ACTION_MOVE:
            mAutoScrollTask.stop();
            break;
          case MotionEvent.ACTION_UP:
            mAutoScrollTask.start();
            break;
        }
        return false;
      }
    });
  } 

  private void changeDotAndDesc(int position) {
    position = position % imageResIds.length;
//    mTvDesc.setText(descs[position]);
    for(int i = 0; i < mLLDots.getChildCount();i++) {
      ImageView iv_dot = (ImageView) mLLDots.getChildAt(i);
      iv_dot.setSelected(false);
      if(position == i) {
        iv_dot.setSelected(true);
      }
    }
  } 

  private void initDot() {
    for(int i = 0; i < imageResIds.length;i++) {
      int _5dp = dp2px(5);
      LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(_5dp,_5dp);
      params.leftMargin = _5dp;
      ImageView dot = new ImageView(mActivity);
      dot.setLayoutParams(params);
      dot.setBackgroundResource(R.drawable.selector_dot);
      mLLDots.addView(dot); 

    }
  } 

  public int dp2px(int dp) {
    float density = getResources().getDisplayMetrics().density;
    return (int) (dp * density + .5f);
  } 

  @Override
  public View initView() {
    // TODO: inflate a fragment view
    View rootView = View.inflate(mActivity,R.layout.fragment_work,null);
    ButterKnife.bind(this, rootView);
    return rootView;
  } 

  @Override
  public void onDestroyView() {
    super.onDestroyView();
    ButterKnife.unbind(this);
  } 

  @OnClick({R.id.rl_shouce,R.id.ibtn_yuan, R.id.ibtn_helpbook,R.id.ll_kaoqing, R.id.ll_execute, R.id.ll_daohang, R.id.ll_sudden, R.id.ll_policething, R.id.ll_collect, R.id.ll_search, R.id.ll_noticevoice})
  public void onClick(View view) {
    switch (view.getId()) {
      case R.id.ll_kaoqing:
        ToastUtil.showToast(mActivity,"考勤");
        break;
      case R.id.ll_execute:
        ToastUtil.showToast(mActivity,"勤务");
        break;
      case R.id.ll_daohang:
        ToastUtil.showToast(mActivity,"网店");
        break;
      case R.id.ll_sudden:
        ToastUtil.showToast(mActivity,"突发");
        break;
      case R.id.ll_policething:
        ToastUtil.showToast(mActivity,"警情");
        break;
      case R.id.ll_collect:
        ToastUtil.showToast(mActivity,"认证");
        break;
      case R.id.ll_search:
        ToastUtil.showToast(mActivity,"信息查询");
        break;
      case R.id.ll_noticevoice:
        ToastUtil.showToast(mActivity,"发布公告");
        break;
      case R.id.rl_shouce:
        ToastUtil.showToast(mActivity,"手册");
        break;
      case R.id.ibtn_yuan:
        ToastUtil.showToast(mActivity,"预案流程");
        break;
      case R.id.ibtn_helpbook:
        ToastUtil.showToast(mActivity,"帮助手册");
        break; 

    }
  } 

  private class AutoScrollTask implements Runnable{
    public void start() {
      stop();
      MyApplication.getMainThreadHandler().postDelayed(this,2000);
    } 

    public void stop() {
      MyApplication.getMainThreadHandler().removeCallbacks(this);
    } 

    @Override
    public void run() {
      int currentItem = mFragmentWorkPicViewpager.getCurrentItem();
      currentItem++;
      mFragmentWorkPicViewpager.setCurrentItem(currentItem);
      start();
    }
  }
}

这里轮播图下方的指示器(小点)或者图片描述都是可以加上的, 具体依据公司美工的要求即可
做了个按下去停止轮播的优化;  给viewpager设计点击监听,重写三个方法, 抬起则start(), 走run方法viewpager跳到下一页,并走AutoScrollTask中的start(),方法,主线程的Handler发送延时消息,则继续循环run方法,  实现轮播图的无线循环
对了,说下轮播图的PagerAdapter的写法

package com.hanzheng.znxl.adapter; 

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView; 

/**
 * Created by zmybi on 31/12/2016.
 */ 

public class WorkFragmentBannerAdapter extends PagerAdapter { 

 private int[] imageResIds; 

 public WorkFragmentBannerAdapter(int[] imageResIds) {
  this.imageResIds = imageResIds;
 } 

 @Override
 public int getCount() {
  return imageResIds.length * 1000000;
 } 

 @Override
 public boolean isViewFromObject(View view, Object object) {
  return view == object;
 } 

 @Override
 public Object instantiateItem(ViewGroup container, int position) {
  ImageView iv = new ImageView(container.getContext());
  position = position % imageResIds.length;
  iv.setBackgroundResource(imageResIds[position]);
  iv.setScaleType(ImageView.ScaleType.FIT_XY);
  container.addView(iv);
  return iv;
 } 

 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
  container.removeView((ImageView)object);
 }
}

这里返回一个很大的数,其实也没必要返回Integer.MAX_VALUE;  因为这样写的话还要对余数进行判断,让下方的Indicator和上方的图片切换保持一致,  当然,这里由于美工直接给的图,所以我直接放在工程下了,实际如果是从网上获取的,则使用Picasso或者Glide图片加载框架即可

至此,一个简单的图片轮播功能就已经实现了。

(0)

相关推荐

  • Android仿淘宝头条向上滚动广告条ViewFlipper

    所谓前人栽树,后人乘凉,在此感谢博主的贡献. 参考博文: 仿淘宝首页的淘宝头条View垂直滚动 欢迎关注我的微信公众号 不只是原创技术文章,更多的是对生活的思考总结 我在博主的基础上做了如下工作: 修复了滚动条第二条点击事件无法触发这个bug: 充分简化了自定义ViewFlipper类的代码: 添加了直接使用ViewFlipper控件实现同样效果: 先上效果图: 这里使用了一个比较少用的控件:ViewFlipper 学习一个未知的东西,第一步就是要搞懂what:学的这个东西是什么以及能够实现什么

  • Android_RecyclerView实现上下滚动广告条实例(带图片)

    前言 公司新项目首页有个类似京东/淘宝滚动广告条,查了一下大概都是两种实现方式,一是textview,如果只有文字的话是可行的,但我们这个上面还有个小图片,所以pass:二是两个viewGroup,使用动画交替滚动,可以实现,就是显得很麻烦,于是偷懒的我就想着用recyclerView来解决这个小问题! 思路 这个滚动广告条高度通常是固定的,用一个固定高度的viewGroup来包裹一个recyclerView,recylerView的item布局设置一个minHeight为viewGroup的高

  • Android完美实现平滑过渡的ViewPager广告条

    我们经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环的效果.看到那样的效果,相信大家都会想到ViewPager,但是ViewPager并不支持循环翻页,所以要实现循环还得需要自己去动手.最后还有一个问题就是翻页到最后一页如何平滑过渡到首页的问题.这些都源于有人私信问我ViewPager广告条如何平滑过渡的问题,出于这个问题,我想着亲自实现并分享下吧,本篇就是为了解决这些问题而写的. 1.初始化布局 我们先来写一个ViewPager广告条的布局: <Relativ

  • Android控件ViewFlipper仿淘宝头条垂直滚动广告条

    ViewFlipper的使用,仿淘宝头条垂直滚动广告条,供大家参考,具体内容如下 学习,学习,学以致用 ViewFlipper是安卓自带的控件,很多人可能很少知道这个控件,这个控件很简单,也很好理解,能不能用上实战就看你们的本事了.下面是淘宝头条广告的原效果 下面是我们今天要实现的效果,图片是Gif,运行效果是很流畅的,由于这个图片反应有点慢,会浪费大家点时间,所以我把它调快了,大家可以掏出手机打开淘宝看,一模一样的 从源码可以看出,其实ViewFlipper间接的继承了FrameLayout,

  • Android自定义View实现仿1号店垂直滚动广告条代码

    效果图展示,图片有点卡,耐心看会,原程序是很流畅的 实现步骤: 声明变量 初始化画笔.文本大小和坐标 onMeasure()适配wrap_content的宽高 onDraw()画出根据坐标画出两段Text 监听点击事件 在Activity中实现点击事件 实现原理(坐标变换原理):整个过程都是基于坐标Y的增加和交换进行处理的,Y值都会一直增加到endY,然后进行交换逻辑 步骤一:声明变量 由于1号店是两句话的滚动,所以我们也是使用两句话来实现的 private Paint mPaint; priv

  • Android新闻广告条滚动效果

    项目中需要用到类似公告栏的控件,能用的基本不支持多行显示,于是只好自己动手,苦于没有自定义过一个像样的控件,借鉴Android公告条demo,实现了多行向上滚动的控件.在原控件基础之上添加如下功能:  •传入数据分页显示  •添加Left Drawable  •手指触摸事件处理  •添加3D动画翻滚效果 效果图 源码 package com.android.view; import android.content.Context; import android.content.res.Typed

  • Android自定义控件之广告条滚动效果

    在一些电子商务网站上经常能够看到一些滚动的广告条,许多软件在首次使用时也有类似的广告条,如图: 其实在github上有实现这种效果的控件,不过这东西做起来也是很简单,我们今天就来看看该怎么做. 先来看看布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" and

  • 利用MVC编写广告条轮播效果

    我理解的安卓中MVC思想是利用Holder进行编程,展示布局,提供视图,将视图和数据进行绑定起来,在很多App中我们能见到广告条,广告条这里我们可以使用FramLayout进行填充,然后利用MVC的思想将提供的布局添加到FrameLayout中即可; 广告条的实现也可以利用Banner等开源框架等,这里就不列举了,感兴趣的朋友可以去搜下 当然由于我这里的项目的图片是设计师那边提供好的,并不是从网上获取的,所以我这里就直接写了ViewPager来进行填充了 <!--轮播图--> <Rela

  • Android UI实现广告Banner轮播效果

    本篇博客要分享的一个效果是实现广告Banner轮播效果,这个效果也比较常见,一些视频类应用就经常有,就拿360影视大全来举例吧: 用红框框住的那个效果就是小巫今天要分享的,先来思考一下会用到什么控件?有什么用户体验? 控件我们可能一下子就可以想到的自然是ViewPager,没错!用到的就是ViewPager,那么它会有什么用户体验呢,它可能有以下几个体验: 1. 间隔不停的切换图片,指示器也跟着变 2. 点击图片可以跳转到指定的页面 如何实现? 布局开始着手 /BannerAutoScrollD

  • Android实现广告图片轮播效果

    本文实例介绍了Android广告轮播图效果实现方法,分享给大家供大家参考,具体内容如下 首先看下一下布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:

  • jQuery实现仿路边灯箱广告图片轮播效果

    特效介绍 本图片幻灯就像路边灯箱广告,路边大广告牌效果,LED切换效果,并且会一直保持在页面最低端. 演示图 使用方法 1.在head区域引入style.css. 复制代码 代码如下: <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/> 2.html代码放在</body>上面: <div cla

  • jquery广告无缝轮播实例

    本文实例为大家演示了jquery广告无缝轮播效果,供大家参考,具体内容如下 需要自行添加五张图片和引用jquery库 纵向轮播实例: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery广告无缝轮播代码演示</title> <style type="t

  • Android自定义Banner轮播效果

    本文实例为大家分享了Android自定义Banner轮播效果展示的具体代码,供大家参考,具体内容如下 自定义View布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <andro

  • Android实现图片轮播效果

    本文实例讲述了JaAndroid实现图片轮播效果代码,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 首先看下一下布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_par

  • Android实现图片轮播效果的两种方法

    大家在使用APP的过程中,经常会看到上部banner图片轮播的效果,那么今天我们就一起来学习一下,android中图片轮询的几种实现方法: 第一种:使用动画的方法实现:(代码繁琐) 这种发放需要:两个动画效果,一个布局,一个主类来实现,不多说了,来看代码吧: public class IamgeTrActivity extends Activity { /** Called when the activity is first created. */ public ImageView image

  • Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果

    之前关于如何实现屏幕页面切换,写过一篇博文<Android中使用ViewFlipper实现屏幕切换>,相比ViewFlipper,ViewPager更适用复杂的视图切换,而且Viewpager有自己的adapter,这也让其适应复杂对象,实现数据的动态加载. ViewPager是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api.而viewpager就是其中之一,利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等. 下面我们就展示下Vie

  • 详解js图片轮播效果实现原理

    本文实例讲述了js图片轮播效果实现原理,分享给大家供大家参考,具体内容如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="tex

随机推荐