前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >利用MVC编写广告条轮播效果

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

作者头像
砸漏
发布2020-10-29 19:40:08
1K0
发布2020-10-29 19:40:08
举报
文章被收录于专栏:恩蓝脚本恩蓝脚本

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

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

代码语言:javascript
复制
<!--轮播图--  
  <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  

逻辑:

代码语言:javascript
复制
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的写法

代码语言:javascript
复制
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图片加载框架即可

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档