程序博客网 > 网络英雄洛克人

仿微信首次启动滑动界面效果

来源：互联网 发布：网络英雄洛克人 编辑：程序博客网 时间：2024/06/01 08:20
用过微信的都知道，第一次启动时会出现一系列操作说明或功能说明的画面，滑到底然后就进入正式界面，今天我也参考网络资源模仿着做了一个。

首先看下工程结构图：


首先看布局文件main.xml

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@+id/mainRLayout"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     android:background="#000000" >  
  7.   
  8.     <!-- 自定义滑动控件 -->  
  9.     <com.ericssonlabs.ScrollLayout  
  10.         xmlns:android="http://schemas.android.com/apk/res/android"  
  11.         android:id="@+id/ScrollLayout"  
  12.         android:layout_width="fill_parent"  
  13.         android:layout_height="fill_parent"  
  14.         android:visibility="visible" >  
  15.     <!-- 每一页的布局均以一个RelativeLayout来控制，后面类似，这里一共四个 -->  
  16.         <RelativeLayout  
  17.             android:layout_width="fill_parent"  
  18.             android:layout_height="fill_parent"  
  19.             android:background="@drawable/w01" >  
  20.   
  21.             <TextView  
  22.                 android:layout_width="wrap_content"  
  23.                 android:layout_height="wrap_content"  
  24.                 android:layout_alignParentBottom="true"  
  25.                 android:layout_centerHorizontal="true"  
  26.                 android:layout_marginBottom="90dp"  
  27.                 android:text="微信，不只是个聊天工具"  
  28.                 android:textColor="#FFFFFF"  
  29.                 android:textSize="18sp" />  
  30.         </RelativeLayout>  
  31.   
  32.         <RelativeLayout  
  33.             android:layout_width="fill_parent"  
  34.             android:layout_height="fill_parent"  
  35.             android:background="@drawable/w02" >  
  36.   
  37.             <TextView  
  38.                 android:id="@+id/t1"  
  39.                 android:layout_width="wrap_content"  
  40.                 android:layout_height="wrap_content"  
  41.                 android:layout_alignParentTop="true"  
  42.                 android:layout_centerHorizontal="true"  
  43.                 android:layout_marginTop="96dp"  
  44.                 android:gravity="center_horizontal"  
  45.                 android:text="第一次，你可以使用透明背景的动画表情，来表达你此刻的心情"  
  46.                 android:textColor="#FFFFFF"  
  47.                 android:textSize="18sp" />  
  48.         </RelativeLayout>  
  49.   
  50.         <RelativeLayout  
  51.             android:layout_width="fill_parent"  
  52.             android:layout_height="fill_parent"  
  53.             android:background="@drawable/w03" />  
  54.   
  55.         <RelativeLayout  
  56.             android:layout_width="fill_parent"  
  57.             android:layout_height="fill_parent"  
  58.             android:background="@drawable/w01" >  
  59.         <!-- 点击该按钮后就进入OtherActivit了 -->  
  60.             <Button  
  61.                 android:id="@+id/startBtn"  
  62.                 android:layout_width="wrap_content"  
  63.                 android:layout_height="wrap_content"  
  64.                 android:layout_alignParentBottom="true"  
  65.                 android:layout_centerHorizontal="true"  
  66.                 android:layout_gravity="center_vertical"  
  67.                 android:layout_marginBottom="90dp"  
  68.                 android:layout_marginLeft="8dp"  
  69.                 android:layout_marginRight="8dp"  
  70.                 android:background="@drawable/button_bg"  
  71.                 android:text="开始我的微信生活"  
  72.                 android:textColor="#FFFFFF"  
  73.                 android:textSize="18sp" />  
  74.         </RelativeLayout>  
  75.     </com.ericssonlabs.ScrollLayout>  
  76.       
  77.     <!-- 这个布局是下面显示的小圆点的布局，其中ImageView的数量要与上面RelativeLayout的数量对应 -->  
  78.     <LinearLayout  
  79.         android:id="@+id/llayout"  
  80.         android:layout_width="wrap_content"  
  81.         android:layout_height="wrap_content"  
  82.         android:layout_alignParentBottom="true"  
  83.         android:layout_centerHorizontal="true"  
  84.         android:layout_marginBottom="25dp"  
  85.         android:orientation="horizontal"  
  86.         android:visibility="visible" >  
  87.   
  88.         <ImageView  
  89.             android:layout_width="wrap_content"  
  90.             android:layout_height="wrap_content"  
  91.             android:layout_gravity="center_vertical"  
  92.             android:clickable="true"  
  93.             android:padding="5dp"  
  94.             android:src="@drawable/page_indicator_bg" />  
  95.   
  96.         <ImageView  
  97.             android:layout_width="wrap_content"  
  98.             android:layout_height="wrap_content"  
  99.             android:layout_gravity="center_vertical"  
  100.             android:clickable="true"  
  101.             android:padding="5dp"  
  102.             android:src="@drawable/page_indicator_bg" />  
  103.   
  104.         <ImageView  
  105.             android:layout_width="wrap_content"  
  106.             android:layout_height="wrap_content"  
  107.             android:layout_gravity="center_vertical"  
  108.             android:clickable="true"  
  109.             android:padding="5dp"  
  110.             android:src="@drawable/page_indicator_bg" />  
  111.   
  112.         <ImageView  
  113.             android:layout_width="wrap_content"  
  114.             android:layout_height="wrap_content"  
  115.             android:layout_gravity="center_vertical"  
  116.             android:clickable="true"  
  117.             android:padding="5dp"  
  118.             android:src="@drawable/page_indicator_bg" />  
  119.     </LinearLayout>  
  120.   
  121.     <!-- 这个布局是最后点击按钮后启动新界面的一个动画效果 -->  
  122.     <LinearLayout  
  123.         android:id="@+id/animLayout"  
  124.         android:layout_width="fill_parent"  
  125.         android:layout_height="fill_parent"  
  126.         android:visibility="gone" >  
  127.   
  128.         <LinearLayout  
  129.             android:id="@+id/leftLayout"  
  130.             android:layout_width="wrap_content"  
  131.             android:layout_height="fill_parent" >  
  132.   
  133.             <ImageView  
  134.                 android:layout_width="wrap_content"  
  135.                 android:layout_height="wrap_content"  
  136.                 android:src="@drawable/whatsnew_left" />  
  137.   
  138.             <ImageView  
  139.                 android:layout_width="wrap_content"  
  140.                 android:layout_height="wrap_content"  
  141.                 android:src="@drawable/whatsnew_left_m" />  
  142.         </LinearLayout>  
  143.   
  144.         <LinearLayout  
  145.             android:id="@+id/rightLayout"  
  146.             android:layout_width="fill_parent"  
  147.             android:layout_height="fill_parent" >  
  148.   
  149.             <ImageView  
  150.                 android:layout_width="wrap_content"  
  151.                 android:layout_height="wrap_content"  
  152.                 android:src="@drawable/whatsnew_right_m" />  
  153.   
  154.             <ImageView  
  155.                 android:layout_width="wrap_content"  
  156.                 android:layout_height="wrap_content"  
  157.                 android:src="@drawable/whatsnew_right" />  
  158.         </LinearLayout>  
  159.     </LinearLayout>  
  160.   
  161. </RelativeLayout>  

