对于做Android开发的工程师对于这个效果的实现一定不陌生,本篇我将带领大家先简单实现这个效果,再为大家介绍一下其中的原理,方便新手学习,老手复习,内容简单易懂,没有基础一样学习,不扯没用的了,下面开始我们本篇内容的干货。

  对于这个效果的实现,第一次接触时倍感困难,在之前的博客中为大家介绍了如何实现引导页效果,虽然带领大家实现了上述功能,但是对于具体的实现,其实内心有疑惑的,当初不是什么的清楚其中的原理,经过这些天的不懈努力,终于被我攻破了,开始介绍一下实现的原理:1、既然是广告效果,一定需要图片切换;2、图片切换要有标识,方便用户查看;3、图片切换要实现自动内容切换。这三点中最难的当属后两个了,在之前的文章中我已经带领大家实现过第一个效果了,有兴趣的小童鞋可以自行学习。

  我们开始今天的工作,首先我们需要准备6张图片(两张圆点图片+四张任意图片),用于我们实现的需要。对于圆点图片大家有时间不容易找,我为大家提供两种参考:

  白色:

  蓝色:

  仅供参考,大家如果有更好的,请绕道。

  准备好素材后,下面我们开始设计我们的代码:
  一、在res下新建一个drawable文件夹,在其中新建一个round.xml,用于我们上面两张图片切换显示控制,具体代码如下:

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@drawable/blank"/>
<item android:state_selected="false" android:drawable="@drawable/white"/>
</selector>

  二、下面我们开始我们的布局文件书写:

<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="match_parent"
/>
<LinearLayout
android:id="@+id/ll"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:layout_centerHorizontal="true"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/round"
android:layout_marginRight="5dp"
android:visibility="gone"
android:clickable="true"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/round"
android:layout_marginRight="5dp"
android:visibility="gone"
android:clickable="true"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/round"
android:layout_marginRight="5dp"
android:visibility="gone"
android:clickable="true"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/round"
android:layout_marginRight="5dp"
android:visibility="gone"
android:clickable="true"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/round"
android:layout_marginRight="5dp"
android:visibility="gone"
android:clickable="true"
/>
</LinearLayout> </RelativeLayout>

  注释:蓝色标注处表示LinearLayout至于界面底部;红色标注处表示应用我们配置好的图片信息,现在我们的界面效果是看不出来的,因为ImagerView我设置了销毁属性(android:visibility="gone"),这个不影响,在下面的代码中我们来控制显示。

  三、我们实现图片切换时,用到了PagerAdapter,这里为了方便我们设计代码,我设计了一个自定义的PagerAdapter对象:MyselfPagerAdapter.java:

public class MyselfPagerAdapter extends PagerAdapter {

    private List<View> view;

    public MyselfPagerAdapter(List<View> view){
this.view = view;
} @Override
public int getCount() {
if(view!=null){
return view.size();
}
return 0;
} @Override
//销毁position位置的界面
public void destroyItem(View container, int position, Object object) {
((ViewPager) container).removeView(view.get(position));
} @Override
//初始化position位置的界面
public Object instantiateItem(View container, int position) {
((ViewPager) container).addView(view.get(position));
return view.get(position);
} @Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
} }

  下面就是我们今天的重头戏了:MainActivity.java,先看代码,下面做解释。

public class MainActivity extends Activity implements OnPageChangeListener, OnClickListener{

