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

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。

相关文章

Python中构建终端应用界面利器Blessed模块的使用

Python中构建终端应用界面利器Blessed模块的使用

《Python中构建终端应用界面利器Blessed模块的使用》Blessed库作为一个轻量级且功能强大的解决方案,开始在开发者中赢得口碑,今天,我们就一起来探索一下它是如何让终端UI开发变得轻松而高... 目录一、安装与配置：简单、快速、无障碍二、基本功能：从彩色文本到动态交互1. 显示基本内容2. 创建链
阅读更多...
基于Python实现PDF动画翻页效果的阅读器

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
bat脚本启动git bash窗口,并执行命令方式

bat脚本启动git bash窗口,并执行命令方式

《bat脚本启动gitbash窗口,并执行命令方式》本文介绍了如何在Windows服务器上使用cmd启动jar包时出现乱码的问题,并提供了解决方法——使用GitBash窗口启动并设置编码,通过编写s... 目录一、简介二、使用说明2.1 start.BAT脚本2.2 参数说明2.3 效果总结一、简介某些情
阅读更多...
使用Python实现生命之轮Wheel of life效果

使用Python实现生命之轮Wheel of life效果

《使用Python实现生命之轮Wheeloflife效果》生命之轮Wheeloflife这一概念最初由SuccessMotivation®Institute,Inc.的创始人PaulJ.Meyer... 最近看一个生命之轮的视频，让我们珍惜时间，因为一生是有限的。使用python创建生命倒计时图表，珍惜时间
阅读更多...
基于Redis有序集合实现滑动窗口限流的步骤

基于Redis有序集合实现滑动窗口限流的步骤

《基于Redis有序集合实现滑动窗口限流的步骤》滑动窗口算法是一种基于时间窗口的限流算法,通过动态地滑动窗口,可以动态调整限流的速率,Redis有序集合可以用来实现滑动窗口限流,本文介绍基于Redis... 滑动窗口算法是一种基于时间窗口的限流算法，它将时间划分为若干个固定大小的窗口，每个窗口内记录了该时间
阅读更多...
MySQL数据库宕机，启动不起来，教你一招搞定！

MySQL数据库宕机，启动不起来，教你一招搞定！

作者介绍：老苏，10余年DBA工作运维经验，擅长Oracle、MySQL、PG、Mongodb数据库运维（如安装迁移，性能优化、故障应急处理等）公众号：老苏畅谈运维欢迎关注本人公众号，更多精彩与您分享。 MySQL数据库宕机，数据页损坏问题，启动不起来，该如何排查和解决，本文将为你说明具体的排查过程。 查看MySQL error日志 查看 MySQL error日志，排查哪个表（表空间
阅读更多...
springboot3打包成war包，用tomcat8启动

springboot3打包成war包，用tomcat8启动

1、在pom中，将打包类型改为war <packaging>war</packaging> 2、pom中排除SpringBoot内置的Tomcat容器并添加Tomcat依赖，用于编译和测试,         *依赖时一定设置 scope 为 provided （相当于 tomcat 依赖只在本地运行和测试的时候有效，         打包的时候会排除这个依赖）<scope>provided
阅读更多...
内核启动时减少log的方式

内核启动时减少log的方式

内核引导选项 内核引导选项大体上可以分为两类：一类与设备无关、另一类与设备有关。与设备有关的引导选项多如牛毛，需要你自己阅读内核中的相应驱动程序源码以获取其能够接受的引导选项。比如，如果你想知道可以向 AHA1542 SCSI 驱动程序传递哪些引导选项，那么就查看 drivers/scsi/aha1542.c 文件，一般在前面 100 行注释里就可以找到所接受的引导选项说明。大多数选项是通过"_
阅读更多...
防近视护眼台灯什么牌子好？五款防近视效果好的护眼台灯推荐

防近视护眼台灯什么牌子好？五款防近视效果好的护眼台灯推荐

在家里，灯具是属于离不开的家具，每个大大小小的地方都需要的照亮，所以一盏好灯是必不可少的，每个发挥着作用。而护眼台灯就起了一个保护眼睛，预防近视的作用。可以保护我们在学习，阅读的时候提供一个合适的光线环境，保护我们的眼睛。防近视护眼台灯什么牌子好？那我们怎么选择一个优秀的护眼台灯也是很重要，才能起到最大的护眼效果。下面五款防近视效果好的护眼台灯推荐： 一：六个推荐防近视效果好的护眼台灯的
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2