Android仿京东首页轮播文字效果

京东客户端的轮播文字效果:

本次要实现的只是后面滚动的文字(前面的用ImageView或者TextView实现即可),看一下实现的效果

实现思路

上图只是一个大概的思路,要实现还需要完善更多的细节,下面会一步步的来实现这个效果:

1.封装数据源:从图上可以看到,轮播的文字是分为两个部分的,暂且把它们分别叫做前缀和内容,而且实际的使用过程中点击轮播图肯定是需要跳转页面的,而且大部分应该是WebView,不妨我们就设置点击时候需要获取的内容就是一个链接,那么数据源的结构就很明了了

创建ADEnity类并完善一些基本的方法,代码如下

public class ADEnity {
 private String mFront ; //前面的文字
 private String mBack ; //后面的文字
 private String mUrl ;//包含的链接

 public ADEnity(String mFront, String mBack,String mUrl) {
  this.mFront = mFront;
  this.mBack = mBack;
  this.mUrl = mUrl;
 }

 public String getmUrl() {
  return mUrl;
 }

 public void setmUrl(String mUrl) {
  this.mUrl = mUrl;
 }

 public String getmFront() {
  return mFront;
 }

 public void setmFront(String mFront) {
  this.mFront = mFront;
 }

 public String getmBack() {
  return mBack;
 }

 public void setmBack(String mBack) {
  this.mBack = mBack;
 }
}

2.接下来应该是定制这个自定义View了,首先理一下思路,看一个构造图

实现这个自定义View的所有参数都在上表列出了,大部分参数很容易理解,个别参数加进去是很有必要的,比如说是否初始化进入文字的纵坐标,文字是否在移动中这两个参数,之后的内容会详细的叙述一下. 在动手绘制之前还得需要知道一点基础的知识,就是关于绘制文字的方法,里面有很多细节需要处理

方法都比较好理解,绘制指定字符串(可以指定范围)在坐标( x , y )处,但是其中的x,y并不是我们所理解的应该是文字左上角的坐标点.其中的x坐标是根据Paint的属性可变换的,默认的x是文字的左边坐标,如果Paint设置了paint.setTextAlign(Paint.Align.CENTER);那就是字符的中心位置.Y坐标是文字的baseliney坐标. 关于绘制文字的baseline:

用图来说话吧

图中蓝色的线即为baseline,可以看出他既不是顶部坐标也不是底部坐标,那么当我们绘制文字的时候肯定是希望能把文字绘制在正中间.这时候就要引入paint.getTextBound()方法了 getTextBounds(String text, int start, int end, Rect bounds),传入一个Rect对象,调用此方法之后则会填充这个rect对象,而填充的内容就是所绘制的文字相对于baseline的偏移坐标,将这个Rect加上baseline的坐标,绘制后是这样的:

但其实他的值只是(2,-25,76,3),是相对于baseline的位置,画个图会比较好理解

那么要将文字绘制在中间那么实际绘制baseline的坐标应该是组件的中心加上文字中心即图中框的中间坐标相对于baseline的偏移值">那么要将文字绘制在中间,那么实际绘制baseline的坐标应该是组件的中心,加上文字中心(即图中框的中间坐标)相对于baseline的偏移值

这张图中应该会好理解实际绘制文字的坐标与组件中心坐标的关系.关于偏移值的计算,按常规的几何计算方法,应该是组件的中心坐标+偏移值的绝对值==baseline坐标(即实际绘制的坐标),但是由于框的坐标值都是相对于baseline来计算的,top为负值,botton为正值,那么这个偏移值就可以直接用(top+bottom)/2来表示,没看懂的同学可以画个草图,用top=-25,bottom=3来算一下,看是否结果是一致的.
经过上面的理解,那我们来绘制正确绘制文字的方法也就确定了
已获得组件的高度int mHeight , 文字外框Rect bound的情况下

绘制文字在正中间

 mHeight / 2 - (bound.top + bound.bottom) / 2
//在纵坐标为mY的地方绘制文字
//计算方式
//mheight /2 = mY + (bound.top + bound.bottom) / 2 ;

文字滚动到最高点

mY == 0 - bound.bottom
//在纵坐标为mY的地方绘制,此时文字刚好移动到最高点
//计算方式
//mY + bound.bottom = 0 ;

文字滚动到最低点,刚好滚出组件

 mY = mHeight - indexBound.top;
