Androd开发之广告栏设计
对于做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开发之广告栏设计的更多相关文章
- Windows10 UWP开发 - 响应式设计
Windows10 UWP开发 - 响应式设计 本篇随笔与大家简单讨论一下在开发适配不同分辨率.宽高比的Windows10 Universal App布局时的可行方式与小技巧.经验均从实践中总结, ...
- 以DDD为开发模式的设计开发步骤可以是
以DDD为开发模式的设计开发步骤可以是:1)分析需求:2)画出用例图,系统中各个角色如何使用系统,也包括外部系统如何使用系统,也包括系统中到某个时间点自动启动的某些功能(此时角色就是时间):3)针对各 ...
- 用thinkphp进行微信开发的整体设计思考
用thinkphp进行微信开发的整体设计思考 http://www.2cto.com/weixin/201504/388423.html 2015-04-09 0个评论 作者:明 ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- 前端开发组件化设计vue,react,angular原则漫谈
前端开发组件化设计vue,react,angular原则漫谈 https://www.toutiao.com/a6346443500179505410/?tt_from=weixin&utm_ ...
- Java-异常机制详解以及开发时异常设计的原则要求
Java-异常机制详解以及开发时异常设计的原则要求 http://blog.csdn.net/Jack__Frost/article/details/52760930?locationNum=6
- 3.NetDh框架之缓存操作类和二次开发模式简单设计(附源码和示例代码)
前言 NetDh框架适用于C/S.B/S的服务端框架,可用于项目开发和学习.目前包含以下四个模块 1.数据库操作层封装Dapper,支持多种数据库类型.多库实例,简单强大: 此部分具体说明可参考博客: ...
- 常用网站--前端开发类+网页设计类+平面素材类+flash类
前端开发类 animate CSS 前端开发网 我爱CSS 大家网 W3School jQuery开发技术详解教程视频 jQuery中文社区 jQueryChina 网页设计类 禅意花园 CSS Do ...
- DailyTick 开发实录 —— UI 设计
上次的文章中描述了 DailyTick 的设计理念.经过两周左右的设计和开发,现在 DailyTick 的主要 UI 已经完成了原型的设计和初步的实现.既然是原型,当然看起来就有点粗糙. 主 UI 主 ...
随机推荐
- Kernel Functions for Machine Learning Applications
In recent years, Kernel methods have received major attention, particularly due to the increased pop ...
- java和android及IOS对接RSA加密经验
1.网上找的java生成RSA密钥对的例子,产生的字附串实际上是hax后和密钥串 你可以将他们当成静态字附串存在java代码里 2.android和java可以代码复用,IOS对接比较麻烦 3.IOS ...
- Python list嵌套 三维数组
cores_multicast = [[] for i in xrange(64)] temp_list = [0, 1] temp_list2 = [0, 3] cores_multicast[0] ...
- unity发布安卓 截图保存到本地
using System.IO; //获取系统时间并命名相片名 System.DateTime now = System.DateTime.Now; string times = now.ToStri ...
- Python学习笔记1——Python基础
一. 数据类型和变量 整数:十六进制用0x前缀和0-9,a-f表示 浮点数:小数,科学计数法:10用e代替:整数和浮点数在计算机内部存储的方式是不同的,整数运算永远是精确的(包括除法),浮点数运算则可 ...
- Dynamic CRM 2013学习笔记 系列汇总
这里列出所有 Dynamic CRM 2013学习笔记 系列文章,方便大家查阅.有任何建议.意见.需要,欢迎大家提交评论一起讨论. 本文原文地址: Dynamic CRM 2013学习笔记 系列汇总 ...
- android知识杂记(三)
记录项目中的android零碎知识点,用以备忘. 1.android 自定义权限 app可以自定义属于自己的权限: <permission android:description="s ...
- 作业三:PSP记录耗时情况
PSP2.1 Personal Software Process Stage Time planning 计划 15min Estimate 估计这个任务多久完成 130min Developing ...
- Facebook 发布「流程」
时不时就会在面试过程中碰到有候选人问 Facebook 是否采用 Scrum 之类的敏捷方法,偶尔也会有中国的朋友问及 Facebook 上线流程.我通常会简单说几句,然后说「如果你真感兴趣的话,去搜 ...
- [ACM_几何] The Deadly Olympic Returns!!! (空间相对运动之最短距离)
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=28235#problem/B 题目大意: 有两个同时再空间中匀速运动的导弹,告诉一个时间以 ...