【0056】自定义控件-2-组合已有控件实现自定义控件-轮播图广告
1.轮播广告的效果

2. 书写的逻辑

3.ViewPager基本实现
【说明】控件的使用,相当于躺倒的listView ;但是不能直接只用listView,需要使用v4包中的控件;
使用时,需要包含完整包名的全路径;



【源码的关联】





【运行报错】

【解决方法】原因是因为在自定义的控件无法直接加载到程序中使用;


4. 布局
【布局源码】
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 tools:context=".MainActivity" > 6 7 <!-- 最外层的布局 --> 8 <RelativeLayout 9 android:layout_width="match_parent" 10 android:layout_height="160dp" > 11 12 <!-- 滚动图片的布局 --> 13 <android.support.v4.view.ViewPager 14 android:id="@+id/viewpager" 15 android:layout_width="match_parent" 16 android:layout_height="match_parent" /> 17 <!-- 灰条 --> 18 <LinearLayout 19 android:layout_width="match_parent" 20 android:layout_height="40dp" 21 android:padding="5dp" 22 android:orientation="vertical" 23 android:layout_alignParentBottom="true" 24 android:gravity="center_horizontal" 25 android:background="#66000000" > 26 <!--灰条中显示的文字 --> 27 <TextView 28 android:id="@+id/tv_desc" 29 android:layout_width="wrap_content" 30 android:layout_height="wrap_content" 31 android:textColor="@android:color/white" 32 android:singleLine="true" 33 android:text="天王盖地虎, 天王盖地虎, 天王盖地虎, " /> 34 <!--图片对应的中间的点 --> 35 <LinearLayout 36 android:id="@+id/ll_point_container" 37 android:layout_width="wrap_content" 38 android:layout_height="wrap_content" 39 android:layout_marginTop="5dp" 40 android:orientation="horizontal" 41 ></LinearLayout> 42 </LinearLayout> 43 </RelativeLayout> 44 45 </RelativeLayout>
5. MVC模型

6.逻辑代码的完成
6.1 初始化数据及adpter的创建

6.2 根据图片的个数创建listView的集合;

6.3 在container中添加条目和删除条目,以及是否可以复用;
【注意】添加条目和删除条目的方法必须重写,否则会抛出异常;


【固定写法】

【当前的效果】

7.ViewPager的逻辑

【destroyItem和instantiateItem存在的意义】在实际的图片加载中只存在三张图片,包括当前显示的和已经显示和即将要显示的图片,其余的图片已经销毁了;
【验证】

【设置缓冲的图片的个数】

8. 指示器的添加
【原理】添加指示器的小圆点,亮点为可用状态,灰色为不可用状态;
需要画圆,新建xml文件,shape指定;
8.1 书写shape-xml文件


8.2 出现的问题


8.3 修正


8.4 修改指示器的距离
【说明】第一个点是不需要增加间距的;

8.5 添加灰色色指示器点

【说明】需要将两者放到选择器中



【说明】将指示器的0号位设置为true;

8.6 文字随着图片的滚动的同步滚动





【到此处实现的效果】

9. 图片条目的无限循环
【向右滑动的无线循环】


【初始化的时候防止角标越界】

【填充文字内容的时候防止角标越界】
【出现的问题】



【问题的解决】

【向左滑动的无限循环】图片开始选中的是0号位,图片再向左滑不可能成为负数;解决的方法就是设置初始化时选择MaxValues的中间值,同时需要考虑开始选中的是第一个图片;

【最终值的选择】

10.图片的自动滚动
【出现的问题】在子线程不能更新UI;

【更改方法】

【BUG】在程序退出之后仍然在循环

【改进方法】


浙公网安备 33010602011771号