//在纵坐标为mY的地方绘制,此时文字刚好移动到最高点
//计算方式
//mY + bound.top = mHeight ;

知道了如何正确的绘制文字和边界情况的坐标判断,下面就到了绘制文字的步骤了
首先初始化数据,设置默认值

//初始化默认值
private void init() {
 mDuration = 500;
 mInterval = 1000;
 mIndex = 0;
 mPaintFront = new Paint();
 mPaintFront.setAntiAlias(true);
 mPaintFront.setDither(true);
 mPaintFront.setTextSize(30);

 mPaintBack = new Paint();
 mPaintBack.setAntiAlias(true);
 mPaintBack.setDither(true);
 mPaintBack.setTextSize(30);

}

前面的叙述中我们知道,刚开始进入的时候文字应该是位于组件的底部的,但是这个值是需要获取组件的高度和当前显示文字的情况下来判断的,所以应该放在onDraw内来初始化这个值,所以需要前面的是否初始化的属性,判断当mY==0并且未初始化的时候给mY赋值.
接下来就是onDraw内的处理

获取当前的数据

//获取当前的数据
ADEnity model = mTexts.get(mIndex);
String font = model.getmFront();
String back = model.getmBack();
// 绘制前缀的外框
Rect indexBound = new Rect();
mPaintFront.getTextBounds(font, 0, font.length(), indexBound);

//绘制内容的外框
Rect contentBound = new Rect();
mPaintBack.getTextBounds(back, 0, back.length(), contentBound);

对mY进行初始化

if (mY == 0 && hasInit == false) {
 mY = getMeasuredHeight() - indexBound.top;
 hasInit = true;
}

对边界情况的处理
/

/移动到最上面
if (mY == 0 - indexBound.bottom) {
 Log.i(TAG, "onDraw: " + getMeasuredHeight());
 mY = getMeasuredHeight() - indexBound.top;//返回底部
 mIndex++;//换下一组数据
}
//移动到中间
if (mY == getMeasuredHeight() / 2 - (indexBound.top + indexBound.bottom) / 2) {
 isMove = false;//停止移动
 Timer timer = new Timer();
 timer.schedule(new TimerTask() {
  @Override
  public void run() {
   postInvalidate();//通知重绘
   isMove = true;//设置移动为true
  }
 }, mInterval);//停顿多少毫秒之后再次移动
}
移动的处理与数据源的处理
mY -= 1;//每次只移动一个像素,尽量保证平滑显示
//循环使用数据
if (mIndex == mTexts.size()) {
 mIndex = 0;
}
//如果是处于移动状态时的,则延迟绘制
//计算公式为一个比例,一个时间间隔移动组件高度,则多少毫秒来移动1像素
if (isMove) {
 postInvalidateDelayed(mDuration / getMeasuredHeight());
}
至此对逻辑的处理就完成了,接下来要设置点击事件
public interface onClickLitener {
 public void onClick(String mUrl);
}

private onClickLitener onClickLitener;

public void setOnClickLitener(TextViewAd.onClickLitener onClickLitener) {
 this.onClickLitener = onClickLitener;
}
//重写onTouchEvent事件,并且要返回true,表明当前的点击事件由这个组件自身来处理
@Override
public boolean onTouchEvent(MotionEvent event) {
 int action = event.getAction();

 switch (action) {
  case MotionEvent.ACTION_DOWN:
   //调用回调,将当前数据源的链接传出去
   if (onClickLitener != null) {
    onClickLitener.onClick(mTexts.get(mIndex).getmUrl());
   }

   break;
 }
 return true;
}
暴露一些其他属性的设置方式
//设置数据源
public void setmTexts(List mTexts) {
 this.mTexts = mTexts;
}

//设置广告文字的停顿时间
public void setmInterval(int mInterval) {
 this.mInterval = mInterval;
}

//设置文字从出现到消失的时长
public void setmDuration(int mDuration) {
 this.mDuration = mDuration;
}

//设置前缀的文字颜色
public void setFrontColor(int mFrontColor) {
 mPaintFront.setColor(mFrontColor);
}

