android实现水平滚动九宫格图标样式广告位

需求点

九宫格视图且需要支持水平滚动功能

支持外部输入行数即九宫格的行数可改变

默认一屏最多显示个一屏超过个则开始滚动

如果数据少于5个则只显示一行

要实现滚动指示器

实现思路

横向滚动视图使用九宫格用自定义实现其次计算出一屏为的格子宽度作为九宫格的最小宽度。

代码如下

/***水平滚动的图标广告位*{//一屏最多显示图标的个数;//默认显示图标的行数;//图标显示的行数;;//每个图标显示的宽度;//图标之间的间距;//一行显示的个数privateintmScreenColsMAX_SCREEN_COLS;//网格视图privateFrameLayoutmContentLay;//图标数据列表AdItem是九宫格的数据结构privateListAdItemmIconList;//广告位点击事件privateOnAdClickListenermAdItemClickListener;//指示器宽度privateintmIndicatorWidth;//指示器的颜色privateintmIndicatorColor;privateintmIndicatorBackgroundColor;//指示器高度privateintmIndicatorHeight;//指示区域宽度privateintmIndicatorRangeWidth;//指示器画笔privatePaintmIndicatorPaint;//指示器距底部的距离privateintmIndicatorMargin;publicGridIconView(Contextcontext){super(context);init(context);}publicGridIconView(Contextcontext,NullableAttributeSetattrs){super(context,attrs);init(context);}publicGridIconView(Contextcontext,NullableAttributeSetattrs,intdefStyle){super(context,attrs,defStyle);init(context);}privatevoidinit(Contextcontext){setHorizontalScrollBarEnabled(false);setVerticalScrollBarEnabled(false);mItemSpaceResourceUtil.dip2px(context,6);mIndicatorWidthResourceUtil.dip2px(context,16);mIndicatorHeightResourceUtil.dip2px(context,3);mIndicatorRangeWidthResourceUtil.dip2px(context,36);mIndicatorColorContextCompat.getColor(context,R.color.colorRed);mIndicatorBackgroundColorContextCompat.getColor(context,R.color.listDividerColor);mIndicatorPaintnewPaint(Paint.ANTI_ALIAS_FLAG);mIndicatorPaint.setStyle(Paint.Style.FILL);mIndicatorPaint.setStrokeWidth(mIndicatorHeight);mIndicatorPaint.setStrokeCap(Paint.Cap.ROUND);mIndicatorMarginResourceUtil.dip2px(context,2);mContentLaynewFrameLayout(context);mContentLay.setPadding(mItemSpace,mItemSpace,mItemSpace,mItemSpacemIndicatorMarginResourceUtil.dip2px(context,2));this.addView(mContentLay,newLayoutParams(-1,-2));}OverridepublicvoidshowAds(Objectads){ListAdItemadItems(ListAdItem)ads;if(Opts.isEmpty(adItems)){setVisibility(GONE);return;}mContentLay.removeAllViews();mIconListadItems;if(adItems.size()MAX_SCREEN_COLS){mRows1;}if(mRows1){mColsadItems.size()/mRows(adItems.size()%mRows!0?1:0);}else{mColsadItems.size();}if(mColsMAX_SCREEN_COLS){mScreenColsmCols;}else{mScreenColsMAX_SCREEN_COLS;}finalContextcontextgetContext();LayoutInflaterinflater(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);inti0;for(AdItemitem:mIconList){ViewitemViewinflater.inflate(R.layout.ad_icon_layout,null);((TextView)itemView.findViewById(R.id.text)).setText(item.content);ImageViewitemImageitemView.findViewById(R.id.image);ImageUtils.display(context,item.imageUrl,itemImage);itemView.setTag(Integer.valueOf(i));itemView.setOnClickListener(newOnClickListener(){OverridepublicvoidonClick(Viewv){intposition(Integer)v.getTag();if(mAdItemClickListener!null){mAdItemClickListener.onItemClick(position,mIconList.get(position));}}});mContentLay.addView(itemView);i}}OverridepublicvoidsetItemSpace(intspace){}publicvoidsetRows(introws){if(rows0){this.mRowsrows;}}OverridepublicvoidsetOnAdClickListener(OnAdClickListenerlistener){this.mAdItemClickListenerlistener;}OverrideprotectedvoidonMeasure(intwidthSpec,intheightSpec){intwidthMeasureSpec.getSize(widthSpec)-mContentLay.getPaddingLeft()-mContentLay.getPaddingRight();intchildCountmContentLay.getChildCount();mItemWidth(width-(mScreenCols-1)*mItemSpace)/mScreenCols;intleftMargin0,topMargin0;for(inti0;ichildCount;i){ViewchildViewmContentLay.getChildAt(i);childView.measure(0,0);LayoutParamschildParams(LayoutParams)childView.getLayoutParams();childParams.widthMeasureSpec.makeMeasureSpec(mItemWidth,MeasureSpec.EXACTLY);childParams.heightchildView.getMeasuredHeight();if(i%mCols!0){leftMargin(mItemSpacemItemWidth);}elseif(i!0i%mCols0){leftMargin0;topMargin(mItemSpacechildParams.height);}childParams.leftMarginleftMargin;childParams.topMargintopMargin;childView.setLayoutParams(childParams);}super.onMeasure(widthSpec,heightSpec);}OverrideprotectedvoiddispatchDraw(Canvascanvas){super.dispatchDraw(canvas);intscrollRangecomputeHorizontalScrollRange()-getWidth();if(scrollRange0){intlineStartX(getWidth()-mIndicatorRangeWidth)/2;intlineStartYgetHeight()-mIndicatorHeight-mIndicatorMargin;intlineEndX(getWidth()mIndicatorRangeWidth)/2;mIndicatorPaint.setColor(mIndicatorBackgroundColor);canvas.drawLine(lineStartXgetScrollX(),lineStartY,lineEndXgetScrollX(),lineStartY,mIndicatorPaint);floatscrollDistancegetScrollX()*1.0f/scrollRange*(mIndicatorRangeWidth-mIndicatorWidth);mIndicatorPaint.setColor(mIndicatorColor);canvas.drawLine(lineStartXgetScrollX()scrollDistance,lineStartY,lineStartXmIndicatorWidthgetScrollX()scrollDistance,lineStartY,mIndicatorPaint);}}}

遗留问题

滚动指示器还不够完善可滚动距离变大时指示器的宽度是不变的视觉交互不好系需要在优化但是通常情况已经满足了。

标签：安卓手机壁纸广告斜