利用MVC思想来写一个广告条的轮播

原创 2017年01月03日 13:41:33

我理解的安卓中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图片加载框架即可


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




版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jetty+bootstrap Carousel+springMVC+mybatis实现表格数据的轮播

index.jsp 首页 ...

垂直广告条,垂直轮播效果,仿照淘宝的纵向滚动实现

开发中,产品让仿照淘宝的做纵向滚动的效果,刚开始想到的是自定义一个垂直的Viewpager来实现,看了一些相关的资料,果不其然可以实现,但是很麻烦。我就在想,肯定有简单的办法,终于让我找到了,简直是完...

ViewPaper实现轮播广告条

使用V4包中的viewPaper组件自定义轮播广告条效果。 实现viewpaper的滑动切换和定时自动切换效果。 上效果图 布局文件 ...

使用ViewPager实现广告条自动无限轮播效果

一、效果如图所示: 二、实现步骤: 1、布局和准备工作; 2、改变页面描述文字; 3、动态添加指示点; 4、实现左右无限循环; 5、实现页面自动切换; 三、具体实...

viewpager图片广告条点击转跳fragment-----【轮播图点击转跳详情界面】

先上效果图 例子就是最简单,就是入门的viewpager的轮播,想学习的同学也可以下载我的项目,下载地址在这 github.,里面有很详细的讲解,在自动轮播的时候加入和handler使其能够...

Android 轮播广告条的实现

  • 2017-06-29 16:46
  • 30.48MB
  • 下载

轮播广告条

  • 2016-01-12 11:33
  • 2.03MB
  • 下载

Android从零开搞系列:自定义View(11)使用ViewPager打造轮播广告条

基于ViewPager非常好理解的自动无限轮播的广告栏

仿优酷的广告条图片轮播

  • 2016-04-06 16:43
  • 12.83MB
  • 下载

安卓自定义容器控件,装载TextView,实现文字竖直轮播小喇叭广告条

小喇叭广告条轮播,此功能商城类应用使用的比较多
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)