文档章节

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

chenruibing
 chenruibing
发布于 2015/05/29 13:27
字数 1473
阅读 260
收藏 1

使用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文件自定义小图形。。用来配置广播图片滚动时下面原型图标跟着改变的效果

选择器,根据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这里要配置一下,默认是没有打钩,所以要自己打钩上才能导出去

© 著作权归作者所有

chenruibing
粉丝 12
博文 203
码字总数 109101
作品 0
潮州
私信 提问
Android 打造一个丝滑的自动轮播控件

现在很多的 App 都有自动轮播的 banner 界面,用于展示广告图片或者显示当前比较热门的一些活动,除了具备比较酷炫的效果之外,通过轮播的方式来减少对界面的占用,也是很赞的一个设计点。本...

developerHaoz
2018/08/08
0
0
Rxjava + ViewPager 打造实用图片轮播

背景 说到图片轮播,之前写过一篇文章《造轮子:android自定义专属广告轮播控件》,不过当时是采用ViewFlipper实现图片轮播的,最近开始研究Rxjava技术,发现有个interval的方法,觉得很实用,...

码无止境
2016/09/22
0
0
一起学Android之ViewPager

本文以一个简单的小例子,简述在Android开发中ViewPager的常见用法,仅供学习分享使用。 概述 ViewPager是一个支持使用者左右滑动的布局管理控件,可以通过一个实现的(适配器)PageAdapter...

Alan.hsiang
01/27
0
0
Android中广告轮播框架Banner----(功能很全面

转载地址:https://github.com/youth5201314/banner 参考视频:http://ke.atguigu.com/course/150 Android图片轮播控件 新框架发布,欢迎大家Star XFrame - Android快速开发框架 XFrame详细功...

丁佳辉
2018/08/02
0
0
巧妙运用补间动画,自定义广告轮播CarouselView 2.0

  这是前一篇文章绘制的CarouselView的升级版,有兴趣的同学,可以去关注一下笔者前一篇文章。自定义广告图片轮播View——CarouselView 这次升级版相对于前文而已,有了一个功能上的飞跃主...

饮水思源为名
2018/08/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

texlive安装

Installing to: D:/bin/texlive/texlive/2019Installing [001/307, time/total: ??:??/??:??]: adobemapping [2130k]Installing [002/307, time/total: 00:03/08:57]: ae [84k]Installing......

MtrS
今天
2
0
运维规范

命名规范 发布流程 监控告警 故障定位 状态 日志 监控

以谁为师
今天
2
0
约瑟夫环(报数游戏)java实现

开端 公司组织考试,一拿到考题,就是算法里说的约瑟夫环,仔细想想 以前老师将的都忘了,还是自己琢磨把~ package basic.gzy;import java.util.Iterator;import java.util.LinkedList;...

无极之岚
今天
3
0
Kernel字符设备驱动框架

Linux设备分为三大类:字符设备,块设备和网络设备,这三种设备基于不同的设备框架。相较于块设备和网络设备,字符设备在kernel中是最简单的,也是唯一没有基于设备基础框架(device结构)的...

yepanl
今天
3
0
Jenkins 中文本地化的重大进展

本文首发于:Jenkins 中文社区 我从2017年开始,参与 Jenkins 社区贡献。作为一名新成员,翻译可能是帮助社区项目最简单的方法。 本地化的优化通常是较小的改动,你无需了解项目完整的上下文...

Jenkins中文社区
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部