自定义控件和试图(原生api)viewPager图片轮播广告

使用android提供的api来做出去自己想要的控件显示效果。基于原生api是最低级的自定义控件和试图

android的v4包自带的控件

android.support.v4.view.ViewPager

几个滚动原点是放在LinearLayout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="200dp" />

    <!-- #33000000  半透明的背景颜色 -->
    <!-- android:layout_alignBottom="@id/viewpager" 整个布局是放在ViewPager下面-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/viewpager"
        android:background="#33000000"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/image_desc"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/app_name"
            android:textColor="@android:color/white"
            android:textSize="18sp" />

        <LinearLayout
            android:orientation="horizontal"
            android:id="@+id/point_group"
            android:layout_width="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_height="wrap_content" >
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

viewPager是v4自带的完整的控件,监听页面操作后做相应处理即可  setOnPageChangeListener

通过handle可以实现按时自动切换广告图片,也就是自动轮播

handler.sendEmptyMessageDelayed(0, 2000);



代码代替xml布局属性:LinearLayout.LayoutParams

package com.itheima.viewpagerdemo28;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
//要在build path哪里把jar包勾上  视频26.30处讲解
//xml文件自定义小图标   视频33.30处讲解
public class MainActivity extends Activity {

	//用来轮播图片的
	//list里面的item是一样的,所以可以复用
	//ViewPage里面的条目可能是不一样的,没有规则可言的,所以选择销毁掉
	private ViewPager viewPager;

	//添加小点的
	private LinearLayout pointGroup;

	//添加文字的
	private TextView iamgeDesc;

	// 图片资源ID
	private final int[] imageIds = { R.drawable.a, R.drawable.b, R.drawable.c,
			R.drawable.d, R.drawable.e };

    //图片标题集合
	private final String[] imageDescriptions = {
			"巩俐不低俗,我就不能低俗",
			"扑树又回来啦!再唱经典老歌引万人大合唱",
			"揭秘北京电影如何升级",
			"乐视网TV版大派送",
			"热血屌丝的反杀"
	};
	
	
	private ArrayList<ImageView> imageList;

	/**
	 * 上一个页面的位置
	 */
	protected int lastPosition;
	
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		viewPager = (ViewPager) findViewById(R.id.viewpager);
		pointGroup = (LinearLayout) findViewById(R.id.point_group);
		iamgeDesc = (TextView) findViewById(R.id.image_desc);
		//给第一条设置文字
		iamgeDesc.setText(imageDescriptions[0]);
		
		
		imageList = new ArrayList<ImageView>();
		for (int i = 0; i <imageIds.length; i++) {
			//加五个图  加五个排好版的圆点
			
			//初始化图片资源
			ImageView image = new ImageView(this);
			image.setBackgroundResource(imageIds[i]);
			imageList.add(image);
			
			
			//添加指示点
			ImageView point =new ImageView(this);
			//设置点的属性  例如点的大小以及点的隔离位置(margin)
			//因为点是放在LinearLayout里面,所以这里就new一个LinearLayout
			//如果不是放在LinearLayout里面,例如是相对布局,这里就new相对布局
			//注意LayoutParams的使用  看做是设置布局里面ImageView这个View的参数属性即可
			LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
					//参数也可以直接指定大小  例如 5,5
					LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
			//用代码代替xml布局属性
			params.rightMargin = 20;
			point.setLayoutParams(params);
			
			//选择器
			point.setBackgroundResource(R.drawable.point_bg);
			if(i==0){
				point.setEnabled(true);
			}else{
				point.setEnabled(false);
			}
			pointGroup.addView(point);
		}
		
		 viewPager.setAdapter(new MyPagerAdapter());
		 
		 //setCurrentItem是设置当前显示的图片的位置
		 //getCurrentItem是获取当前显示的图片的位置
		 
		 //加上这个可以使得向左滑动也能和向右一样无限循环
//		 viewPager.setCurrentItem(Integer.MAX_VALUE/2 - (Integer.MAX_VALUE/2%imageList.size())) ;
		 
		 //监听页面切换  切换时就改变textView的文字
		 viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			

