仿凤凰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。

相关文章

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

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

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

Python 安装和配置flask, flask_cors的图文教程

《Python安装和配置flask,flask_cors的图文教程》：本文主要介绍Python安装和配置flask,flask_cors的图文教程,本文通过图文并茂的形式给大家介绍的非常详细,... 目录一.python安装:二,配置环境变量,三:检查Python安装和环境变量,四:安装flask和flas
阅读更多...
Ubuntu中远程连接Mysql数据库的详细图文教程

Ubuntu中远程连接Mysql数据库的详细图文教程

《Ubuntu中远程连接Mysql数据库的详细图文教程》Ubuntu是一个以桌面应用为主的Linux发行版操作系统,这篇文章主要为大家详细介绍了Ubuntu中远程连接Mysql数据库的详细图文教程,有... 目录1、版本2、检查有没有mysql2.1 查询是否安装了Mysql包2.2 查看Mysql版本2.
阅读更多...
Linux系统配置NAT网络模式的详细步骤(附图文)

Linux系统配置NAT网络模式的详细步骤(附图文)

《Linux系统配置NAT网络模式的详细步骤(附图文)》本文详细指导如何在VMware环境下配置NAT网络模式,包括设置主机和虚拟机的IP地址、网关,以及针对Linux和Windows系统的具体步骤,... 目录一、配置NAT网络模式二、设置虚拟机交换机网关2.1 打开虚拟机2.2 管理员授权2.3 设置子
阅读更多...
Linux卸载自带jdk并安装新jdk版本的图文教程

Linux卸载自带jdk并安装新jdk版本的图文教程

《Linux卸载自带jdk并安装新jdk版本的图文教程》在Linux系统中,有时需要卸载预装的OpenJDK并安装特定版本的JDK,例如JDK1.8,所以本文给大家详细介绍了Linux卸载自带jdk并... 目录Ⅰ、卸载自带jdkⅡ、安装新版jdkⅠ、卸载自带jdk1、输入命令查看旧jdkrpm -qa
阅读更多...
IDEA接入Deepseek的图文教程

IDEA接入Deepseek的图文教程

《IDEA接入Deepseek的图文教程》在本篇文章中,我们将详细介绍如何在JetBrainsIDEA中使用Continue插件接入DeepSeek,让你的AI编程助手更智能,提高开发效率,感兴趣的小... 目录一、前置准备二、安装 Continue 插件三、配置 Continue 连接 DeepSeek四
阅读更多...
JAVA集成本地部署的DeepSeek的图文教程

JAVA集成本地部署的DeepSeek的图文教程

《JAVA集成本地部署的DeepSeek的图文教程》本文主要介绍了JAVA集成本地部署的DeepSeek的图文教程,包含配置环境变量及下载DeepSeek-R1模型并启动,具有一定的参考价值,感兴趣的... 目录一、下载部署DeepSeek1.下载ollama2.下载DeepSeek-R1模型并启动 二、J
阅读更多...
PLsql Oracle 下载安装图文过程详解

PLsql Oracle 下载安装图文过程详解

《PLsqlOracle下载安装图文过程详解》PL/SQLDeveloper是一款用于开发Oracle数据库的集成开发环境,可以通过官网下载安装配置,并通过配置tnsnames.ora文件及环境变... 目录一、PL/SQL Developer 简介二、PL/SQL Developer 安装及配置详解1.下
阅读更多...
VScode连接远程Linux服务器环境配置图文教程

VScode连接远程Linux服务器环境配置图文教程

《VScode连接远程Linux服务器环境配置图文教程》：本文主要介绍如何安装和配置VSCode,包括安装步骤、环境配置（如汉化包、远程SSH连接）、语言包安装（如C/C++插件）等,文中给出了详... 目录一、安装vscode二、环境配置1.中文汉化包2.安装remote-ssh，用于远程连接2.1安装2
阅读更多...
vscode保存代码时自动eslint格式化图文教程

vscode保存代码时自动eslint格式化图文教程

《vscode保存代码时自动eslint格式化图文教程》：本文主要介绍vscode保存代码时自动eslint格式化的相关资料,包括打开设置文件并复制特定内容,文中通过代码介绍的非常详细,需要的朋友... 目录1、点击设置2、选择远程--->点击右上角打开设置3、会弹出settings.json文件，将以下内
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2