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

2024-03-14 06:08
文章标签 启动 界面 效果 滑动 首次 仿微信

本文主要是介绍仿微信首次启动滑动界面效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

用过微信的都知道，第一次启动时会出现一系列操作说明或功能说明的画面，滑到底然后就进入正式界面，今天我也参考网络资源模仿着做了一个。

首先看下工程结构图：


首先看布局文件main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/mainRLayout"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#000000" ><!-- 自定义滑动控件 --><com.ericssonlabs.ScrollLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/ScrollLayout"android:layout_width="fill_parent"android:layout_height="fill_parent"android:visibility="visible" ><!-- 每一页的布局均以一个RelativeLayout来控制，后面类似，这里一共四个 --><RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:background="@drawable/w01" ><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:layout_marginBottom="90dp"android:text="微信，不只是个聊天工具"android:textColor="#FFFFFF"android:textSize="18sp" /></RelativeLayout><RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:background="@drawable/w02" ><TextViewandroid:id="@+id/t1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentTop="true"android:layout_centerHorizontal="true"android:layout_marginTop="96dp"android:gravity="center_horizontal"android:text="第一次，你可以使用透明背景的动画表情，来表达你此刻的心情"android:textColor="#FFFFFF"android:textSize="18sp" /></RelativeLayout><RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:background="@drawable/w03" /><RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:background="@drawable/w01" ><!-- 点击该按钮后就进入OtherActivit了 --><Buttonandroid:id="@+id/startBtn"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:layout_gravity="center_vertical"android:layout_marginBottom="90dp"android:layout_marginLeft="8dp"android:layout_marginRight="8dp"android:background="@drawable/button_bg"android:text="开始我的微信生活"android:textColor="#FFFFFF"android:textSize="18sp" /></RelativeLayout></com.ericssonlabs.ScrollLayout><!-- 这个布局是下面显示的小圆点的布局，其中ImageView的数量要与上面RelativeLayout的数量对应 --><LinearLayoutandroid:id="@+id/llayout"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:layout_marginBottom="25dp"android:orientation="horizontal"android:visibility="visible" ><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:clickable="true"android:padding="5dp"android:src="@drawable/page_indicator_bg" /><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:clickable="true"android:padding="5dp"android:src="@drawable/page_indicator_bg" /><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:clickable="true"android:padding="5dp"android:src="@drawable/page_indicator_bg" /><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:clickable="true"android:padding="5dp"android:src="@drawable/page_indicator_bg" /></LinearLayout><!-- 这个布局是最后点击按钮后启动新界面的一个动画效果 --><LinearLayoutandroid:id="@+id/animLayout"android:layout_width="fill_parent"android:layout_height="fill_parent"android:visibility="gone" ><LinearLayoutandroid:id="@+id/leftLayout"android:layout_width="wrap_content"android:layout_height="fill_parent" ><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/whatsnew_left" /><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/whatsnew_left_m" /></LinearLayout><LinearLayoutandroid:id="@+id/rightLayout"android:layout_width="fill_parent"android:layout_height="fill_parent" ><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/whatsnew_right_m" /><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/whatsnew_right" /></LinearLayout></LinearLayout></RelativeLayout>

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