//设置正文内容的颜色
public void setBackColor(int mBackColor) {
 mPaintBack.setColor(mBackColor);
}
有兴趣的同学可以将这些属性设置到attrs.xml文件中然后就可以在布局文件中设置属性了,这里就不演示了,因为觉得每次copy这个View还得把xml文件也copy比较麻烦,毕竟as有自动补全,可以很方便的看到暴露在外面的方法.(个人感受而已).
贴一下完整的ADTextView的代码,方便查看
package com.qiyuan.jindongshangcheng.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.widget.TextView;

import com.qiyuan.jindongshangcheng.enity.ADEnity;

import java.util.List;
import java.util.Timer;
import java.util.TimerTask;

/**
 * Created by huanghaojie on 2016/9/30.
 */

public class TextViewAd extends TextView {

 private int mDuration; //文字从出现到显示消失的时间
 private int mInterval; //文字停留在中间的时长切换的间隔
 private List<ADEnity> mTexts; //显示文字的数据源
 private int mY = 0; //文字的Y坐标
 private int mIndex = 0; //当前的数据下标
 private Paint mPaintBack; //绘制内容的画笔
 private Paint mPaintFront; //绘制前缀的画笔
 private boolean isMove = true; //文字是否移动
 private String TAG = "ADTextView";
 private boolean hasInit = false;//是否初始化刚进入时候文字的纵坐标

 public interface onClickLitener {
  public void onClick(String mUrl);
 }

 private onClickLitener onClickLitener;

 public void setOnClickLitener(TextViewAd.onClickLitener onClickLitener) {
  this.onClickLitener = onClickLitener;
 }

 public TextViewAd(Context context) {
  this(context, null);
 }

 public TextViewAd(Context context, AttributeSet attrs) {
  super(context, attrs);
  init();
 }
 //重写onTouchEvent事件,并且要返回true,表明当前的点击事件由这个组件自身来处理
 @Override
 public boolean onTouchEvent(MotionEvent event) {
  int action = event.getAction();

  switch (action) {
   case MotionEvent.ACTION_DOWN:
    //调用回调,将当前数据源的链接传出去
    if (onClickLitener != null) {
     onClickLitener.onClick(mTexts.get(mIndex).getmUrl());
    }

    break;
  }
  return true;
 }

 //设置数据源
 public void setmTexts(List mTexts) {
  this.mTexts = mTexts;
 }

 //设置广告文字的停顿时间
 public void setmInterval(int mInterval) {
  this.mInterval = mInterval;
 }

 //设置文字从出现到消失的时长
 public void setmDuration(int mDuration) {
  this.mDuration = mDuration;
 }

 //设置前缀的文字颜色
 public void setFrontColor(int mFrontColor) {
  mPaintFront.setColor(mFrontColor);
 }

 //设置正文内容的颜色
 public void setBackColor(int mBackColor) {
  mPaintBack.setColor(mBackColor);
 }

 //初始化默认值
 private void init() {
  mDuration = 500;
  mInterval = 1000;
  mIndex = 0;
  mPaintFront = new Paint();
  mPaintFront.setAntiAlias(true);
  mPaintFront.setDither(true);
  mPaintFront.setTextSize(30);

  mPaintBack = new Paint();
  mPaintBack.setAntiAlias(true);
  mPaintBack.setDither(true);
  mPaintBack.setTextSize(30);

 }

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  Log.i(TAG, "onSizeChanged: " + h);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  if (mTexts != null) {
   Log.i(TAG, "onDraw: " + mY);
   //获取当前的数据
   ADEnity model = mTexts.get(mIndex);
   String font = model.getmFront();
   String back = model.getmBack();
   // 绘制前缀的外框
   Rect indexBound = new Rect();
   mPaintFront.getTextBounds(font, 0, font.length(), indexBound);

   //绘制内容的外框
   Rect contentBound = new Rect();
   mPaintBack.getTextBounds(back, 0, back.length(), contentBound);
   //刚开始进入的时候文字应该是位于组件的底部的 ,但是这个值是需要获取组件的高度和当前显示文字的情况下来判断的,
   // 所以应该放在onDraw内来初始化这个值,所以需要前面的是否初始化的属性,判断当mY==0并且未初始化的时候给mY赋值.
   if (mY == 0 && hasInit == false) {
    mY = getMeasuredHeight() - indexBound.top;
    hasInit = true;
   }
   //移动到最上面
   if (mY == 0 - indexBound.bottom) {
    Log.i(TAG, "onDraw: " + getMeasuredHeight());
    mY = getMeasuredHeight() - indexBound.top;//返回底部
    mIndex++;//换下一组数据
   }
   canvas.drawText(back, 0, back.length(), (indexBound.right - indexBound.left) + 20, mY, mPaintBack);
   canvas.drawText(font, 0, font.length(), 10, mY, mPaintFront);
   //移动到中间
   if (mY == getMeasuredHeight() / 2 - (indexBound.top + indexBound.bottom) / 2) {
    isMove = false;//停止移动
    Timer timer = new Timer();
    timer.schedule(new TimerTask() {
     @Override
     public void run() {
      postInvalidate();//通知重绘
      isMove = true;//设置移动为true
     }
    }, mInterval);//停顿多少毫秒之后再次移动
   }
   //移动的处理与数据源的处理
   mY -= 1;//每次只移动一个像素,尽量保证平滑显示
   //循环使用数据
   if (mIndex == mTexts.size()) {
    mIndex = 0;
   }
   //如果是处于移动状态时的,则延迟绘制
   //计算公式为一个比例,一个时间间隔移动组件高度,则多少毫秒来移动1像素
   if (isMove) {
    postInvalidateDelayed(mDuration / getMeasuredHeight());
   }
  }

 }
}