			@Override
			/**
			 * 页面切换后调用 
			 * position  新的页面位置
			 */
			public void onPageSelected(int position) {
				
				position = position%imageList.size();
				
				//设置文字描述内容
				iamgeDesc.setText(imageDescriptions[position]);
				
				//改变指示点的状态
				//把当前点enbale 为true 
				//linearLayout获取孩子的api getChildAt
				pointGroup.getChildAt(position).setEnabled(true);
				//把上一个点设为false
				pointGroup.getChildAt(lastPosition).setEnabled(false);
				lastPosition = position;
				
			}
			
			@Override
			/**
			 * 页面正在滑动的时候,回调
			 */
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPixels) {
			}
			
			@Override
			/**
			 * 当页面状态发生变化的时候,回调
			 */
			public void onPageScrollStateChanged(int state) {
				
			}
		});
		 
		 /*
		  * 自动循环:
		  * 1、定时器:Timer
		  * 2、开子线程 while  true 循环
		  * 3、ColckManager 
		  * 4、 用handler 发送延时信息,实现循环
		  */
		 isRunning = true;
		 //handle通过发送简单消息来实现定时循环
		 handler.sendEmptyMessageDelayed(0, 2000);
	}
	
	/**
	 * 判断是否自动滚动
	 */
	private boolean isRunning = false;
	
	private Handler handler = new Handler(){
		public void handleMessage(android.os.Message msg) {
			
			//让viewPager 滑动到下一页
			viewPager.setCurrentItem(viewPager.getCurrentItem()+1);
			if(isRunning){
				handler.sendEmptyMessageDelayed(0, 2000);
			}
		};
	};
	
	protected void onDestroy() {
		
		isRunning = false;
	};

	private class MyPagerAdapter extends PagerAdapter {

		@Override
		/**
		 * 获得页面的总数
		 */
		public int getCount() {
//			return imageList.size();
			//不要限制个数  这样子才能实现一直轮播下去,也就是最后一个结束了自动接第一个下去
			return Integer.MAX_VALUE;
			
		}

		@Override
		/**
		 * 获得相应位置上的view
		 * container  view的容器,其实就是viewpager自身
		 * position 	相应的位置
		 */
		public Object instantiateItem(ViewGroup container, int position) {
			
			System.out.println("instantiateItem  ::"+position);
			
			// 给 container 添加一个view
			container.addView(imageList.get(position%imageList.size()));
			//返回一个和该view相对的object
			return imageList.get(position%imageList.size());
		}

		@Override
		/**
		 * 判断 view和object的对应关系 
		 */
		public boolean isViewFromObject(View view, Object object) {
//			if(view == object){
//				return true;
//			}else{
//				return false;
//			}
			return view == object;
		}

		@Override
		/**
		 * 销毁对应位置上的object
		 */
		public void destroyItem(ViewGroup container, int position, Object object) {
			System.out.println("destroyItem  ::"+position);
			
			container.removeView((View) object);
			object = null;
		}
	}

}

Xml文件自定义小图形。。用来配置广播图片滚动时下面原型图标跟着改变的效果

自定义控件和试图(原生api)viewPager图片轮播广告_第1张图片

选择器,根据state_enabled来选择要使用哪个item,每个item对应下面自定义的图标

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item android:drawable="@drawable/point_nomal"  android:state_enabled="false"/>
    <item android:drawable="@drawable/point_focured"  android:state_enabled="true"/>

</selector>

选择器在代码中的使用:point是ImageView类

//选择器
point.setBackgroundResource(R.drawable.point_bg);
if(i==0){
	point.setEnabled(true);
}else{
	point.setEnabled(false);
}



自定义的两种小图标

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    
    <size  android:width="5dp" android:height="5dp"/>
    <solid android:color="#55000000"/>

</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    
    <size  android:width="5dp" android:height="5dp"/>
    <solid android:color="#aaFFFFFF"/>
	
</shape>
注意:v4包是第三方jar包,编译的时候使用,也就是调用他的类和api是不报错的,也有提示,但是导出的时候是默认没有导出的,所以一运行就要报错,会报某些类或者方法找不到的错等等。

build path这里要配置一下,默认是没有打钩,所以要自己打钩上才能导出去

自定义控件和试图(原生api)viewPager图片轮播广告_第2张图片

你可能感兴趣的:(自定义控件和试图(原生api)viewPager图片轮播广告)