***********************************************************************************************************************************
"广告"这个词已经屡见不鲜,在社交媒体日益发达的今天,可以说,它已经成为我们生活的一部分:看喜欢的电视剧,剧集转换空隙,中间插播一段广告;接头随处可见的各种销售人员,手拿广告,宣传自己的产品,"帅哥、美女,瞧一瞧,看一看啦,,,";出行逛街,各大商场的荧屏上,接连不断的推出各式各样的宣传广告;......诸如此类,实在是举不胜举。那广告如此之多,你会不会好奇,究竟广告是什么,它又是以什么方式出现在大家眼前的呢?接下来,我以社交媒体之一------APP为依据,为你解答一下心中的疑问?
"广告"是将某种意图,以各种场合、社交媒体等为载体,广而告之,从而迅速的宣传自己的意图,达到让大家都了解的目的。APP里面的广告也不例外,欢迎页面显示静态广告,登录页面显示轮播广告,用户点击进去,看到的就是宣传者自己的意图,也就是产品。
大家都知道,APP设计界面,元素众多,颜色纷呈,不管是在BAT类的产品,还是在普通类APP里面展示广告,都需要一个位置,这个位置就是"广告位",也是我们开发者在设计广告时,必须考虑的一个因素。说了这么多,作为开发者,还是代码来得快一些,下面直接看代码:
进入登录页面,首先需要根据当前屏幕的密度,初始化广告位及各组件,
初始化完毕之后,调用网络请求,获取展示广告的地址,在这里固定展示三张广告页,后台也就会返回三个url,将获取到的链接地址,存储在list集合中,绑定viewPager
适配器;另外在项目中设置定时发送请求后去广告地址的需求,所以设置开启子线程,定时发送handler,以更新最新数据的目的。
/**
* 自定义广告
* @author Administrator
*
*/
public class AdvView extends LinearLayout implements MyAsyncHttpPost.OnResultListener{
private int width = 0,height = 0;
ImageFetcher fetcher =null;
private Activity activity;
PointWidget adv_ponit;
ViewPager advertPage ;
List
adverts;
int currrentItem = 0;
/**
*
* @param context
* @param w 0 默认960
* @param h 0 默认120
*/
public AdvView(Context context,Activity activity,int w,int h,String position) {
super(context);
this.activity = activity;
fetcher =new ImageFetcher(context, UiUtils.getScreenHW(activity).widthPixels);
fetcher.setLoadingImage(R.drawable.default_img);
if (w > 0 && h > 0) {
width = UiUtils.getScreenHW(activity).widthPixels;
double scale = (double)width / w;
height = (int)(h * scale);
}else {
width = UiUtils.getScreenHW(activity).widthPixels;
double scale = (double)width / 960;
height = (int)(120 * scale);
}
// 访问服务器 加载配置文件 广告列表 热门推荐
JSONObject reqJson = new JSONObject();
try {
reqJson.put("adPos", position);
} catch (JSONException e) {
e.printStackTrace();
}
new MyAsyncHttpPost(getContext(), this).execute(AppConstants.SVC_BASE_URL,reqJson.toString(),AppRes.ADV_LIST);
}
public AdvView(Context context, AttributeSet attrs) {
super(context, attrs);
}
/**
* 页卡切换监听
*/
public class MyOnPageChangeListener implements OnPageChangeListener {
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int position) {
if(adverts.size()>1)adv_ponit.setPoint(position % adverts.size());
}
}
// 创建自动滚动广告线程
Runnable runnable = new Runnable() {
@Override
public void run() {
currrentItem = (advertPage.getCurrentItem() + 1);
handler.postDelayed(runnable, 5 << 10);
handler.sendEmptyMessage(0);
}
};
// 更新广告图片
private MyHandler handler = new MyHandler(new Handlerinter() {
@Override
public void doSameThing(Message msg) {
// 根据viewpager里图片的 角标设置当前要显示的图片
advertPage.setCurrentItem(currrentItem);
}
}) ;
public void removeCallbacks() {
handler.removeCallbacks(runnable);
}
public void postDelayed() {
handler.postDelayed(runnable, 6 << 10);
}
@Override
public void onResult(JSONObject result) {
if (result != null && AppUtil.getJsonInt(result, "result")==1) {
RelativeLayout v = (RelativeLayout)activity.getLayoutInflater().inflate(R.layout.adv_view, null);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,height);
params.height = height;
v.setLayoutParams(params);
advertPage = (ViewPager) v.findViewById(R.id.advertPage);
adv_ponit = (PointWidget) v.findViewById(R.id.adv_ponit);
ImageButton close = (ImageButton) v.findViewById(R.id.close);
close.setVisibility(View.GONE);
adv_ponit.setPointPadding(1, 0, 0, 0);
adv_ponit.setPointSize(8, 8);
advertPage.setOnPageChangeListener(new MyOnPageChangeListener());
// close.setOnClickListener(new View.OnClickListener() {
// @Override
// public void onClick(View v) {
// ((LinearLayout)v.getParent().getParent()).removeAllViews();
// }
// });
JSONArray jsons = AppUtil.getJsonArray(result, "obj");
try {
adverts = toAdvModel(jsons);
} catch (Exception e) {
e.printStackTrace();
}
if(adverts !=null && adverts.size()>0){
setAdvImage(adverts);
this.addView(v);
this.invalidate();
}
}
}
// 广告赋值
private void setAdvImage(List
adverts) {
// 循环滑动:头部添加一个和原尾部相同的view,尾部添加一个和原头部相同的view
if (adverts.size() > 0) {
if (adv_ponit.getPointLenth() != adverts.size() && adverts.size() > 1) {
adv_ponit.setPointCount(adverts.size());
}
AdvImgViewPagerAdapter pagerAdapter = new AdvImgViewPagerAdapter();
advertPage.setAdapter(pagerAdapter);
advertPage.setCurrentItem(currrentItem);
currrentItem = 10 * adverts.size();
// if(adverts.size()>1 && runnable != null){
// runnable.run();
// }
}
}
private List
toAdvModel(JSONArray jsons) throws Exception{
List
advList = new ArrayList
(); for (int i = 0; i < jsons.length(); i++) { JSONObject json = jsons.getJSONObject(i); Advertising advert = new Advertising(AppUtil.getJsonInt(json, "id"), AppUtil.getJsonString(json, "title"), AppUtil.getJsonString(json, "image"), AppUtil.getJsonString(json, "adPos"), AppUtil.getJsonString(json, "url"), AppUtil.getJsonString(json, "startDate"), AppUtil.getJsonString(json, "endDate"), AppUtil.getJsonInt(json, "num")); advList.add(advert); } return advList; } //内部类 class AdvImgViewPagerAdapter extends PagerAdapter { @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } @Override public int getCount() { return adverts.size()>1?Integer.MAX_VALUE:adverts.size(); } @Override public Object instantiateItem(ViewGroup container,final int position) { ImageView v = new ImageView(activity); v.setScaleType(ScaleType.FIT_XY); v.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Advertising adv = null; if (adverts.size()>1) { adv=adverts.get(position%adverts.size()); }else if(adverts.size()==1){ adv=adverts.get(position); }else { adv = new Advertising(); } JSONObject data = new JSONObject(); Intent intent = new Intent(activity, WebLoadHtml.class);// 调用默认浏览器范围url地址 try { data.put("url", adv.url); data.put("title", adv.title); } catch (Exception e) { e.printStackTrace(); } intent.putExtra("data", data.toString()); activity.startActivity(intent); } }); v.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (event.getAction()==MotionEvent.ACTION_DOWN) { // removeCallbacks(); }else if (event.getAction()==MotionEvent.ACTION_CANCEL) { // postDelayed(); } return false; } }); int index=adverts.size()>1?position%adverts.size():position; Advertising adv = adverts.get(index); fetcher.loadImage(adv.image, v); container.addView(v, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); return v; } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == (arg1); } } }RequestMapping("uploadExcel.htm") public void fileUpload(@RequestParam("excelFile") MultipartFile file,Boolean rename,String callback,HttpServletResponse response){ String message = ""; String json = ""; int result1=2; StringBuffer buf = null ; System.out.println(file.getOriginalFilename()); if (file != null && !file.isEmpty()) { try { int countError =0; //错误数目 String filename = file.getOriginalFilename(); buf = new StringBuffer(); if(! (filename.endsWith("xls") || filename.endsWith("xlsx")) ){ System.out.println("请上传扩展名为xls的文件"); } String extName = filename.substring(filename.lastIndexOf(".") + 1);//扩展名 if (file != null && !file.isEmpty()){ String[][] result = ReadExcelUtils.getData(extName,file.getInputStream(), 1); int rowLength = result.length; List
自定义的一个控件:这是广告底部的导航显示图标,
public class PointWidget extends LinearLayout{
public ArrayList<View> pointList;
ImageView point;
LayoutParams lp;
Context context;
int left,top,right,bottom, width = -2,heigth = -2;// -2为warp
public PointWidget(Context context) {
super(context);
this.context=context;
init();
setOrientation(0);
}
public PointWidget(Context context, AttributeSet attrs) {
super(context, attrs);
this.context=context;
init();
setOrientation(0);
}
private void init(){
pointList = new ArrayList<View>();
}
public void setPointCount(int PointCount){
pointList.clear();
removeAllViews();
lp = (null == lp ? new LayoutParams(width, heigth) : lp);
for(int i=0;i<PointCount;i++){
point = new ImageView(context);
point.setImageResource(R.drawable.point_selector);
point.setPadding(left, top, right, bottom);
point.setEnabled(false);
point.setLayoutParams(lp);
if(pointList.size()==0){
point.setEnabled(true);
}else{
pointList.get(0).setEnabled(true);
}
pointList.add(point);
addView(point);
}
}
public void setPoint(int i){
for(int a=0;a<pointList.size();a++){
if(a==i){
pointList.get(i).setEnabled(true);
continue;
}
pointList.get(a).setEnabled(false);
}
}
public int getPointLenth(){
return (null == pointList ? 0 : pointList.size());
}
/**
* 设置point边距 单位dp
* @param left
* @param top
* @param right
* @param bottom
*/
public void setPointPadding(int left, int top, int right, int bottom){
this.left = ViewUtil.dip2px(context, left);
this.top = ViewUtil.dip2px(context, top);
this.right = ViewUtil.dip2px(context, right);
this.bottom = ViewUtil.dip2px(context, bottom);
}
/**
* 设置point大小 单位dp
* @param width
* @param height
*/
public void setPointSize(int width, int height) {
this.width = ViewUtil.dip2px(context, width);
this.heigth = ViewUtil.dip2px(context, height);
}
}
下面就是涉及到的一些界面:
首先是登录页面:
主要是为广告设置一个广告位,也就是设置一个容器,来盛放加载的广告:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<include layout="@layout/top" />
<LinearLayout android:id="@+id/adv_main" style="@style/lyt_wf_hw" android:layout_marginTop="0dp" android:orientation="horizontal"></LinearLayout>
<!-- <ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_marginTop="0dp"
android:padding="0dp"
android:src="@drawable/login_banner_350"
android:contentDescription="@null" /> -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="@drawable/login_underline"
android:orientation="horizontal"
android:padding="10dp" >
<ImageView
android:layout_width="28dp"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
android:contentDescription="@null"
android:src="@drawable/mobile_icon" />
<EditText
android:id="@+id/mobileEdit"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:layout_marginTop="3dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:hint="请输入手机号"
android:textColor="@color/apply_smobile_line_text"
android:textColorHint="@color/apply_smobile_soft_gray"
android:textSize="20sp"
android:background="@null">
</EditText>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="@drawable/login_underline"
android:orientation="horizontal"
android:padding="10dp" >
<ImageView
android:layout_width="28dp"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:contentDescription="@null"
android:src="@drawable/code_icon" />
<EditText
android:id="@+id/codeEdit"
android:layout_width="149dp"
android:paddingLeft="11dp"
android:layout_marginTop="5dp"
android:layout_height="wrap_content"
android:layout_weight="0.70"
android:inputType="number"
android:hint="请输入验证码"
android:textColor="@color/apply_smobile_line_text"
android:textColorHint="@color/apply_smobile_soft_gray"
android:textSize="20sp"
android:background="@null">
</EditText>
<Button
android:id="@+id/codeBtn"
android:layout_width="105dp"
android:layout_height="40dp"
android:layout_marginTop="5dp"
android:background="@drawable/shape_red"
android:text="获取验证码"
android:gravity="center_horizontal"
android:textSize="16sp"
android:textColor="@color/white" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="@drawable/login_underline"
android:orientation="horizontal"
android:padding="10dp"
>
<Button
android:id="@+id/loginRegister"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="45dp"
android:background="@drawable/shape_register"
android:text="注 册"
android:textColor="@color/white"
android:textSize="20sp"/>
<Button
android:id="@+id/loginBtn"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="45dp"
android:background="@drawable/shape_btn_login"
android:text="登 录"
android:textColor="@color/white"
android:textSize="20sp"/>
</LinearLayout>
</LinearLayout>
滑动广告的容器,使用的Android原生的控件,viewpager这个相信大家都不陌生:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/adv_layout" style="@style/lyt_wf_hw_v">
<!-- android:layout_height="@dimen/adv_height" -->
<android.support.v4.view.ViewPager
android:id="@+id/advertPage"
style="@style/lyt_wf_hf"
android:unselectedAlpha="1"
android:fadingEdge="none"
android:layout_height="match_parent" />
<com.tdm.hd.common.myview.PointWidget
android:paddingRight="10dp"
android:paddingBottom="8dp"
android:id="@+id/adv_ponit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"/>
<ImageButton android:id="@+id/close" style="@style/image_default" android:layout_width="30dp" android:layout_height="20dp" android:src="@drawable/close_gray" android:background="@drawable/res_selector" android:layout_alignParentRight="true" android:paddingRight="10dp" android:contentDescription="@null"/>
</RelativeLayout>
基本就是这些内容了,下面再来看一下效果图:
本来是要展示三张广告,可是手机网络实在是不给力,第三张只显示了三分之一,所以就不贴了,上面两张图中广告底部的黑色,也是网络不给力,加载不完全造成的,应该不影响大局。
***********************************************************************************************************************************