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

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。

相关文章

Nexus安装和启动的实现教程

Nexus安装和启动的实现教程

《Nexus安装和启动的实现教程》：本文主要介绍Nexus安装和启动的实现教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Nexus下载二、Nexus安装和启动三、关闭Nexus总结一、Nexus下载官方下载链接：DownloadWindows系统根
阅读更多...
Java中实现线程的创建和启动的方法

Java中实现线程的创建和启动的方法

《Java中实现线程的创建和启动的方法》在Java中,实现线程的创建和启动是两个不同但紧密相关的概念,理解为什么要启动线程（调用start()方法）而非直接调用run()方法,是掌握多线程编程的关键,... 目录1. 线程的生命周期2. start() vs run() 的本质区别3. 为什么必须通过 st
阅读更多...
Oracle修改端口号之后无法启动的解决方案

Oracle修改端口号之后无法启动的解决方案

《Oracle修改端口号之后无法启动的解决方案》Oracle数据库更改端口后出现监听器无法启动的问题确实较为常见,但并非必然发生,这一问题通常源于​​配置错误或环境冲突​​,而非端口修改本身,以下是系... 目录一、问题根源分析​​​二、保姆级解决方案​​​​步骤1：修正监听器配置文件 (listener.
阅读更多...
MySQL版本问题导致项目无法启动问题的解决方案

MySQL版本问题导致项目无法启动问题的解决方案

《MySQL版本问题导致项目无法启动问题的解决方案》本文记录了一次因MySQL版本不一致导致项目启动失败的经历,详细解析了连接错误的原因,并提供了两种解决方案：调整连接字符串禁用SSL或统一MySQL... 目录本地项目启动报错报错原因：解决方案第一个：第二种：容器启动mysql的坑两种修改时区的方法：本地
阅读更多...
VS配置好Qt环境之后但无法打开ui界面的问题解决

VS配置好Qt环境之后但无法打开ui界面的问题解决

《VS配置好Qt环境之后但无法打开ui界面的问题解决》本文主要介绍了VS配置好Qt环境之后但无法打开ui界面的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目UKeLvb录找到Qt安装目录中designer.UKeLvBexe的路径找到vs中的解决方案资源
阅读更多...
MySQL启动报错：InnoDB表空间丢失问题及解决方法

MySQL启动报错：InnoDB表空间丢失问题及解决方法

《MySQL启动报错：InnoDB表空间丢失问题及解决方法》在启动MySQL时,遇到了InnoDB:Tablespace5975wasnotfound,该错误表明MySQL在启动过程中无法找到指定的s... 目录mysql 启动报错：InnoDB 表空间丢失问题及解决方法错误分析解决方案1. 启用 inno
阅读更多...
Kotlin Compose Button 实现长按监听并实现动画效果(完整代码)

Kotlin Compose Button 实现长按监听并实现动画效果(完整代码)

《KotlinComposeButton实现长按监听并实现动画效果(完整代码)》想要实现长按按钮开始录音,松开发送的功能,因此为了实现这些功能就需要自己写一个Button来解决问题,下面小编给大... 目录Button 实现原理1. Surface 的作用（关键）2. InteractionSource3.
阅读更多...
无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案

无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案

《无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案》：本文主要介绍了无法启动此程序，详细内容请阅读本文，希望能对你有所帮助... 在计算机使用过程中，我们经常会遇到一些错误提示，其中之一就是"api-ms-win-core-path-l1-1-0.dll丢失
阅读更多...
使用WPF实现窗口抖动动画效果

使用WPF实现窗口抖动动画效果

《使用WPF实现窗口抖动动画效果》在用户界面设计中,适当的动画反馈可以提升用户体验,尤其是在错误提示、操作失败等场景下,窗口抖动作为一种常见且直观的视觉反馈方式,常用于提醒用户注意当前状态,本文将详细... 目录前言实现思路概述核心代码实现1、 获取目标窗口2、初始化基础位置值3、创建抖动动画4、动画完成后
阅读更多...
uniapp小程序中实现无缝衔接滚动效果代码示例

uniapp小程序中实现无缝衔接滚动效果代码示例

《uniapp小程序中实现无缝衔接滚动效果代码示例》：本文主要介绍uniapp小程序中实现无缝衔接滚动效果的相关资料,该方法可以实现滚动内容中字的不同的颜色更改,并且可以根据需要进行艺术化更改和自... 组件滚动通知只能实现简单的滚动效果，不能实现滚动内容中的字进行不同颜色的更改，下面实现一个无缝衔接的滚动
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2