Android进阶之绘制-自定义View完全掌握(二)
程序员文章站
2022-06-30 08:43:57
这是自定义View系列的第二篇博客，我们继续来学习关于自定义View的知识。 今天我们来实现一下广告条案例。 我们要实现的是这样的一个效果。 要想实现这样的效果，我们可以借助ViewPager控件，然后加上自定义的一些控件即可完成。那么现在就开始吧。 新建一个android项目。 修改activit ......
这是自定义view系列的第二篇博客，我们继续来学习关于自定义view的知识。
今天我们来实现一下广告条案例。
我们要实现的是这样的一个效果。
要想实现这样的效果，我们可以借助viewpager控件，然后加上自定义的一些控件即可完成。那么现在就开始吧。
新建一个android项目。
修改activity_main.xml文件。
<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.itcast.test0429.mainactivity">
<android.support.v4.view.viewpager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="180dp"/>
<linearlayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignbottom="@id/viewpager"
android:background="#44000000"
android:orientation="vertical"
android:padding="5dp">
<textview
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="3dp"
android:text="复仇者联盟4"
android:textcolor="#ffffff" />
<linearlayout
android:id="@+id/ll_point_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal">
</linearlayout>
</linearlayout>
</relativelayout>
然后修改mainactivity的代码。
package com.itcast.test0429;
import android.os.bundle;
import android.support.v4.view.pageradapter;
import android.support.v4.view.viewpager;
import android.support.v7.app.appcompatactivity;
import android.util.log;
import android.view.view;
import android.view.viewgroup;
import android.widget.imageview;
import android.widget.linearlayout;
import android.widget.textview;
import java.util.arraylist;
import butterknife.bindint;
import butterknife.bindview;
import butterknife.butterknife;
public class mainactivity extends appcompatactivity {
private static final string tag = mainactivity.class.getsimplename();
@bindview(r.id.viewpager)
viewpager viewpager;
@bindview(r.id.tv_title)
textview tvtitle;
@bindview(r.id.ll_point_group)
linearlayout llpointgroup;
private arraylist<imageview> imageviews;
//图片资源id
private final int[] imageids = {
r.drawable.b1,
r.drawable.b2,
r.drawable.b3
};
//图片标题集合
private final string[] imagedescriptions = {
"标题一",
"标题二",
"标题三"
};
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main);
butterknife.bind(this);
imageviews = new arraylist<>();
for(int i = 0;i < imageids.length;i++){
imageview imageview = new imageview(this);
imageview.setbackgroundresource(imageids[i]);
//添加到集合中
imageviews.add(imageview);
}
//设置适配器
viewpager.setadapter(new myadapter());
}
class myadapter extends pageradapter{
/**
* 得到图片的总数
* @return
*/
@override
public int getcount() {
return imageviews.size();
}
/**
* 相当于getview方法
* @param container viewpager自身
* @param position 当前实例化页面的位置
* @return
*/
@override
public object instantiateitem(viewgroup container, int position) {
imageview imageview = imageviews.get(position);
container.addview(imageview);//添加到viewpager中
log.e(tag,"instantiateitem==" + position + ",---imageview==" + imageview);
return imageview;
}
/**
* 比较view和object是否同一个实例
* @param view 页面
* @param object instantiateitem方法返回的结果
* @return
*/
@override
public boolean isviewfromobject(view view, object object) {
return view == object;
}
/**
* 释放资源
* @param container viewpager
* @param position 要释放的位置
* @param object 要释放的页面
*/
@override
public void destroyitem(viewgroup container, int position, object object) {
log.e(tag,"destroyitem==" + position + ",---object==" + object);
container.removeview((view) object);
}
}
}
需要注意的就是pageadapter的使用，每个方法我都写了注释，大家应该能理解吧。viewpager在运行之后总共会初始化两个页面，最多初始化三个，随着页面的增多，viewpager会自动销毁前面的页面进而提供给后面的页面使用，这是viewpage的内容优化，我们可以来验证一下，我在初始化和销毁的方法中都打印了日志。现在，我们来运行项目。
我们看看日志情况。
只打印了两次初始化信息，说明viewpager只初始化了两个页面。
我们向左滑动viewpager来切换页面，此时观察日志信息。
会发现在创建了三个实例后，第一个页面的实例就被销毁了，这就证实了刚才的结论。
这样我们第一阶段的编码就完成了，接下来我们实现添加指示点，并根据页面改变设置文本。
而指示点有多种实现方式，可以通过图片来显示，也可以自己绘制指示点显示，我这种用的是第二种方式。贴出mainactivity的代码。
package com.itcast.test0429;
import android.os.bundle;
import android.support.v4.view.pageradapter;
import android.support.v4.view.viewpager;
import android.support.v7.app.appcompatactivity;
import android.util.log;
import android.view.view;
import android.view.viewgroup;
import android.widget.imageview;
import android.widget.linearlayout;
import android.widget.textview;
import java.util.arraylist;
import butterknife.bindview;
import butterknife.butterknife;
import butterknife.onclick;
import butterknife.onpagechange;
public class mainactivity extends appcompatactivity {
private static final string tag = mainactivity.class.getsimplename();
@bindview(r.id.viewpager)
viewpager viewpager;
@bindview(r.id.tv_title)
textview tvtitle;
@bindview(r.id.ll_point_group)
linearlayout llpointgroup;
private arraylist<imageview> imageviews;
//图片资源id
private final int[] imageids = {
r.drawable.b1,
r.drawable.b2,
r.drawable.b3,
r.drawable.b1,
r.drawable.b2,
r.drawable.b3
};
/**
* 上一次高亮显示的位置
*/
private int preposition = 0;
//图片标题集合
private final string[] imagedescriptions = {
"标题一",
"标题二",
"标题三",
"标题四",
"标题五",
"标题六"
};
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main);
butterknife.bind(this);
imageviews = new arraylist<>();
for (int i = 0; i < imageids.length; i++) {
imageview imageview = new imageview(this);
imageview.setbackgroundresource(imageids[i]);
//添加到集合中
imageviews.add(imageview);
//添加点
imageview point = new imageview(this);
point.setbackgroundresource(r.drawable.point_selector);
linearlayout.layoutparams params = new linearlayout.layoutparams(8, 8);
if (i == 0) {
point.setenabled(true);//显示红色
} else {
point.setenabled(false);//显示灰色
params.leftmargin = 8;
}
point.setlayoutparams(params);
llpointgroup.addview(point);
}
//设置适配器
viewpager.setadapter(new myadapter());
tvtitle.settext(imagedescriptions[preposition]);
//设置监听viewpager页面的改变
viewpager.addonpagechangelistener(new viewpager.onpagechangelistener() {
/**
* 当页面滚动的时候回调此方法
* @param position 当前页面的位置
* @param positionoffset 滑动页面的百分比
* @param positionoffsetpixels 在屏幕上滑动的像素
*/
@override
public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {
}
/**
* 当某个页面被选中的时候回调此方法
* @param position 被选中页面的位置
*/
@override
public void onpageselected(int position) {
//设置对应页面的文本信息
tvtitle.settext(imagedescriptions[position]);
//把上一个高亮的设置为默认-灰色
llpointgroup.getchildat(preposition).setenabled(false);
//当前设置为高亮-红色
llpointgroup.getchildat(position).setenabled(true);
preposition = position;
}
/**
* 当页面滚动状态变化的时候回调此方法
* 静止-》滑动
* 滑动--》静止
* 静止---》拖拽
* @param state
*/
@override
public void onpagescrollstatechanged(int state) {
}
});
}
class myadapter extends pageradapter {
/**
* 得到图片的总数
*
* @return
*/
@override
public int getcount() {
return imageviews.size();
}
/**
* 相当于getview方法
*
* @param container viewpager自身
* @param position 当前实例化页面的位置
* @return
*/
@override
public object instantiateitem(viewgroup container, int position) {
imageview imageview = imageviews.get(position);
container.addview(imageview);//添加到viewpager中
log.e(tag, "instantiateitem==" + position + ",---imageview==" + imageview);
return imageview;
}
/**
* 比较view和object是否同一个实例
*
* @param view 页面
* @param object instantiateitem方法返回的结果
* @return
*/
@override
public boolean isviewfromobject(view view, object object) {
return view == object;
}
/**
* 释放资源
*
* @param container viewpager
* @param position 要释放的位置
* @param object 要释放的页面
*/
@override
public void destroyitem(viewgroup container, int position, object object) {
log.e(tag, "destroyitem==" + position + ",---object==" + object);
container.removeview((view) object);
}
}
}
指示点我是用xml文件绘制的，point_selecotr.xml文件代码如下。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="@drawable/point_normal"/>
<item android:state_enabled="true" android:drawable="@drawable/point_press"/>
</selector>
point_normal.xml文件代码如下。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="8dp"
android:height="8dp" />
<solid android:color="#44000000" />
</shape>
point_press.xml文件代码如下。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="8dp"
android:height="8dp" />
<solid android:color="#ff0000" />
</shape>
我们运行项目，预览效果。
这个时候，指示点和文本标题的内容都随着我们的滑动而改变，这样，我们的目的就达到了。
我们来实现第三阶段的需求，支持左右无限滑动。
怎么才能实现这个需求呢？滑动的页面数量是由适配器的getcount方法决定的，所以，我们在getcount方法里直接返回integer.max_value，这是int的最大值，这个数量已经非常庞大了，可以说近似于无限滑动，但是设置如此大的数量，而我们的数据又没有这么多，那么在滑动页面的时候肯定会产生索引越界的问题，所以，为了避免这样的问题产生，我们就必须把有页面位置的地方全部取模处理，让其保持在我们的有限数据范围内，这样就能够实现我们的需求了。那么我们来修改mainactivity的代码。
package com.itcast.test0429;
import android.os.bundle;
import android.support.v4.view.pageradapter;
import android.support.v4.view.viewpager;
import android.support.v7.app.appcompatactivity;
import android.util.log;
import android.view.view;
import android.view.viewgroup;
import android.widget.imageview;
import android.widget.linearlayout;
import android.widget.textview;
import java.util.arraylist;
import butterknife.bindview;
import butterknife.butterknife;
import butterknife.onclick;
import butterknife.onpagechange;
public class mainactivity extends appcompatactivity {
private static final string tag = mainactivity.class.getsimplename();
@bindview(r.id.viewpager)
viewpager viewpager;
@bindview(r.id.tv_title)
textview tvtitle;
@bindview(r.id.ll_point_group)
linearlayout llpointgroup;
private arraylist<imageview> imageviews;
//图片资源id
private final int[] imageids = {
r.drawable.b1,
r.drawable.b2,
r.drawable.b3,
r.drawable.b1,
r.drawable.b2,
r.drawable.b3
};
/**
* 上一次高亮显示的位置
*/
private int preposition = 0;
//图片标题集合
private final string[] imagedescriptions = {
"标题一",
"标题二",
"标题三",
"标题四",
"标题五",
"标题六"
};
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main);
butterknife.bind(this);
imageviews = new arraylist<>();
for (int i = 0; i < imageids.length; i++) {
imageview imageview = new imageview(this);
imageview.setbackgroundresource(imageids[i]);
//添加到集合中
imageviews.add(imageview);
//添加点
imageview point = new imageview(this);
point.setbackgroundresource(r.drawable.point_selector);
linearlayout.layoutparams params = new linearlayout.layoutparams(8, 8);
if (i == 0) {
point.setenabled(true);//显示红色
} else {
point.setenabled(false);//显示灰色
params.leftmargin = 8;
}
point.setlayoutparams(params);
llpointgroup.addview(point);
}
//设置适配器
viewpager.setadapter(new myadapter());
tvtitle.settext(imagedescriptions[preposition]);
//设置监听viewpager页面的改变
viewpager.addonpagechangelistener(new viewpager.onpagechangelistener() {
/**
* 当页面滚动的时候回调此方法
* @param position 当前页面的位置
* @param positionoffset 滑动页面的百分比
* @param positionoffsetpixels 在屏幕上滑动的像素
*/
@override
public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {
}
/**
* 当某个页面被选中的时候回调此方法
* @param position 被选中页面的位置
*/
@override
public void onpageselected(int position) {
int realposition = position % imageviews.size();
//设置对应页面的文本信息
tvtitle.settext(imagedescriptions[realposition]);
//把上一个高亮的设置为默认-灰色
llpointgroup.getchildat(preposition).setenabled(false);
//当前设置为高亮-红色
llpointgroup.getchildat(realposition).setenabled(true);
preposition = realposition;
}
/**
* 当页面滚动状态变化的时候回调此方法
* 静止-》滑动
* 滑动--》静止
* 静止---》拖拽
* @param state
*/
@override
public void onpagescrollstatechanged(int state) {
}
});
}
class myadapter extends pageradapter {
/**
* 得到图片的总数
*
* @return
*/
@override
public int getcount() {
return integer.max_value;
}
/**
* 相当于getview方法
*
* @param container viewpager自身
* @param position 当前实例化页面的位置
* @return
*/
@override
public object instantiateitem(viewgroup container, int position) {
int realposition = position % imageviews.size();
imageview imageview = imageviews.get(realposition);
container.addview(imageview);//添加到viewpager中
log.e(tag, "instantiateitem==" + position + ",---imageview==" + imageview);
return imageview;
}
/**
* 比较view和object是否同一个实例
*
* @param view 页面
* @param object instantiateitem方法返回的结果
* @return
*/
@override
public boolean isviewfromobject(view view, object object) {
return view == object;
}
/**
* 释放资源
*
* @param container viewpager
* @param position 要释放的位置
* @param object 要释放的页面
*/
@override
public void destroyitem(viewgroup container, int position, object object) {
log.e(tag, "destroyitem==" + position + ",---object==" + object);
container.removeview((view) object);
}
}
}
这样就可以了，我们来运行一下项目。
乍一看，好像是没什么问题了，但是，这个程序是有bug的，只是这样我们没有测试出来，我再操作一遍。
发现问题了没有，我在最开始进入程序的时候，右滑是不是滑不动？因为viewpager默认从0开始，所以左边已经没有其它页面了，故你无法右滑，那怎么解决这个问题呢？找到了问题的原因，那就可以有解决办法，既然左边没有页面，那就让它有页面不就得了？我们把第一张图定位到中间位置，那么它的左边和右边就都会拥有数量庞大的页面。虽然页面很多，但也不是滑不完的，假如有一个用户，他就是闲得慌，他就拼命地滑，结果，把左边或者右边的所有页面都滑完了，这种情况我们只能说这个人他真的是闲得慌了，总之，按照正常情况，如此多的页面时足够用户滑动了。
原理我们知道了，如何通过编码实现呢？很简单，只需要viewpager设置适配器之后加上如下代码即可。
//设置中间位置 int item = integer.max_value / 2 - integer.max_value / 2 % imageviews.size();//要保证imageviews的整数倍 viewpager.setcurrentitem(item);
现在运行项目，预览效果。
这样问题就解决了。整个案例也就结束了，这只是viewpager使用的一小部分，这个程序还可以加上很多的功能，比如自动播放，然后点击跳转等等，由于篇幅有限，我就不一一实现了，感兴趣的可以自己尝试着写一写。
源码已上传至github
上一篇： SQL语句拼接Mybatis教程
下一篇： 玉米要蒸多久才能熟，怎么蒸好吃