public class ScrollLayoutActivity extends Activity implements OnViewChangeListener{private ScrollLayout mScrollLayout;private ImageView[] imgs;private int count;private int currentItem;private Button startBtn;private RelativeLayout mainRLayout;private LinearLayout pointLLayout;private LinearLayout leftLayout;private LinearLayout rightLayout;private LinearLayout animLayout;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);initView();}private void initView() {mScrollLayout = (ScrollLayout) findViewById(R.id.ScrollLayout);pointLLayout = (LinearLayout) findViewById(R.id.llayout);mainRLayout = (RelativeLayout) findViewById(R.id.mainRLayout);startBtn = (Button) findViewById(R.id.startBtn);startBtn.setOnClickListener(onClick);animLayout = (LinearLayout) findViewById(R.id.animLayout);leftLayout = (LinearLayout) findViewById(R.id.leftLayout);rightLayout = (LinearLayout) findViewById(R.id.rightLayout);count = mScrollLayout.getChildCount();imgs = new ImageView[count];for (int i = 0; i < count; i++) {imgs[i] = (ImageView) pointLLayout.getChildAt(i);imgs[i].setEnabled(true);imgs[i].setTag(i);}currentItem = 0;imgs[currentItem].setEnabled(false);mScrollLayout.SetOnViewChangeListener(this);}private View.OnClickListener onClick = new View.OnClickListener() {@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.startBtn:mScrollLayout.setVisibility(View.GONE);pointLLayout.setVisibility(View.GONE);animLayout.setVisibility(View.VISIBLE);mainRLayout.setBackgroundResource(R.drawable.whatsnew_bg);Animation leftOutAnimation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate_left);Animation rightOutAnimation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate_right);leftLayout.setAnimation(leftOutAnimation);rightLayout.setAnimation(rightOutAnimation);leftOutAnimation.setAnimationListener(new AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {mainRLayout.setBackgroundColor(Color.BLACK);}@Overridepublic void onAnimationRepeat(Animation animation) {}@Overridepublic void onAnimationEnd(Animation animation) {leftLayout.setVisibility(View.GONE);rightLayout.setVisibility(View.GONE);Intent intent = new Intent(ScrollLayoutActivity.this,OtherActivity.class);ScrollLayoutActivity.this.startActivity(intent);ScrollLayoutActivity.this.finish();//结束老Activity启动新Activity之前的一个过度动画overridePendingTransition(R.anim.zoom_out_enter,R.anim.zoom_out_exit);}});break;}}};@Overridepublic void OnViewChange(int position) {setcurrentPoint(position);}private void setcurrentPoint(int position) {if (position < 0 || position > count - 1 || currentItem == position) {return;}imgs[currentItem].setEnabled(true);imgs[position].setEnabled(false);currentItem = position;}
}

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

package com.ericssonlabs;public interface OnViewChangeListener {//控制底部小圆点的回调方法public void OnViewChange(int view);
}

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

public class ScrollLayoutActivity extends Activity implements OnViewChangeListener{private ScrollLayout mScrollLayout;private ImageView[] imgs;private int count;private int currentItem;private Button startBtn;private RelativeLayout mainRLayout;private LinearLayout pointLLayout;private LinearLayout leftLayout;private LinearLayout rightLayout;private LinearLayout animLayout;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);initView();}private void initView() {mScrollLayout = (ScrollLayout) findViewById(R.id.ScrollLayout);pointLLayout = (LinearLayout) findViewById(R.id.llayout);mainRLayout = (RelativeLayout) findViewById(R.id.mainRLayout);startBtn = (Button) findViewById(R.id.startBtn);startBtn.setOnClickListener(onClick);animLayout = (LinearLayout) findViewById(R.id.animLayout);leftLayout = (LinearLayout) findViewById(R.id.leftLayout);rightLayout = (LinearLayout) findViewById(R.id.rightLayout);count = mScrollLayout.getChildCount();imgs = new ImageView[count];for (int i = 0; i < count; i++) {imgs[i] = (ImageView) pointLLayout.getChildAt(i);imgs[i].setEnabled(true);imgs[i].setTag(i);}currentItem = 0;imgs[currentItem].setEnabled(false);mScrollLayout.SetOnViewChangeListener(this);}private View.OnClickListener onClick = new View.OnClickListener() {@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.startBtn:mScrollLayout.setVisibility(View.GONE);pointLLayout.setVisibility(View.GONE);animLayout.setVisibility(View.VISIBLE);mainRLayout.setBackgroundResource(R.drawable.whatsnew_bg);Animation leftOutAnimation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate_left);Animation rightOutAnimation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate_right);leftLayout.setAnimation(leftOutAnimation);rightLayout.setAnimation(rightOutAnimation);leftOutAnimation.setAnimationListener(new AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {mainRLayout.setBackgroundColor(Color.BLACK);}@Overridepublic void onAnimationRepeat(Animation animation) {}@Overridepublic void onAnimationEnd(Animation animation) {leftLayout.setVisibility(View.GONE);rightLayout.setVisibility(View.GONE);Intent intent = new Intent(ScrollLayoutActivity.this,OtherActivity.class);ScrollLayoutActivity.this.startActivity(intent);ScrollLayoutActivity.this.finish();//结束老Activity启动新Activity之前的一个过度动画overridePendingTransition(R.anim.zoom_out_enter,R.anim.zoom_out_exit);}});break;}}};@Overridepublic void OnViewChange(int position) {setcurrentPoint(position);}private void setcurrentPoint(int position) {if (position < 0 || position > count - 1 || currentItem == position) {return;}imgs[currentItem].setEnabled(true);imgs[position].setEnabled(false);currentItem = position;}
}

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

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

                             

                             



工程下载：代码下载


加入我们的QQ群或微信公众账号请查看： Ryan's zone公众账号及QQ群


欢迎关注我的新浪微博和我交流：@唐韧_Ryan



这篇关于仿微信首次启动滑动界面效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/807444。

相关文章

Redis在windows环境下如何启动

Redis在windows环境下如何启动

《Redis在windows环境下如何启动》：本文主要介绍Redis在windows环境下如何启动的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Redis在Windows环境下启动1.在redis的安装目录下2.输入·redis-server.exe
阅读更多...
解决SpringBoot启动报错:Failed to load property source from location 'classpath:/application.yml'

解决SpringBoot启动报错:Failed to load property source from location 'classpath:/application.yml'

《解决SpringBoot启动报错:Failedtoloadpropertysourcefromlocationclasspath:/application.yml问题》这篇文章主要介绍... 目录在启动SpringBoot项目时报如下错误原因可能是1.yml中语法错误2.yml文件格式是GBK总结在启动S
阅读更多...
SpringBoot启动报错的11个高频问题排查与解决终极指南

SpringBoot启动报错的11个高频问题排查与解决终极指南

《SpringBoot启动报错的11个高频问题排查与解决终极指南》这篇文章主要为大家详细介绍了SpringBoot启动报错的11个高频问题的排查与解决,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一... 目录1. 依赖冲突：NoSuchMethodError 的终极解法2. Bean注入失败：No qu
阅读更多...
一文带你了解SpringBoot中启动参数的各种用法

一文带你了解SpringBoot中启动参数的各种用法

《一文带你了解SpringBoot中启动参数的各种用法》在使用SpringBoot开发应用时,我们通常需要根据不同的环境或特定需求调整启动参数,那么,SpringBoot提供了哪些方式来配置这些启动参... 目录一、启动参数的常见传递方式二、通过命令行参数传递启动参数三、使用 application.pro
阅读更多...
SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于
阅读更多...
SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法

SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法

《SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法》本文主要介绍了SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录方法1：更改IDE配置方法2：在Eclipse中清理项目方法3：使用Maven命令行在开发Sprin
阅读更多...
Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件：四、dhtmlx
阅读更多...
Nginx启动失败：端口80被占用问题的解决方案

Nginx启动失败：端口80被占用问题的解决方案

《Nginx启动失败：端口80被占用问题的解决方案》在Linux服务器上部署Nginx时,可能会遇到Nginx启动失败的情况,尤其是错误提示bind()to0.0.0.0:80failed,这种问题通... 目录引言问题描述问题分析解决方案1. 检查占用端口 80 的进程使用 netstat 命令使用 ss
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
Android里面的Service种类以及启动方式

Android里面的Service种类以及启动方式

《Android里面的Service种类以及启动方式》Android中的Service分为前台服务和后台服务,前台服务需要亮身份牌并显示通知,后台服务则有启动方式选择,包括startService和b... 目录一句话总结：一、Service 的两种类型：1. 前台服务（必须亮身份牌）2. 后台服务（偷偷干
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2