怎么使用呢?
1,现在xml文件里引入这个自定义控件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">
 <com.qiyuan.jindongshangcheng.view.TextViewAd
  android:id="@+id/textad"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />

</LinearLayout>

2.在MainActivity中使用
/**
 * Created by huanghaojie on 2016/9/30.
 */

public class MainActivity extends Activity {
 private TextViewAd textViewAd;
 private List<ADEnity> mList;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main4);
  textViewAd = (TextViewAd) findViewById(R.id.textad);
  mList = new ArrayList<>();
  for (int i = 0; i < 10; i++) {
   ADEnity adEnity = new ADEnity("前缀" + i, "后缀" + i, "http://www.baidu.com"+i);
   mList.add(adEnity);
  }
  textViewAd.setmTexts(mList);
  textViewAd.setFrontColor(Color.RED);
  textViewAd.setBackColor(Color.BLUE);
  textViewAd.setmDuration(1000);
  textViewAd.setmInterval(1000);
  textViewAd.setOnClickLitener(new TextViewAd.onClickLitener() {
   @Override
   public void onClick(String mUrl) {
    Toast.makeText(MainActivity.this,"点击了"+mUrl,Toast.LENGTH_LONG).show();
   }
  });
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android仿京东首页画轴效果

    记得之前京东首页有一个效果,有一个画轴,然后可以滚动画轴,去打开画(不知道怎么去形容这个效果,就叫做画轴效果吧- -!),然后去做相关操作,刚开始看到这个效果,想法是动态的去改变一个ImageView的高度,基本效果也就出来了,不过滚动部分的内容,当时接触的也不是很多,只是看过一些大牛的博客,略微了解了一点,当时也忙着写项目,也就没去多想,前些天忽然想到这个效果,就想着实现一下,不过京东新版本好像去掉这个东西了,只能凭着自己的记忆来大概搞一下,也是对滑动这部分内容的一个小练习吧. 先看一下效果图

  • Android仿京东、天猫商品详情页

    前言 前面在介绍控件TabLayout控件和CoordinatorLayout使用的时候说了下实现京东.天猫详情页面的效果,今天要说的是优化版,是我们线上实现的效果,首先看一张效果: 项目结构分析 首先我们来分析一下要实现上面的效果,我们需要怎么做.顶部是一个可以滑动切换Tab,可以用ViewPager+Fragment实现,也可以使用系统的TabLayout控件实现:而下面的 View是一个可以滑动拖动效果的View,可以采用网上一个叫做DragLayout的控件,我这里是自己实现了一个,主要

  • Android 仿淘宝、京东商品详情页向上拖动查看图文详情控件DEMO详解

    一.淘宝商品详情页效果 我们的效果 二.实现思路 使用两个scrollView,两个scrollView 竖直排列,通过自定义viewGroup来控制两个scrollView的竖直排列,以及滑动事件的处理.如下图 三.具体实现 1.继承viewGroup自定义布局View 重写onMeasure()和onLayout方法,在onLayout方法中完成对两个子ScrollView的竖直排列布局,代码如下: 布局文件: <RelativeLayout xmlns:android="http:/

  • Android仿支付宝、京东的密码键盘和输入框

    首先看下效果图 一:布局代码 键盘由0~9的数字,删除键和完成键组成,也可以根据需求通过GridView适配器的getItemViewType方法来定义.点击键的时候背景有变色的效果. 密码输入框由六个EditText组成,每个输入框最对能输入一个数字,监听最后一个输入框来完成密码输入结束的监听. 二:键盘 键盘中的主要逻辑处理,键盘样式,item的点击事件 @Override public int getViewTypeCount() { return 2; } @Override publi

  • Android中使用TextView实现高仿京东淘宝各种倒计时效果

    今天给大家带来的是仅仅使用一个TextView实现一个高仿京东.淘宝.唯品会等各种电商APP的活动倒计时.最近公司一直加班也没来得及时间去整理,今天难得休息想把这个分享给大家,只求共同学习,以及自己后续的复习.为什么会想到使用一个TextView来实现呢?因为最近公司在做一些优化的工作,其中就有一个倒计时样式,原来开发的这个控件的同事使用了多个TextView拼接在一起的,实现的代码冗余比较大,故此项目经理就说:小宏这个就交给你来优化了,并且还要保证有一定的扩展性,当时就懵逼了.不知道从何处开始

  • Android TabLayout实现京东详情效果

    Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给我们提供了更加规范的MD设计风格的控件.最重要的是,Android Design Support Library的兼容性更广,直接可以向下兼容到Android 2.2. 这两天需要做一个仿京东详情的页面,上面的Tab切换,以前都是自己写Viewpager+fragment

  • Android仿淘宝商品拖动查看详情及标题栏渐变功能

    绪论 最近一直比较忙,也没抽出时间来写博客,也不得不说是自己犯了懒癌,人要是一懒就什么事都不想做了,如果不能坚持下来的话,那么估计就废了,��.最近自己攒了好多东西,接下来的时间我会慢慢都分享出来的.好了废话不多说了,下面我们开始正题: 今天要分享的是淘宝的详情页,之前在淘宝上买东西的时候看到淘宝的详情页效果比较不错,所以今天就来仿一下它的效果吧,可能没有淘宝的好,希望见谅啊. 先上效果图: 这是淘宝的: 我自己做的: 怎么样效果还差不多吧?GIF图效果看的不太清楚,见谅. 下面我们来看看怎么实

  • 安卓(android)仿电商app商品详情页按钮浮动效果

    1.效果图如下: 这效果用户体验还是很酷炫,今天我们就来讲解如何实现这个效果. 2.分析 为了方便理解,作图分析 如图所示,整个页面分为四个部分: 1.悬浮内容,floatView 2.顶部内容,headView 3.中间内容,与悬浮内容相同,middleView 4.商品详情展示页面,detailView 因为页面内容高度会超出屏幕,所以用Scrollview实现滚动,悬浮view与scrollview同级,都在一个帧布局或者相对布局中. 当y方向的滚动距离小于中间的内容middleView到

  • Android高仿京东垂直循环滚动新闻栏

    实现思路其实很简单,就是一个自定义的LinearLayout,并且textView能够循环垂直滚动,而且条目可以点击,显示区域最多显示2个条目,并且还有交替的属性垂直移动的动画效果,通过线程来控制滚动的实现. 不多说看效果: 代码实现 我们先来为控件设置自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="JDAdv

  • Android仿京东首页轮播文字效果

    京东客户端的轮播文字效果: 本次要实现的只是后面滚动的文字(前面的用ImageView或者TextView实现即可),看一下实现的效果 实现思路 上图只是一个大概的思路,要实现还需要完善更多的细节,下面会一步步的来实现这个效果: 1.封装数据源:从图上可以看到,轮播的文字是分为两个部分的,暂且把它们分别叫做前缀和内容,而且实际的使用过程中点击轮播图肯定是需要跳转页面的,而且大部分应该是WebView,不妨我们就设置点击时候需要获取的内容就是一个链接,那么数据源的结构就很明了了 创建ADEnity

  • 利用AngularJs实现京东首页轮播图效果

    先来看看效果图 其实写一个轮播图还是蛮简单的,我想了两种种方法,来实现轮播图(实际上细分是5种,但是其中两种是操作dom原生,三种是利用AngularJs的动画,所有归为两大类),等我写出来,大家好好理解一下就好. 那我先写一种,第一种是不使用angularjs的动画模块,只使用指令来完成动画的切换.在这里面就是在指令里操作dom元素,超级easy. 示例代码 <!DOCTYPE html> <html lang="en" ng-app="lunbo&quo

  • Android仿硬币转动微信红包动画效果

    项目需要研究了一下微信红包动画,即硬币转动的效果,原理其实就是三张不同角度的图片利用AnimationDrawable帧动画进行播放,在参考了案例之后,给自己记录一下完成的过程. 1,在XML文件中定义动画: 步骤如下: ①新建 Android 项目 ②在drawable目录中新建一个anim.xml(注意文件名小写) <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:andr

  • Android仿支付宝的头部伸缩动画效果

    Android5.0推出的MaterialDesign库包含了处理头部工具栏的多个控件,不但允许自定义顶部导航栏,而且导航栏高度是可以伸缩的.如此一来,一方面导航栏能够放得下更多控件,另一方面在用户想看具体内容时也能腾出更多的屏幕空间. 这么说可能比较抽象,那就先来看看两张导航栏的效果图,第一张是导航栏完全展开时的界面,此时页面头部的导航栏占据了较大部分的高度: 第二张是导航栏完全收缩时的界面,此时头部导航栏只剩矮矮的一个长条. 看起来很眼熟是不是,上面的截图正是仿支付宝首页的头部效果.如果你熟

  • Android 使用ViewPager实现轮播图效果

    写这篇文章只是对今天所学的知识进行加深印象,对ViewPager的一些处理,比如适配器和各个方法的作用等. 先看效果图 这里我是在xml中写的圆点 Drawable文件夹下的xml代码: Shape_yes.xml: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

  • Android 仿今日头条简单的刷新效果实例代码

    点击按钮,先自动进行下拉刷新,也可以手动刷新,刷新完后,最后就多一行数据.有四个选项卡. 前两天导师要求做一个给本科学生预定机房座位的app,出发点来自这里.做着做着遇到很多问题,都解决了.这个效果感觉还不错,整理一下. MainActivity package com.example.fragmentmytest; import android.content.DialogInterface; import android.graphics.Color; import android.os.B

  • Android仿IOS上拉下拉弹性效果的实例代码

    用过iphone的朋友相信都体验过页面上拉下拉有一个弹性的效果,使用起来用户体验很好:Android并没有给我们封装这样一个效果,我们来看下在Android里如何实现这个效果.先看效果,感觉有些时候还是蛮实用的. 思路:其实原理很简单,实现一个自定义的Scrollview方法(来自网上大神),然后在布局文件中使用自定义方法Scrollview就可以了. 代码: 自定义View,继承自Scrollview.MyReboundScrollView类 package com.wj.myrebounds

  • Android仿网易新闻图片详情下滑隐藏效果示例代码

    前言 本文主要给大家分享了Android仿网易新闻图片详情下滑隐藏效果的相关内容,分享出来供需要的朋友参考学习,下面话不多说了,来一起看看详细的介绍吧 效果图: 实例代码 public class InfoTextView extends AutoRelativeLayout { private Context context; private int lastY; private int offY; private int MIN_HEIGHT = 600; public InfoTextVi

  • vue仿携程轮播图效果(滑动轮播,下方高度自适应)

    先看案例,使用vue+swiper实现,slide不同高度时,动态计算盒子高度,让其下方高度自适应的效果 首先搭建vue项目,这里不做过多说明,然后安装swiper npm install swiper --save-dev 1. js部分:初始化swiper组件,vue要在mounted生命周期中进行初始化,代码如下: import Swiper from 'swiper' import { TweenMax, Power2 } from 'gsap' 初始化时调用resize函数,计算屏幕容

  • Android仿高德首页三段式滑动效果的示例代码

    目录 高德的效果 实现的效果 自定义View源码 xml布局中的使用 高德首页按钮处理 源码地址 最近发现很多app都使用了三段式滑动,比如说高德的首页和某宝等物流信息都是使用的三段式滑动方式,谷歌其实给了我们很好的2段式滑动,就是BottomSheet,所以这次我也是在这个原理基础上做了一个小小的修改来实现我们今天想要的效果. 高德的效果 实现的效果 我们实现的效果和高德差距不是很大,也很顺滑.具体实现其实就是继承CoordinatorLayout.Behavior 自定义View源码 /**

随机推荐