接下来是自定义控件ScrollLayout.java，这个是继承了ViewGroup的一个自定义控件，主要实现了左右滑动以及展示内容的功能，源码如下：

[java] view plaincopy
  1. public class ScrollLayoutActivity extends Activity implements OnViewChangeListener{  
  2.      
  3.     private ScrollLayout mScrollLayout;  
  4.     private ImageView[] imgs;  
  5.     private int count;  
  6.     private int currentItem;  
  7.     private Button startBtn;  
  8.     private RelativeLayout mainRLayout;  
  9.     private LinearLayout pointLLayout;  
  10.     private LinearLayout leftLayout;  
  11.     private LinearLayout rightLayout;  
  12.     private LinearLayout animLayout;  
  13.   
  14.     @Override  
  15.     public void onCreate(Bundle savedInstanceState) {  
  16.         super.onCreate(savedInstanceState);  
  17.         setContentView(R.layout.main);  
  18.         initView();  
  19.     }  
  20.   
  21.     private void initView() {  
  22.         mScrollLayout = (ScrollLayout) findViewById(R.id.ScrollLayout);  
  23.         pointLLayout = (LinearLayout) findViewById(R.id.llayout);  
  24.         mainRLayout = (RelativeLayout) findViewById(R.id.mainRLayout);  
  25.         startBtn = (Button) findViewById(R.id.startBtn);  
  26.         startBtn.setOnClickListener(onClick);  
  27.         animLayout = (LinearLayout) findViewById(R.id.animLayout);  
  28.         leftLayout = (LinearLayout) findViewById(R.id.leftLayout);  
  29.         rightLayout = (LinearLayout) findViewById(R.id.rightLayout);  
  30.         count = mScrollLayout.getChildCount();  
  31.         imgs = new ImageView[count];  
  32.         for (int i = 0; i < count; i++) {  
  33.             imgs[i] = (ImageView) pointLLayout.getChildAt(i);  
  34.             imgs[i].setEnabled(true);  
  35.             imgs[i].setTag(i);  
  36.         }  
  37.         currentItem = 0;  
  38.         imgs[currentItem].setEnabled(false);  
  39.         mScrollLayout.SetOnViewChangeListener(this);  
  40.     }  
  41.   
  42.     private View.OnClickListener onClick = new View.OnClickListener() {  
  43.         @Override  
  44.         public void onClick(View v) {  
  45.             switch (v.getId()) {  
  46.             case R.id.startBtn:  
  47.                 mScrollLayout.setVisibility(View.GONE);  
  48.                 pointLLayout.setVisibility(View.GONE);  
  49.                 animLayout.setVisibility(View.VISIBLE);  
  50.                 mainRLayout.setBackgroundResource(R.drawable.whatsnew_bg);  
  51.                 Animation leftOutAnimation = AnimationUtils.loadAnimation(  
  52.                         getApplicationContext(), R.anim.translate_left);  
  53.                 Animation rightOutAnimation = AnimationUtils.loadAnimation(  
  54.                         getApplicationContext(), R.anim.translate_right);  
  55.                 leftLayout.setAnimation(leftOutAnimation);  
  56.                 rightLayout.setAnimation(rightOutAnimation);  
  57.                 leftOutAnimation.setAnimationListener(new AnimationListener() {  
  58.                     @Override  
  59.                     public void onAnimationStart(Animation animation) {  
  60.                         mainRLayout.setBackgroundColor(Color.BLACK);  
  61.                     }  
  62.   
  63.                     @Override  
  64.                     public void onAnimationRepeat(Animation animation) {  
  65.                     }  
  66.   
  67.                     @Override  
  68.                     public void onAnimationEnd(Animation animation) {  
  69.                         leftLayout.setVisibility(View.GONE);  
  70.                         rightLayout.setVisibility(View.GONE);  
  71.                         Intent intent = new Intent(  
  72.                                 ScrollLayoutActivity.this,  
  73.                                 OtherActivity.class);  
  74.                         ScrollLayoutActivity.this.startActivity(intent);  
  75.                         ScrollLayoutActivity.this.finish();  
  76.                         //结束老Activity启动新Activity之前的一个过度动画  
  77.                         overridePendingTransition(R.anim.zoom_out_enter,R.anim.zoom_out_exit);  
  78.                     }  
  79.                 });  
  80.                 break;  
  81.             }  
  82.         }  
  83.     };  
  84.   
  85.     @Override  
  86.     public void OnViewChange(int position) {  
  87.         setcurrentPoint(position);  
  88.     }  
  89.   
  90.     private void setcurrentPoint(int position) {  
  91.         if (position < 0 || position > count - 1 || currentItem == position) {  
  92.             return;  
  93.         }  
  94.         imgs[currentItem].setEnabled(true);  
  95.         imgs[position].setEnabled(false);  
  96.         currentItem = position;  
  97.     }  
  98. }  

