引导界面(四)仿人人网V5.9.2最新版引导界面
这一篇我将会以人人网的引导界面为实例来展开详细的讲解,人人网的引导界面比较的新颖,不同于其他应用程序千篇一律的靠滑动来引导用户,而是以一个一个比较生动形象的动画效果展示在用户们的面前,有一种给人眼前一亮的感觉,话不多说,进入正题。
一、实现的效果图
欢迎界面:
引导界面1
引导界面 2
引导界面 3
二 、项目的目录结构
三、具体的编码实现
1、欢迎界面的xml布局,activity_welcome:
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="@drawable/v5_6_2_welcome"
- android:orientation="vertical" />
2、引导界面的xml布局,activity_guide.xml:
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical" >
- <ImageView
- android:id="@+id/iv_guide_picture"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="1.0"
- android:scaleType="fitXY" />
- <LinearLayout
- android:id="@+id/ll_bottom_action_bar"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_alignParentBottom="true"
- android:orientation="horizontal"
- android:padding="7dip" >
- <Button
- android:id="@+id/btn_register"
- android:layout_width="fill_parent"
- android:layout_height="45dip"
- android:layout_weight="1.5"
- android:background="@drawable/guide_btn_blue"
- android:gravity="center"
- android:singleLine="true"
- android:text="注 册"
- android:textColor="#FFFFFF"
- android:textSize="15.0sp" />
- <Button
- android:id="@+id/btn_look_at_the_people_i_know"
- android:layout_width="fill_parent"
- android:layout_height="45dip"
- android:layout_marginLeft="8dip"
- android:layout_marginRight="8dip"
- android:layout_weight="1.0"
- android:background="@drawable/guide_btn_white"
- android:gravity="center"
- android:singleLine="true"
- android:text="看看我认识的人"
- android:textColor="#000000"
- android:textSize="15.0sp" />
- <Button
- android:id="@+id/btn_login"
- android:layout_width="fill_parent"
- android:layout_height="45dip"
- android:layout_weight="1.5"
- android:background="@drawable/guide_btn_blue"
- android:gravity="center"
- android:singleLine="true"
- android:text="登 录"
- android:textColor="#FFFFFF"
- android:textSize="15.0sp" />
- </LinearLayout>
- </RelativeLayout>
3、在这里还要创建两个xml资源文件文件来实现自定义按钮的效果,关于自定义按钮的效果实现我会在后面的UI专题详细介绍,这里就不在赘述, guide_btn_blue.xml:
- <?xml version="1.0" encoding="utf-8"?>
- <selector xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:drawable="@drawable/v5_0_1_guide_blue_default" android:state_focused="true" android:state_pressed="false"/>
- <item android:drawable="@drawable/v5_0_1_guide_blue_press" android:state_pressed="true"/>
- <item android:drawable="@drawable/v5_0_1_guide_blue_default"/>
- </selector>
guide_btn_white:
- <?xml version="1.0" encoding="utf-8"?>
- <selector xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:drawable="@drawable/v5_0_1_guide_black_default" android:state_focused="true" android:state_pressed="false"/>
- <item android:drawable="@drawable/v5_0_1_guide_black_press" android:state_pressed="true"/>
- <item android:drawable="@drawable/v5_0_1_guide_black_default"/>
- </selector>
4、然后是动画效果的xml资源文件,关于自定义动画效果的实现我也会在后面的UI专题中详细介绍,这里也就不再赘述 渐入动画资源文件,guide_fade_in.xml:
- <?xml version="1.0" encoding="utf-8"?>
- <set xmlns:android="http://schemas.android.com/apk/res/android" >
- <alpha android:fromAlpha="0.0"
- android:toAlpha="1.0" />
- </set>
渐隐动画资源文件,guide_fade_out.xml:
- <?xml version="1.0" encoding="utf-8"?>
- <set xmlns:android="http://schemas.android.com/apk/res/android" >
- <scale
- android:fillAfter="false"
- android:fromXScale="1.1"
- android:fromYScale="1.1"
- android:interpolator="@android:anim/decelerate_interpolator"
- android:pivotX="50.0%"
- android:pivotY="50.0%"
- android:toXScale="1.1"
- android:toYScale="1.1" />
- <alpha
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:fromAlpha="1.0"
- android:toAlpha="0.0" />
- </set>
放大动画资源文件,guide_fade_in_scale:
- <?xml version="1.0" encoding="utf-8"?>
- <set xmlns:android="http://schemas.android.com/apk/res/android" >
- <scale
- android:fillAfter="false"
- android:fromXScale="1.0"
- android:fromYScale="1.0"
- android:interpolator="@android:anim/decelerate_interpolator"
- android:pivotX="50.0%"
- android:pivotY="50.0%"
- android:toXScale="1.1"
- android:toYScale="1.1"/>
- </set>
5、 开始启动的欢迎界WelcomeActivity.java:
- package com.yangyu.myguideview03;
- import android.app.Activity;
- import android.content.Intent;
- import android.os.Bundle;
- import android.os.CountDownTimer;
- /**
- * @author yangyu
- * 功能描述:欢迎界面Activity(Logo)
- */
- public class WelcomeActivity extends Activity {
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_welcome);
- /**
- * millisInFuture:从开始调用start()到倒计时完成并onFinish()方法被调用的毫秒数
- * countDownInterval:接收onTick(long)回调的间隔时间
- */
- new CountDownTimer(5000, 1000) {
- @Override
- public void onTick(long millisUntilFinished) {
- }
- @Override
- public void onFinish() {
- Intent intent = new Intent(WelcomeActivity.this, GuideActivity.class);
- startActivity(intent);
- WelcomeActivity.this.finish();
- }
- }.start();
- }
- }
6、引导界面,GuideActivity.java:
- package com.yangyu.myguideview03;
- import android.app.Activity;
- import android.graphics.drawable.Drawable;
- import android.os.Bundle;
- import android.view.View;
- import android.view.View.OnClickListener;
- import android.view.animation.Animation;
- import android.view.animation.Animation.AnimationListener;
- import android.view.animation.AnimationUtils;
- import android.widget.Button;
- import android.widget.ImageView;
- import android.widget.Toast;
- /**
- * @author yangyu
- * 功能描述:导引界面(每张图片都执行的动画顺序,渐现、放大和渐隐,结束后切换图片和文字
- * 又开始执行 渐现、放大和渐隐,当最后一张执行完渐隐,切换到第一张,从而达到循环效果)
- */
- public class GuideActivity extends Activity implements OnClickListener{
- //定义注册、登录和看看我认识的人按钮
- private Button btnRegister,btnLogin,btnIKnowPeople;
- //显示图片的ImageView组件
- private ImageView ivGuidePicture;
- //要展示的一组图片资源
- private Drawable[] pictures;
- //每张展示图片要执行的一组动画效果
- private Animation[] animations;
- //当前执行的是第几张图片(资源索引)
- private int currentItem = 0;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_guide);
- initView();
- initData();
- }
- /**
- * 初始化组件
- */
- private void initView(){
- //实例化ImageView引导图片
- ivGuidePicture = (ImageView) findViewById(R.id.iv_guide_picture);
- //实例化按钮
- btnRegister = (Button) findViewById(R.id.btn_register);
- btnIKnowPeople = (Button) findViewById(R.id.btn_look_at_the_people_i_know);
- btnLogin = (Button) findViewById(R.id.btn_login);
- //实例化引导图片数组
- pictures = new Drawable[] { getResources().getDrawable(R.drawable.v5_3_0_guide_pic1),getResources().getDrawable(R.drawable.v5_3_0_guide_pic2),
- getResources().getDrawable(R.drawable.v5_3_0_guide_pic3)};
- //实例化动画效果数组
- animations = new Animation[] { AnimationUtils.loadAnimation(this, R.anim.guide_fade_in),
- AnimationUtils.loadAnimation(this, R.anim.guide_fade_in_scale),
- AnimationUtils.loadAnimation(this, R.anim.guide_fade_out) };
- }
- /**
- * 初始化数据
- */
- private void initData(){
- //给按钮设置监听
- btnRegister.setOnClickListener(this);
- btnIKnowPeople.setOnClickListener(this);
- btnLogin.setOnClickListener(this);
- //给每个动画效果设置播放时间
- animations[0].setDuration(1500);
- animations[1].setDuration(3000);
- animations[2].setDuration(1500);
- //给每个动画效果设置监听事件
- animations[0].setAnimationListener(new GuideAnimationListener(0));
- animations[1].setAnimationListener(new GuideAnimationListener(1));
- animations[2].setAnimationListener(new GuideAnimationListener(2));
- //设置图片动画初始化默认值为0
- ivGuidePicture.setImageDrawable(pictures[currentItem]);
- ivGuidePicture.startAnimation(animations[0]);
- }
- /**
- * 实现了动画监听接口,重写里面的方法
- */
- class GuideAnimationListener implements AnimationListener {
- private int index;
- public GuideAnimationListener(int index) {
- this.index = index;
- }
- @Override
- public void onAnimationStart(Animation animation) {
- }
- //重写动画结束时的监听事件,实现了动画循环播放的效果
- @Override
- public void onAnimationEnd(Animation animation) {
- if (index < (animations.length - 1)) {
- ivGuidePicture.startAnimation(animations[index + 1]);
- } else {
- currentItem++;
- if (currentItem > (pictures.length - 1)) {
- currentItem = 0;
- }
- ivGuidePicture.setImageDrawable(pictures[currentItem]);
- ivGuidePicture.startAnimation(animations[0]);
- }
- }
- @Override
- public void onAnimationRepeat(Animation animation) {
- }
- }
- @Override
- public void onClick(View v) {
- switch (v.getId()) {
- case R.id.btn_register:
- Toast.makeText(this, "点击了注册按钮", Toast.LENGTH_SHORT).show();
- break;
- case R.id.btn_look_at_the_people_i_know:
- Toast.makeText(this, "点击了我认识的人按钮", Toast.LENGTH_SHORT).show();
- break;
- case R.id.btn_login:
- Toast.makeText(this, "点击了登录按钮", Toast.LENGTH_SHORT).show();
- break;
- default:
- break;
- }
- }
- }
下一篇将会对整个引导界面的开发专题做一个完结篇,敬请期待。
引导界面(四)仿人人网V5.9.2最新版引导界面相关推荐
- 【Android UI设计与开发】第04期:引导界面(四)仿人人网V5.9.2最新版引导界面
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/8988147 这一篇我将会以人人网的引导界面为实例来展开详细的讲解, ...
- 仿人人网java_Android UI设计与开发之仿人人网V5.9.2最新版引导界面
这一篇我将会以人人网的引导界面为实例来展开详细的讲解,人人网的引导界面比较的新颖,不同于其他应用程序千篇一律的靠滑动来引导用户,而是以一个一个比较生动形象的动画效果展示在用户们的面前,有一种给人眼前一 ...
- 高仿人人网客户端安卓源码
高仿人人网客户端,有兴趣的盆友可以研究下,里面主要包含的一些UI设计与交互.(注:项目中有少许问题,apk能运行,希望开发者可以参考代码研究一下.) 源码下载:http://code.662p.com ...
- 高仿人人网客户端Android版项目源码
高仿人人网客户端,有兴趣的盆友可以研究下,里面主要包含的一些UI设计与交互.(注:项目中有少许问题,apk能运行,希望开发者可以参考代码研究一下.) 源码下载:http://code.662p.com ...
- 高仿人人网客户端安卓源码项目
高仿人人网客户端,有兴趣的盆友可以研究下,里面主要包含的一些UI设计与交互源码下载:http://code.662p.com/list/11_1.html <ignore_js_op> ...
- Node.js+MySQL开发的B2C商城系统源码+数据库(微信小程序端+服务端),界面高仿网易严选商城
下载地址:Node.js+MySQL开发的B2C商城系统源码+数据库(微信小程序端+服务端) NideShop商城(微信小程序端) 界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易 ...
- .net winform panel 不刷新_winform项目——仿QQ即时通讯程序04:登录界面补充
上一篇文章给出了Login登录界面的详细制作过程,目的是让初学者体验如何对窗体上的控件进行布局,过程非常详细,如果对winform布局不熟悉的同学可以详细阅读.本篇文章将继续完成Login窗体上的注册 ...
- html仿b站页面代码,B站首页界面设计:附详细教程
文件名大小更新时间 B站首页界面设计:附详细教程\1.png2994402016-12-29 B站首页界面设计:附详细教程\2.png2492252016-12-29 B站首页界面设计:附详细教程\w ...
- UI界面编写(仿QQ聊天界面)
UI界面编写实战 这里我们模拟QQ聊天的主界面,编写一个简单的聊天界面. 项目描述 首先搭建我们的主界面,在最上边放一个标题栏,然后是一个ListView,用于展示发送的消息,最下边是选择要发送的表情 ...
最新文章
- 百度搜索查询命令——组合型
- python编写es脚本_es数据迁移脚本(python)
- python 删除一段话中某一个字符串开始之后的所有字符串
- php网站实施说明书_PHP中$_SERVER使用说明
- 大四中软实习笔记20130226
- 前端学习(2572):如何使用vuex
- 【OpenJ_Bailian - 4117】简单的整数划分问题(dp)
- gcc在64位系统上一个史诗级WARNING
- FreeBSD portsnap方法更新ports
- android怎么增量编译,Android Transform增量编译
- PAT 7-14 公路村村通
- 将数组分成两部分,使得这两部分的和的差最小
- Java8新特性学习第一天
- 愿你学会优雅地控制自己的情绪
- 计算机安全类论文题目,★计算机络安全论文题目计算机络安全毕业论文题目大全计算机络安全论文选题参考...
- Linux下的Makefile编写与优化
- Tecohoo VD-182U 全高清视频会议摄像机
- 七夕小案例:用代码给心爱的她画一个爱心
- 计算机博士与管理科学与工程博士,南昌大学《管理科学与工程》专业博士研究生培养方案...
- 安全面试、笔试、学习知识点大杂烩
热门文章
- 【Android 电量优化】电量优化 ( Battery Historian 环境要求 | 电量分析报告 | 电量优化三原则 | 电量优化注意事项 )
- 【Android 性能优化】应用启动优化 ( 安卓应用启动分析 | ActivityThread 主函数分析 | 应用初始化 | 启动优化项目 )
- 【设计模式】装饰者模式 ( 概念 | 适用场景 | 优缺点 | 与继承对比 | 定义流程 | 运行机制 | 案例分析 )
- 你见过的最全面的python重点
- vuex数据管理-数据适配
- win7系统怎么获取system权限?
- 机器人动力学建模实例:二连杆机械臂
- MySQL 报错 1055
- Distinct Subsequences
- 【Eclipse中使用Git之一】把远程仓库的项目,clone到eclipse里面