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