然后是定义的一个回调接口，这个接口的主要作用在代码中有注释，源码如下：

[java] view plaincopy
  1. package com.ericssonlabs;  
  2.   
  3. public interface OnViewChangeListener {  
  4.     //控制底部小圆点的回调方法  
  5.     public void OnViewChange(int view);  
  6. }  

最后是如何使用该自定义控件，在Activity中调用并使用，代码如下：

[java] view plaincopy
  1. public class ScrollLayoutActivity extends Activity implements OnViewChangeListener{  
  2.      
  3.     private ScrollLayout mScrollLayout;  
  4.     private ImageView[] imgs;  
  5.     private int count;  
  6.     private int currentItem;  
  7.     private Button startBtn;  
  8.     private RelativeLayout mainRLayout;  
  9.     private LinearLayout pointLLayout;  
  10.     private LinearLayout leftLayout;  
  11.     private LinearLayout rightLayout;  
  12.     private LinearLayout animLayout;  
  13.   
  14.     @Override  
  15.     public void onCreate(Bundle savedInstanceState) {  
  16.         super.onCreate(savedInstanceState);  
  17.         setContentView(R.layout.main);  
  18.         initView();  
  19.     }  
  20.   
  21.     private void initView() {  
  22.         mScrollLayout = (ScrollLayout) findViewById(R.id.ScrollLayout);  
  23.         pointLLayout = (LinearLayout) findViewById(R.id.llayout);  
  24.         mainRLayout = (RelativeLayout) findViewById(R.id.mainRLayout);  
  25.         startBtn = (Button) findViewById(R.id.startBtn);  
  26.         startBtn.setOnClickListener(onClick);  
  27.         animLayout = (LinearLayout) findViewById(R.id.animLayout);  
  28.         leftLayout = (LinearLayout) findViewById(R.id.leftLayout);  
  29.         rightLayout = (LinearLayout) findViewById(R.id.rightLayout);  
  30.         count = mScrollLayout.getChildCount();  
  31.         imgs = new ImageView[count];  
  32.         for (int i = 0; i < count; i++) {  
  33.             imgs[i] = (ImageView) pointLLayout.getChildAt(i);  
  34.             imgs[i].setEnabled(true);  
  35.             imgs[i].setTag(i);  
  36.         }  
  37.         currentItem = 0;  
  38.         imgs[currentItem].setEnabled(false);  
  39.         mScrollLayout.SetOnViewChangeListener(this);  
  40.     }  
  41.   
  42.     private View.OnClickListener onClick = new View.OnClickListener() {  
  43.         @Override  
  44.         public void onClick(View v) {  
  45.             switch (v.getId()) {  
  46.             case R.id.startBtn:  
  47.                 mScrollLayout.setVisibility(View.GONE);  
  48.                 pointLLayout.setVisibility(View.GONE);  
  49.                 animLayout.setVisibility(View.VISIBLE);  
  50.                 mainRLayout.setBackgroundResource(R.drawable.whatsnew_bg);  
  51.                 Animation leftOutAnimation = AnimationUtils.loadAnimation(  
  52.                         getApplicationContext(), R.anim.translate_left);  
  53.                 Animation rightOutAnimation = AnimationUtils.loadAnimation(  
  54.                         getApplicationContext(), R.anim.translate_right);  
  55.                 leftLayout.setAnimation(leftOutAnimation);  
  56.                 rightLayout.setAnimation(rightOutAnimation);  
  57.                 leftOutAnimation.setAnimationListener(new AnimationListener() {  
  58.                     @Override  
  59.                     public void onAnimationStart(Animation animation) {  
  60.                         mainRLayout.setBackgroundColor(Color.BLACK);  
  61.                     }  
  62.   
  63.                     @Override  
  64.                     public void onAnimationRepeat(Animation animation) {  
  65.                     }  
  66.   
  67.                     @Override  
  68.                     public void onAnimationEnd(Animation animation) {  
  69.                         leftLayout.setVisibility(View.GONE);  
  70.                         rightLayout.setVisibility(View.GONE);  
  71.                         Intent intent = new Intent(  
  72.                                 ScrollLayoutActivity.this,  
  73.                                 OtherActivity.class);  
  74.                         ScrollLayoutActivity.this.startActivity(intent);  
  75.                         ScrollLayoutActivity.this.finish();  
  76.                         //结束老Activity启动新Activity之前的一个过度动画  
  77.                         overridePendingTransition(R.anim.zoom_out_enter,R.anim.zoom_out_exit);  
  78.                     }  
  79.                 });  
  80.                 break;  
  81.             }  
  82.         }  
  83.     };  
  84.   
  85.     @Override  
  86.     public void OnViewChange(int position) {  
  87.         setcurrentPoint(position);  
  88.     }  
  89.   
  90.     private void setcurrentPoint(int position) {  
  91.         if (position < 0 || position > count - 1 || currentItem == position) {  
  92.             return;  
  93.         }  
  94.         imgs[currentItem].setEnabled(true);  
  95.         imgs[position].setEnabled(false);  
  96.         currentItem = position;  
  97.     }  
  98. }  

