对于做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. Kernel Functions for Machine Learning Applications

    In recent years, Kernel methods have received major attention, particularly due to the increased pop ...

  2. java和android及IOS对接RSA加密经验

    1.网上找的java生成RSA密钥对的例子,产生的字附串实际上是hax后和密钥串 你可以将他们当成静态字附串存在java代码里 2.android和java可以代码复用,IOS对接比较麻烦 3.IOS ...

  3. Python list嵌套 三维数组

    cores_multicast = [[] for i in xrange(64)] temp_list = [0, 1] temp_list2 = [0, 3] cores_multicast[0] ...

  4. unity发布安卓 截图保存到本地

    using System.IO; //获取系统时间并命名相片名 System.DateTime now = System.DateTime.Now; string times = now.ToStri ...

  5. Python学习笔记1——Python基础

    一. 数据类型和变量 整数:十六进制用0x前缀和0-9,a-f表示 浮点数:小数,科学计数法:10用e代替:整数和浮点数在计算机内部存储的方式是不同的,整数运算永远是精确的(包括除法),浮点数运算则可 ...

  6. Dynamic CRM 2013学习笔记 系列汇总

    这里列出所有 Dynamic CRM 2013学习笔记 系列文章,方便大家查阅.有任何建议.意见.需要,欢迎大家提交评论一起讨论. 本文原文地址: Dynamic CRM 2013学习笔记 系列汇总 ...

  7. android知识杂记(三)

    记录项目中的android零碎知识点,用以备忘. 1.android 自定义权限 app可以自定义属于自己的权限: <permission android:description="s ...

  8. 作业三:PSP记录耗时情况

    PSP2.1 Personal Software Process Stage Time planning 计划 15min Estimate 估计这个任务多久完成 130min Developing ...

  9. Facebook 发布「流程」

    时不时就会在面试过程中碰到有候选人问 Facebook 是否采用 Scrum 之类的敏捷方法,偶尔也会有中国的朋友问及 Facebook 上线流程.我通常会简单说几句,然后说「如果你真感兴趣的话,去搜 ...

  10. [ACM_几何] The Deadly Olympic Returns!!! (空间相对运动之最短距离)

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=28235#problem/B 题目大意: 有两个同时再空间中匀速运动的导弹,告诉一个时间以 ...