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

相关文章

Window Server创建2台服务器的故障转移群集的图文教程

Window Server创建2台服务器的故障转移群集的图文教程

《WindowServer创建2台服务器的故障转移群集的图文教程》本文主要介绍了在WindowsServer系统上创建一个包含两台成员服务器的故障转移群集,文中通过图文示例介绍的非常详细,对大家的... 目录一、 准备条件二、在ServerB安装故障转移群集三、在ServerC安装故障转移群集，操作与Ser
阅读更多...
windos server2022的配置故障转移服务的图文教程

windos server2022的配置故障转移服务的图文教程

《windosserver2022的配置故障转移服务的图文教程》本文主要介绍了windosserver2022的配置故障转移服务的图文教程,以确保服务和应用程序的连续性和可用性,文中通过图文介绍的非... 目录准备环境：步骤故障转移群集是 Windows Server 2022 中提供的一种功能，用于在多个
阅读更多...
LinuxMint怎么安装? Linux Mint22下载安装图文教程

LinuxMint怎么安装? Linux Mint22下载安装图文教程

《LinuxMint怎么安装?LinuxMint22下载安装图文教程》LinuxMint22发布以后，有很多新功能，很多朋友想要下载并安装，该怎么操作呢？下面我们就来看看详细安装指南... linux Mint 是一款基于 Ubuntu 的流行发行版，凭借其现代、精致、易于使用的特性，深受小伙伴们所喜爱。对
阅读更多...
手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

《手把手教你idea中创建一个javaweb(webapp)项目详细图文教程》：本文主要介绍如何使用IntelliJIDEA创建一个Maven项目,并配置Tomcat服务器进行运行,过程包括创建... 1.启动idea2.创建项目模板点击项目-新建项目-选择maven，显示如下页面输入项目名称，选择
阅读更多...
基于Redis有序集合实现滑动窗口限流的步骤

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

《基于Redis有序集合实现滑动窗口限流的步骤》滑动窗口算法是一种基于时间窗口的限流算法,通过动态地滑动窗口,可以动态调整限流的速率,Redis有序集合可以用来实现滑动窗口限流,本文介绍基于Redis... 滑动窗口算法是一种基于时间窗口的限流算法，它将时间划分为若干个固定大小的窗口，每个窗口内记录了该时间
阅读更多...
SigLIP——采用sigmoid损失的图文预训练方式

SigLIP——采用sigmoid损失的图文预训练方式

SigLIP——采用sigmoid损失的图文预训练方式 FesianXu 20240825 at Wechat Search Team 前言 CLIP中的infoNCE损失是一种对比性损失，在SigLIP这个工作中，作者提出采用非对比性的sigmoid损失，能够更高效地进行图文预训练，本文进行介绍。如有谬误请见谅并联系指出，本文遵守CC 4.0 BY-SA版权协议，转载请联系作者并注
阅读更多...
专题二_滑动窗口_算法专题详细总结

专题二_滑动窗口_算法专题详细总结

目录 滑动窗口，引入： 滑动窗口，本质：就是同向双指针； 1.⻓度最⼩的⼦数组（medium） 1.解析：给我们一个数组nums，要我们找出最小子数组的和==target，首先想到的就是暴力解法 1）暴力： 2）优化，滑动窗口: 1.进窗口 2.出窗口 3.更新值 2.⽆重复字符的最⻓⼦串（medium） 1）仍然是暴力解法： 2）优化： 进窗口：hash[s[rig
阅读更多...
『功能项目』战士的平A特效【35】

『功能项目』战士的平A特效【35】

我们打开上一篇34武器的切换实例的项目， 本章要做的事情是在战士的每次按A键时在指定位置生成一个平A特效 首先将之前下载的技能拖拽至场景中 完全解压缩后重命名为AEffect 拖拽至预制体文件夹 进入主角动画的战士动画层级 双击第一次攻击 选择Animation 创建事件 创建的动画事件帧放在攻击动画挥剑指定处 命名为PerpetualAtt
阅读更多...
第49课 Scratch入门篇：骇客任务背景特效

第49课 Scratch入门篇：骇客任务背景特效

骇客任务背景特效 故事背景：   骇客帝国特色背景在黑色中慢慢滚动着！ 程序原理：  1 、 角色的设计技巧  2 、克隆体的应用及特效的使用 开始编程   1、使用 黑色的背景： ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/7d74c872f06b4d9fbc88aecee634b074.png#pic_center)   2
阅读更多...
CentOS 7 x64下安装MySql5.7图文详解

CentOS 7 x64下安装MySql5.7图文详解

参考： https://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/ http://www.jianshu.com/p/7cccdaa2d177 http://www.linuxidc.com/Linux/2016-09/135288.htm 最近搞了台阿里云服务器，搭载的是CentOS 7系统，这里记录下mysql5.7的安装流程 查
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2