关于动画这一块我还不是很熟，这里是直接copy的网上的效果，后续会专门做一个专题来研究动画，毕竟，有动画的世界才是多彩的，嘿嘿

一切就绪后，运行看看效果：

                             

                             



工程下载：代码下载


网络英雄洛克人 网络英雄洛克人
原创粉丝点击
热门IT博客
u盘内存卡数据恢复u盘内存卡数据恢复
金融数据分析 shreve金融数据分析 shreve
c语言char的用法
淘宝开店拍照教程
linux svn删除文件
淘宝修真记第二部
网络冲洗照片 隐私
直播网站 源码
手机app定位软件
淘宝夜抢购报名入口
保罗赛特莱茵家具 淘宝
iphone 网络访问限制
中国程序员数量2017
数据采集盒
删除数据库用户
长整形数据范围
腾讯php面试题2017
mac在线恢复系统
minecraft多核优化
php判断是否有小数点
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 高中的儿子不写作业怎么办 儿子总是不写作业怎么办 长鸡眼脚背肿了怎么办 脚上反复长鸡眼怎么办 脚底长鸡眼很痒怎么办 小脚趾上长鸡眼怎么办 6岁宝宝不爱学习怎么办 上班站久了腿肿怎么办 站时间长了腿肿怎么办 孩子做作业老是粗心大意怎么办 高中孩子没学习兴趣怎么办 初三孩子失去学习兴趣怎么办 初二对学习兴趣不大怎么办 脸上痒发红发肿怎么办 孩子作业拖拉爱丢三落四怎么办 腿肌肉按摩肿了怎么办 孩子上一年级成绩差怎么办 小孩脖子拧筋了怎么办 小孩塑料玩具拧不出来怎么办 一年级孩子做数学题粗心怎么办 手和脚有点肿怎么办 手破了之后肿了怎么办 手指肿了有脓怎么办 宝宝手指红肿有脓怎么办 孩子一听做作业就烦气怎么办 虎皮鹦鹉脚瘸了怎么办 虎皮鹦鹉脚受伤了怎么办 虎皮鹦鹉脚流血了怎么办 虎皮鹦鹉被风扇打到脚怎么办 虎皮鹦鹉脚脱臼了怎么办 孩子作业做得慢怎么办 员工给公司造成损失怎么办 小孩有写不完的作业家长怎么办 一年级孩子作业太粗心怎么办 孩子最近不好好做作业怎么办 工作压力大害怕做不好怎么办 孩子的数算不对怎么办? 孩子计算老是出错怎么办呢 孩子经常计算错误能怎么办 孩子老出现计算错误怎么办 孩子做作业马虎该怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里