仿凤凰FM图文滑动特效

2023-11-08 17:50
文章标签 特效 滑动 图文 fm 凤凰

本文主要是介绍仿凤凰FM图文滑动特效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

模仿凤凰FM图文完成滑动特效。在使用的过程中，发现一些问题，再次修正一下。

这里写图片描述

1.结合代码讲解原理

-定义 BlockScrollView，拦截WebView的活动事件

package com.example.androidimagetextdemo;public class BlockScrollView extends ScrollView {private ScroollViewScrollListener mListener;public interface  ScroollViewScrollListener{void onScrollChanged(int l, int t, int oldl, int oldt);}public BlockScrollView(Context context, AttributeSet attrs) {super(context, attrs);}//可以通过监听该方法，获取当前滑动的位置，进行标题栏背景色的渐变public void setScrollListener(ScroollViewScrollListener scrollListener){this.mListener=scrollListener;}@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {super.onScrollChanged(l, t, oldl, oldt);if(mListener!=null){mListener.onScrollChanged(l, t, oldl, oldt);}}@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {return true;}
  • 定义布局文件
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="center"android:orientation="vertical"tools:context="${relativePackage}.${activityClass}" ><ImageView
        android:id="@+id/iv"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/black"android:contentDescription="@null"android:scaleType="matrix"android:src="@drawable/ic_launcher" /><com.example.androidimagetextdemo.BlockScrollView
        android:id="@+id/scroll_view"android:layout_width="match_parent"android:layout_height="match_parent" ><LinearLayout
            android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><View
                android:id="@+id/blank"android:layout_width="match_parent"android:layout_height="200dp" /><WebView
                android:id="@+id/view_web"android:layout_width="match_parent"android:layout_height="match_parent" /></LinearLayout></com.example.androidimagetextdemo.BlockScrollView>
</FrameLayout>

WebView嵌套在ScrollView中，通过添加blank View，使WebView相对于ImageView向下发生移动，让ImageView不会被覆盖(通过 控制blankView的尺寸，来控制图片的显示尺寸)。
注意：
这里如果使用WebView setTranslationY,当WebView滑动底端后，其内容不能够完全展示。
- 主页面BlockScrollView touch事件的处理

    OnTouchListener touchListener = new OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {switch (event.getAction() & MotionEvent.ACTION_MASK) {case MotionEvent.ACTION_DOWN:savedMatrix.set(matrix); // 把原始 Matrix对象保存起来pullPoint.set(event.getX(), event.getY()); // 设置x,y坐标break;case MotionEvent.ACTION_UP: {float pullDistance = movedYDistance(event);if (v.getScrollY() <= 0 && pullDistance > 0) {RectF drawableRect = new RectF(0, 0, bitmap.getWidth(),bitmap.getHeight());RectF viewRect = new RectF(0, 0,getScreenWidth(MainActivity.this),getScreenWidth(MainActivity.this));matrix.reset();matrix.setRectToRect(drawableRect, viewRect,Matrix.ScaleToFit.FILL);mWebView.setTranslationY(0);MODE = TOUCH_RESUME;}}break;case MotionEvent.ACTION_MOVE://研究过安卓中touch事件传递的同学都知道，只要手指放到屏幕上，必然会调用Action_move.//所以这里如果为0，手指只要手指放到屏幕上，就会有滑动效果，用户会感觉很奇怪if (v.getScrollY() > 20) {MODE = TOUCH_NONE;} else {float pullDistance = movedYDistance(event);if (pullDistance > 0) {matrix.set(savedMatrix);float scale = 1 + pullDistance/ getScreenWidth(MainActivity.this);// matrix.postScale(scale, scale,// 0, 0);matrix.postScale(scale, scale,getScreenWidth(MainActivity.this) / 2, 0);mWebView.setTranslationY(pullDistance);MODE = TOUCH_PULL;} else {MODE = TOUCH_NONE;}}break;}if (MODE == TOUCH_PULL || MODE == TOUCH_RESUME) {imageView.setImageMatrix(matrix);return true;} else {return false;}}};

1.用户按下后，记录用户按下的位置，保存原始的Matrix对象

2.当前页面滑动后，如果是向上滑动，交给系统进行处理；否则，根据用户滑动的距离计算缩放比例；通过matrix进行ImageView的缩放，并对WebView进行偏移

3.当用户抬起手指后，
通过ScrollView，getScrollY（）<=0,判断显示是否为ScrollView的初始展示状态（也就是没有进行向上的scroll）；
通过movedYDistance，判断用户是否向下进行了拉伸；如果两者都满足对滑动过程中发生拉伸的ImageView&&WebView进行恢复，否则交给系统处理
- 主页面完整代码

package com.example.androidimagetextdemo;import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.graphics.RectF;
import android.net.Uri;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebView.HitTestResult;
import android.webkit.WebViewClient;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;public class MainActivity extends Activity {public static final String TAG = MainActivity.class.getSimpleName();private static final int TOUCH_NONE = 0;private static final int TOUCH_PULL = 1;private static final int TOUCH_RESUME = 2;private static final String URL_WEB = "http://www.dingdongfm.com/wechat/jsp/Topic/topicDetail.jsp?topicId=1SUegBSg-1460950984623-14625233706364205&type=circle";private int MODE = TOUCH_NONE;ImageView imageView;WebView mWebView;View blankView;BlockScrollView myScrollView;private PointF pullPoint = new PointF();private Matrix matrix = new Matrix();private Matrix savedMatrix = new Matrix();Bitmap bitmap;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.act_visual);imageView = (ImageView) findViewById(R.id.iv);mWebView = (WebView) findViewById(R.id.view_web);blankView = findViewById(R.id.blank);myScrollView = (BlockScrollView) findViewById(R.id.scroll_view);initLayoutParams();mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);mWebView.getSettings().setBuiltInZoomControls(false); // 设置支持缩放mWebView.getSettings().setAllowFileAccess(true);mWebView.getSettings().setJavaScriptEnabled(true);mWebView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);mWebView.getSettings().setAllowFileAccess(true);mWebView.getSettings().setAppCacheEnabled(true);mWebView.getSettings().setDomStorageEnabled(true);mWebView.getSettings().setDatabaseEnabled(true);mWebView.setWebViewClient(new WebViewClient() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {HitTestResult hit = view.getHitTestResult();if (hit != null) {int hitType = hit.getType();if (hitType == HitTestResult.SRC_ANCHOR_TYPE|| hitType == HitTestResult.SRC_IMAGE_ANCHOR_TYPE) {// 点击超链接Intent i = new Intent(Intent.ACTION_VIEW);i.setData(Uri.parse(url));}} else {view.loadUrl(url);}return true;}});mWebView.loadUrl(URL_WEB);myScrollView.setOnTouchListener(touchListener);imageView.setScaleType(ScaleType.MATRIX);bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ic_launcher);if (bitmap != null) {imageView.setImageBitmap(bitmap);}RectF drawableRect = new RectF(0, 0, bitmap.getWidth(),bitmap.getHeight());RectF viewRect = new RectF(0, 0, getScreenWidth(this),getScreenWidth(this));matrix.setRectToRect(drawableRect, viewRect, Matrix.ScaleToFit.FILL);imageView.setImageMatrix(matrix);}public static int getScreenHeight(Activity packageContext) {DisplayMetrics metrics = new DisplayMetrics();packageContext.getWindowManager().getDefaultDisplay().getMetrics(metrics);return metrics.heightPixels;}public static int getScreenWidth(Activity packageContext) {DisplayMetrics metrics = new DisplayMetrics();packageContext.getWindowManager().getDefaultDisplay().getMetrics(metrics);return metrics.widthPixels;}OnTouchListener touchListener = new OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {switch (event.getAction() & MotionEvent.ACTION_MASK) {case MotionEvent.ACTION_DOWN:savedMatrix.set(matrix); // 把原始 Matrix对象保存起来pullPoint.set(event.getX(), event.getY()); // 设置x,y坐标break;case MotionEvent.ACTION_UP: {float pullDistance = movedYDistance(event);if (v.getScrollY() <= 0 && pullDistance > 0) {RectF drawableRect = new RectF(0, 0, bitmap.getWidth(),bitmap.getHeight());RectF viewRect = new RectF(0, 0,getScreenWidth(MainActivity.this),getScreenWidth(MainActivity.this));matrix.reset();matrix.setRectToRect(drawableRect, viewRect,Matrix.ScaleToFit.FILL);mWebView.setTranslationY(0);MODE = TOUCH_RESUME;}}break;case MotionEvent.ACTION_MOVE:if (v.getScrollY() > 20) {MODE = TOUCH_NONE;} else {float pullDistance = movedYDistance(event);if (pullDistance > 0) {matrix.set(savedMatrix);float scale = 1 + pullDistance/ getScreenWidth(MainActivity.this);// matrix.postScale(scale, scale,// 0, 0);matrix.postScale(scale, scale,getScreenWidth(MainActivity.this) / 2, 0);mWebView.setTranslationY(pullDistance);MODE = TOUCH_PULL;} else {MODE = TOUCH_NONE;}}break;}if (MODE == TOUCH_PULL || MODE == TOUCH_RESUME) {imageView.setImageMatrix(matrix);return true;} else {return false;}}};private float movedYDistance(MotionEvent event) {float y = event.getY(0) - pullPoint.y;return y;}public void initLayoutParams() {LinearLayout.LayoutParams blankParams = (LinearLayout.LayoutParams) blankView.getLayoutParams();blankParams.height = getScreenWidth(this);}
}

2.Demo下载

http://download.csdn.net/detail/guchuanhang/9516181

这篇关于仿凤凰FM图文滑动特效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


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

相关文章

Unity新手入门学习殿堂级知识详细讲解（图文）

Unity新手入门学习殿堂级知识详细讲解（图文）

《Unity新手入门学习殿堂级知识详细讲解（图文）》Unity是一款跨平台游戏引擎,支持2D/3D及VR/AR开发,核心功能模块包括图形、音频、物理等,通过可视化编辑器与脚本扩展实现开发,项目结构含A... 目录入门概述什么是 UnityUnity引擎基础认知编辑器核心操作Unity 编辑器项目模式分类工程
阅读更多...
python使用Akshare与Streamlit实现股票估值分析教程（图文代码）

python使用Akshare与Streamlit实现股票估值分析教程（图文代码）

《python使用Akshare与Streamlit实现股票估值分析教程（图文代码）》入职测试中的一道题,要求:从Akshare下载某一个股票近十年的财务报表包括,资产负债表,利润表,现金流量表,保存... 目录一、前言二、核心知识点梳理1、Akshare数据获取2、Pandas数据处理3、Matplotl
阅读更多...
Django开发时如何避免频繁发送短信验证码（python图文代码）

Django开发时如何避免频繁发送短信验证码（python图文代码）

《Django开发时如何避免频繁发送短信验证码（python图文代码）》Django开发时,为防止频繁发送验证码,后端需用Redis限制请求频率,结合管道技术提升效率,通过生产者消费者模式解耦业务逻辑... 目录避免频繁发送 验证码1. www.chinasem.cn避免频繁发送 验证码逻辑分析2. 避免频繁
阅读更多...
精选20个好玩又实用的的Python实战项目(有图文代码)

精选20个好玩又实用的的Python实战项目(有图文代码)

《精选20个好玩又实用的的Python实战项目(有图文代码)》文章介绍了20个实用Python项目,涵盖游戏开发、工具应用、图像处理、机器学习等,使用Tkinter、PIL、OpenCV、Kivy等库... 目录① 猜字游戏② 闹钟③ 骰子模拟器④ 二维码⑤ 语言检测⑥ 加密和解密⑦ URL缩短⑧ 音乐播放
阅读更多...
Visual Studio 2022 编译C++20代码的图文步骤

Visual Studio 2022 编译C++20代码的图文步骤

《VisualStudio2022编译C++20代码的图文步骤》在VisualStudio中启用C++20import功能,需设置语言标准为ISOC++20,开启扫描源查找模块依赖及实验性标... 默认创建Visual Studio桌面控制台项目代码包含C++20的import方法。右键项目的属性：
阅读更多...
C#实现访问远程硬盘的图文教程

C#实现访问远程硬盘的图文教程

《C#实现访问远程硬盘的图文教程》在现实场景中,我们经常用到远程桌面功能,而在某些场景下,我们需要使用类似的远程硬盘功能,这样能非常方便地操作对方电脑磁盘的目录、以及传送文件,这次我们将给出一个完整的... 目录引言一. 远程硬盘功能展示二. 远程硬盘代码实现1. 底层业务通信实现2. UI 实现三. De
阅读更多...
ubuntu20.0.4系统中安装Anaconda的超详细图文教程

ubuntu20.0.4系统中安装Anaconda的超详细图文教程

《ubuntu20.0.4系统中安装Anaconda的超详细图文教程》：本文主要介绍了在Ubuntu系统中如何下载和安装Anaconda，提供了两种方法，详细内容请阅读本文，希望能对你有所帮助... 本文介绍了在Ubuntu系统中如何下载和安装Anaconda。提供了两种方法，包括通过网页手动下载和使用wg
阅读更多...
IDEA之MyBatisX使用的图文步骤

IDEA之MyBatisX使用的图文步骤

《IDEA之MyBatisX使用的图文步骤》本文主要介绍了IDEA之MyBatisX使用,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习... 目录一、idea插件安装二、IDEA配置数据库连接（以mysql为例）三、生产基础代码一、idea插
阅读更多...
使用Python和PaddleOCR实现图文识别的代码和步骤

使用Python和PaddleOCR实现图文识别的代码和步骤

《使用Python和PaddleOCR实现图文识别的代码和步骤》在当今数字化时代,图文识别技术的应用越来越广泛,如文档数字化、信息提取等,PaddleOCR是百度开源的一款强大的OCR工具包,它集成了... 目录一、引言二、环境准备2.1 安装 python2.2 安装 PaddlePaddle2.3 安装
阅读更多...
python连接本地SQL server详细图文教程

python连接本地SQL server详细图文教程

《python连接本地SQLserver详细图文教程》在数据分析领域,经常需要从数据库中获取数据进行分析和处理,下面：本文主要介绍python连接本地SQLserver的相关资料,文中通过代码... 目录一.设置本地账号1.新建用户2.开启双重验证3,开启TCP/IP本地服务二js.python连接实例1.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2