    private ViewPager vp;
private MyselfPagerAdapter myselfPagerAdapter;
private List<View> listView;
private ImageView[] round; private static final int [] imagerResource = {R.drawable.imager1, R.drawable.imager2, R.drawable.imager3, R.drawable.imager4}; public int currentIndex = 0;
private Handler handler = new Handler();
public MyRunnable myRunnable = new MyRunnable(); public boolean flag = false; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main); init(); vp = (ViewPager) findViewById(R.id.viewPager);
myselfPagerAdapter = new MyselfPagerAdapter(listView);
vp.setAdapter(myselfPagerAdapter);
vp.setOnPageChangeListener(this); //初始化底部小点
initRound(); handler.postDelayed(myRunnable, 3000); } private void init() {
listView = new ArrayList<View>();
for(int i = 0; i<imagerResource.length; i++){
ImageView imageView = new ImageView(this);
imageView.setImageResource(imagerResource[i]);
listView.add(imageView);
}
} private void initRound() {
LinearLayout ll = (LinearLayout) findViewById(R.id.ll);
round = new ImageView[imagerResource.length];
for(int i=0; i<imagerResource.length; i++){
round[i] = (ImageView) ll.getChildAt(i);
round[i].setVisibility(View.VISIBLE);
round[i].setOnClickListener(this);
round[i].setSelected(false);
round[i].setTag(i);
}
round[currentIndex].setSelected(true);
} private void setCurView(int position){
if(position<0||position>=imagerResource.length){
return;
}
vp.setCurrentItem(position);
} private void setRoundView(int position){
if(position<0||position>=imagerResource.length||currentIndex==position){
return;
}
round[position].setSelected(true);
round[currentIndex].setSelected(false);
currentIndex = position;
} @Override
//当滑动状态改变时调用
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub } @Override
//当前页面被滑动时调用
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub } @Override
//当新的页面被选中时调用
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
setRoundView(arg0);
} @Override
public void onClick(View v) {
int position = (Integer)v.getTag();
setCurView(position);
setRoundView(position);
} class MyRunnable implements Runnable{ @Override
public void run() {
int n = currentIndex; if(n == imagerResource.length-1){
flag = false;
}else{
if(n == 0){
flag = true;
}
}
if(flag){
n = (n + 1)%listView.size();
}else{
n = (n - 1)%listView.size();
} setCurView(n);
setRoundView(n);
handler.postDelayed(myRunnable, 3000);
} } }

  这两段代码的作用:为我们添加ImagerView的点击事件做铺垫

private void setCurView(int position){
if(position<0||position>=imagerResource.length){
return;
}
vp.setCurrentItem(position);
} private void setRoundView(int position){
if(position<0||position>=imagerResource.length||currentIndex==position){
return;
}
round[position].setSelected(true);
round[currentIndex].setSelected(false);
currentIndex = position;
}

  这段代码的作用:实现图片的自动切换,有别于平常的切换,大家运行自行查看:

class MyRunnable implements Runnable{

        @Override
public void run() {
int n = currentIndex; if(n == imagerResource.length-1){
flag = false;
}else{
if(n == 0){
flag = true;
}
}
if(flag){
n = (n + 1)%listView.size();
}else{
n = (n - 1)%listView.size();
} setCurView(n);
setRoundView(n);
handler.postDelayed(myRunnable, 3000);
} }

  最后附一张效果图,供大家参考:

  

  今天的介绍就到这里,大家有什么疑问,请留言。

  

  

