Android 登录页面的广告轮播

***********************************************************************************************************************************

     "广告"这个词已经屡见不鲜,在社交媒体日益发达的今天,可以说,它已经成为我们生活的一部分:看喜欢的电视剧,剧集转换空隙,中间插播一段广告;接头随处可见的各种销售人员,手拿广告,宣传自己的产品,"帅哥、美女,瞧一瞧,看一看啦,,,";出行逛街,各大商场的荧屏上,接连不断的推出各式各样的宣传广告;......诸如此类,实在是举不胜举。那广告如此之多,你会不会好奇,究竟广告是什么,它又是以什么方式出现在大家眼前的呢?接下来,我以社交媒体之一------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>
    基本就是这些内容了,下面再来看一下效果图:

     

     

     本来是要展示三张广告,可是手机网络实在是不给力,第三张只显示了三分之一,所以就不贴了,上面两张图中广告底部的黑色,也是网络不给力,加载不完全造成的,应该不影响大局。

***********************************************************************************************************************************

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值