Android应用_UI布局_广告Banner设计思路

在很多应用，经常在顶部都有广告栏的展示，如下所示

控件：1* ViewPager + 1 * View + 2 * TextView

ViewPager：载入图片（ImageView）

View：绘制如下（除文字外）

具体步骤：

1. ViewPager 如何载入多张图片，略

2. 自定义View

2.1 绘制专题的背景色（黄色部分）

private void drawTopicPanel(Canvas canvas)；

2.2 绘制圆点

private void drawIndicator(Canvas canvas)；

2.3 圆点改变（备注IndicatorMode mode 无意义）

public void setIndicatorPosition(IndicatorMode mode, int position)；

附

package com.taptech.common.widget.ad;

import java.util.List;

import com.taptech.common.util.TTLog;
import com.taptech.wemedia.R;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Paint.Style;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ListAdapter;

public class TTAdIndicatorView extends View {

	private Paint mPaint;
	
	private int mIndicatorRadius;
	private int mIndicatorSelectedColor;
	private int mIndicatorWillUnselectedColor;
	private int mIndicatorUnselectedColor;
	
	private int mIndicatorSpacing;
	private int mIndicatorPaddingRight;
	private int mIndicatorPaddingBottom;
	
	//private PagerAdapter mAdapter;
	
	private int mIndicatorCount = -1;
	private int mIndicatorPosition;
	
	// topic panel parameter
	private boolean mIsNeedTopic;
	private int mTopicPanelWidth;
	private int mTopicArrowWidth;
	private int mTopicArrowHeight;
	private int mTopicArrowInnerDeep;
	private int mTopicPanelColor;
	
	
	public enum IndicatorMode {
		Moving, Stop, Unknown
	}
	
	private IndicatorMode mIndicatorMode = IndicatorMode.Unknown;
	
	public TTAdIndicatorView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		
	}
	
	public TTAdIndicatorView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		
	}
	
	public void init(int count) {
		
		
		mIndicatorRadius = getResources().getDimensionPixelSize(R.dimen.image_ad_indicator_radius);
		
		mIndicatorSelectedColor = getResources().getColor(R.color.image_ad_indicator_selected);
		mIndicatorWillUnselectedColor = getResources().getColor(R.color.image_ad_indicator_will_unselected);
		mIndicatorUnselectedColor = getResources().getColor(R.color.image_ad_indicator_unselected);
		
		mIndicatorSpacing = getResources().getDimensionPixelSize(R.dimen.image_ad_indicator_spacing);
		mIndicatorPaddingRight = getResources().getDimensionPixelSize(R.dimen.image_ad_indicator_padding_right);
		mIndicatorPaddingBottom = getResources().getDimensionPixelSize(R.dimen.image_ad_indicator_padding_bottom);
		
		// topic parameter
		mIsNeedTopic = true;
		
		mTopicPanelColor = getResources().getColor(R.color.image_ad_topic_panel);
		
		mTopicPanelWidth = getResources().getDimensionPixelSize(R.dimen.image_ad_topic_panel_width);
		mTopicArrowWidth = getResources().getDimensionPixelSize(R.dimen.image_ad_topic_arrow_width);
		mTopicArrowHeight = getResources().getDimensionPixelSize(R.dimen.image_ad_topic_arrow_height);
		mTopicArrowInnerDeep = getResources().getDimensionPixelSize(R.dimen.image_ad_topic_arrow_inner_deep);
		//
		
		mIndicatorPosition = 0;
		mIndicatorMode = IndicatorMode.Stop;
		
		mIndicatorCount = count;
		//
		mPaint = new Paint();
		mPaint.setAntiAlias(true);
		mPaint.setStyle(Style.FILL);
		
	}
	
	public void setIndicatorPosition(IndicatorMode mode, int position) {
		mIndicatorMode = mode;
		mIndicatorPosition = position;
		invalidate();
	}
	
	
	private void drawIndicator(Canvas canvas) {
		TTLog.e("drawIndicator", "start:" + mIndicatorPosition);
		//int count = 0;
		
		/*if (mAdapter != null) {
			count = mAdapter.getCount();
		}
		
		if (count < 2) {
			return;
		}*/
		
		
		
		/*
		 * if mIndicatorPosition out of bound or mIndicatorCount < 2, 
		 * show nothing here
		 * 
		 * **/
		if (mIndicatorCount < 2 || mIndicatorPosition < 0 || mIndicatorPosition >= mIndicatorCount) {
			return;
		}
		
		int width = getWidth();
		int height = getHeight();
		
		//draw from right
		for (int i = 0; i < mIndicatorCount; i++) {
			if (i == mIndicatorCount - mIndicatorPosition - 1) {
				if (mIndicatorMode == IndicatorMode.Stop) {
					mPaint.setColor(mIndicatorSelectedColor);
				}
				else if (mIndicatorMode == IndicatorMode.Moving) {
					mPaint.setColor(mIndicatorWillUnselectedColor);
				}
			}
			else {
				mPaint.setColor(mIndicatorUnselectedColor);
			}
			
			float cx = width - (mIndicatorPaddingRight + mIndicatorSpacing * i);
			float cy = height / 2;
			
			TTLog.e("drawIndicator", cx + ":" + cy);
			
			canvas.drawCircle(cx, cy, mIndicatorRadius, mPaint);
			
		}
		
	}
	
	private void drawTopicPanel(Canvas canvas) {
		
		/*
		 * topic panel
		 * 
		 * 
		 * **/
		
		
		
		// draw indicator line
		
		int width = getWidth();
		int height = getHeight();
		

		mPaint.setColor(mTopicPanelColor);
		
		
		Path path = new Path();
		
		path.moveTo(0, 0);
		path.lineTo(0, height);
		path.lineTo(mTopicPanelWidth - mTopicArrowWidth + mTopicArrowInnerDeep, height);
		path.lineTo(mTopicPanelWidth - mTopicArrowWidth, (height + mTopicArrowHeight) / 2);
		path.lineTo(mTopicPanelWidth, height / 2);
		path.lineTo(mTopicPanelWidth - mTopicArrowWidth, (height - mTopicArrowHeight) / 2);
		path.lineTo(mTopicPanelWidth - mTopicArrowWidth + mTopicArrowInnerDeep, 0);
		
		path.close();
		
		canvas.drawPath(path, mPaint);
		
		//mIsNeedTopic = true;
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		
		drawIndicator(canvas);
		
		if (mIsNeedTopic) {
			drawTopicPanel(canvas);
		}
	}

}

dimen值

<dimen name="image_ad_indicator_panel_height">30dp</dimen>
	<dimen name="image_ad_indicator_panel_reverse">-30dp</dimen>
	<dimen name="image_ad_indicator_radius">3dp</dimen>
	<dimen name="image_ad_indicator_spacing">15dp</dimen>
	<dimen name="image_ad_indicator_padding_right">20dp</dimen>
	<dimen name="image_ad_indicator_padding_bottom">10dp</dimen>
	
	<dimen name="image_ad_topic_panel_width">50dp</dimen>
	<dimen name="image_ad_topic_arrow_width">6dp</dimen>
	<dimen name="image_ad_topic_arrow_height">14dp</dimen>
	<dimen name="image_ad_topic_arrow_inner_deep">0dp</dimen>
	<dimen name="image_ad_topic_title_width">40dp</dimen>