Androd开发之广告栏设计的更多相关文章

  1. Windows10 UWP开发 - 响应式设计

      Windows10 UWP开发 - 响应式设计 本篇随笔与大家简单讨论一下在开发适配不同分辨率.宽高比的Windows10 Universal App布局时的可行方式与小技巧.经验均从实践中总结, ...

  2. 以DDD为开发模式的设计开发步骤可以是

    以DDD为开发模式的设计开发步骤可以是:1)分析需求:2)画出用例图,系统中各个角色如何使用系统,也包括外部系统如何使用系统,也包括系统中到某个时间点自动启动的某些功能(此时角色就是时间):3)针对各 ...

  3. 用thinkphp进行微信开发的整体设计思考

    用thinkphp进行微信开发的整体设计思考 http://www.2cto.com/weixin/201504/388423.html 2015-04-09      0个评论       作者:明 ...

  4. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  5. 前端开发组件化设计vue,react,angular原则漫谈

    前端开发组件化设计vue,react,angular原则漫谈 https://www.toutiao.com/a6346443500179505410/?tt_from=weixin&utm_ ...

  6. Java-异常机制详解以及开发时异常设计的原则要求

    Java-异常机制详解以及开发时异常设计的原则要求 http://blog.csdn.net/Jack__Frost/article/details/52760930?locationNum=6

  7. 3.NetDh框架之缓存操作类和二次开发模式简单设计(附源码和示例代码)

    前言 NetDh框架适用于C/S.B/S的服务端框架,可用于项目开发和学习.目前包含以下四个模块 1.数据库操作层封装Dapper,支持多种数据库类型.多库实例,简单强大: 此部分具体说明可参考博客: ...

  8. 常用网站--前端开发类+网页设计类+平面素材类+flash类

    前端开发类 animate CSS 前端开发网 我爱CSS 大家网 W3School jQuery开发技术详解教程视频 jQuery中文社区 jQueryChina 网页设计类 禅意花园 CSS Do ...

  9. DailyTick 开发实录 —— UI 设计

    上次的文章中描述了 DailyTick 的设计理念.经过两周左右的设计和开发,现在 DailyTick 的主要 UI 已经完成了原型的设计和初步的实现.既然是原型,当然看起来就有点粗糙. 主 UI 主 ...

随机推荐

  1. vs2013的安装以及单元测试

    一.安装过程 1.下载vs2013安装包,打开进行安装.安装过程时间有点长,大概用了一个小时. 2.安装完成.需要登录,可以选择以后再说. 3.选择颜色主题. 4.打开vs2013的界面. 5.添加密 ...

  2. if else 的令人防不胜防的奇葩错误

    if(a==t && b+c >a)  else flag=false; 这个语句乍一看没什么问题,如果a==t 成立b+c >a不成立-〉flag=false; 但是编译 ...

  3. solr&lucene3.6.0源码解析(四)

    本文要描述的是solr的查询插件,该查询插件目的用于生成Lucene的查询Query,类似于查询条件表达式,与solr查询插件相关UML类图如下: 如果我们强行将上面的类图纳入某种设计模式语言的话,本 ...

  4. 播放一个视频并用滚动条控制进度-OpenCV应用学习笔记二

    今天我们来做个有趣的程序实现:利用OpenCV读取本地文件夹的视频文件,并且在窗口中创建拖动控制条来显示并且控制视频文件的读取进度. 此程序调试花费了笔者近一天时间,其实大体程序都已经很快写出,结果执 ...

  5. 重建Windows 8的图标缓存

    Windows 8的图标缓存路径与Win7不同,重置方法如下: rem 关闭explorer.exe taskkill /f /im explorer.exe attrib -h -i %userpr ...

  6. iptables 四表五链

    netfilter/iptables IP 信息包过滤系统是一种功能强大的工具,可用于添加.编辑和除去规则,这些规则是在做信息包过滤决定时,防火墙所遵循和组成的规则.这些规则存储在专用的信息包过滤表中 ...

  7. 工具mark

    http://zh.snipaste.com/ 截图工具 https://brookhong.github.io/2014/04/28/keycast-on-windows-cn.html 按键显示 ...

  8. ASP.NET MVC 学习笔记(一)

    很久很久没有在博客园写过东西了,很多大虾也说过展示自己最好的地方就是有一个博客作为笔记,展示一下自己的学习和研究成果. 最近决心将公司的一款产品改用MVC的方式实现,于是乎就开始在园子里面疯狂的寻找各 ...

  9. 使用抓包工具SpyNet对你的网络进行监控

    步骤1:下载并安装SpyNet Sniffer嗅探器之后,第一次运行SpyNet Sniffer后,将会弹出[Settings(设置)]对话框,在其中选择需要监听对象,如图所示. 步骤2:单击[Act ...

  10. 自定义 Azure Table storage 查询过滤条件

    本文是在Azure Table storage 基本用法一文的基础上,介绍如何自定义 Azure Table storage 的查询过滤条件.如果您还不太清楚 Azure Table storage ...