Android自定义图文跑马灯效果

之前的需求是用FlipperView来实现上下翻动效果,但是发现数据有点长会造成一屏幕放不下三条数据,后来改为跑马灯,但是只有文字的跑马灯TextView自己就有,但是要求文字后面带一个小图标怎们办呢?

(1).MainActivity.java:

public class HomeFragment extends BaseFragment {
  private MarqueeScroll mMarqueeScroll;
  private int[] name_tv = {R.id.name_tv1, R.id.name_tv2, R.id.name_tv3, R.id.name_tv4, R.id.name_tv5, R.id.name_tv6};
  private TextView[] name_tvs = new TextView[6];
  private int[] name_iv = {R.id.name_iv1, R.id.name_iv2, R.id.name_iv3, R.id.name_iv4, R.id.name_iv5, R.id.name_iv6};
  private ImageView[] name_ivs = new ImageView[6];
  private ArrayList<HomeFlipperBean> mFlipperList = new ArrayList<HomeFlipperBean>();

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    View view = inflater.inflate(R.layout.fragment_homenews, null);
    mMarqueeScroll = (MarqueeScroll) view.findViewById(R.id.MarqueeScroll);
    for (int i = 0; i < name_tv.length; i++) {
      name_tvs[i] = (TextView) view.findViewById(name_tv[i]);
      name_ivs[i] = (ImageView) view.findViewById(name_iv[i]);
    }
    mMarqueeScroll.run();

    // 在这里进行解析
    ResponseBaseBean<ArrayList<HomeFlipperBean>> responsBaseBean = JSON.parseObject(mFlipperData,
        new TypeReference<ResponseBaseBean<ArrayList<HomeFlipperBean>>>() {
        });
    mFlipperList = responsBaseBean.getResult();

    if (mFlipperList != null && mFlipperList.size() > 0) {
      // ForegroundColorSpan 为文字前景色,BackgroundColorSpan为文字背景色
      ForegroundColorSpan span1 = new ForegroundColorSpan(0xFF535353);
      ForegroundColorSpan span2 = new ForegroundColorSpan(0xFF346699);

      for (int i = 0; i < name_tvs.length; i++) {
        HomeFlipperBean bean = mFlipperList.get(i);
        name_tvs[i].setText(bean.getName() + " " + bean.getPrice());
        if ("up".equals(bean.getTrend())) {
          name_ivs[i].setBackgroundResource(R.drawable.in_img3);
        } else {
          name_ivs[i].setBackgroundResource(R.drawable.in_img4);
        }
        int length = bean.getName().length();
        SpannableStringBuilder builder = new SpannableStringBuilder(name_tvs[i].getText().toString());
        builder.setSpan(span1, 0, length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        builder.setSpan(span2, length + 1, name_tvs[i].getText().toString().length(),
            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        name_tvs[i].setText(builder);
      }
    }
  }
}

(2).fragment_homenews.xml:布局文件引用控件

<com.monkey.mushroom.ui.view.MarqueeScroll
   android:id="@+id/MarqueeScroll"
   android:layout_width="match_parent"
   android:layout_height="@dimen/kx_nonet_h" >

   <LinearLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="#E1F4FF"
     android:orientation="horizontal" >

     <TextView
        android:id="@+id/name_tv1"
        style="@style/filpper_text_style" />

     <ImageView
        android:id="@+id/name_iv1"
        style="@style/filpper_image_style" />

     <TextView
        android:id="@+id/name_tv2"
        style="@style/filpper_text_style" />

     <ImageView
        android:id="@+id/name_iv2"
        style="@style/filpper_image_style" />

     <TextView
        android:id="@+id/name_tv3"
        style="@style/filpper_text_style" />

     <ImageView
        android:id="@+id/name_iv3"
        style="@style/filpper_image_style" />

     <TextView
        android:id="@+id/name_tv4"
        style="@style/filpper_text_style" />

     <ImageView
        android:id="@+id/name_iv4"
        style="@style/filpper_image_style" />

     <TextView
        android:id="@+id/name_tv5"
        style="@style/filpper_text_style" />

     <ImageView
        android:id="@+id/name_iv5"
        style="@style/filpper_image_style" />

     <TextView
        android:id="@+id/name_tv6"
        style="@style/filpper_text_style" />

     <ImageView
        android:id="@+id/name_iv6"
        style="@style/filpper_image_style" />
   </LinearLayout>
</com.jyd.jyddz.ui.view.MarqueeScroll>

(3).MarqueeScroll.java:自定义HorizontalScrollView

public class MarqueeScroll extends HorizontalScrollView implements Runnable {
  private View inner;
  private Bitmap bitmap = null;

  /**
   * 滚动步长
   */
  private int step = 1;
  private int x;
  private int width;
  private int pWidth;
  private int pHeight;

  public MarqueeScroll(Context context, AttributeSet attrs) {
    super(context, attrs);
    setBackgroundColor(0xFFE1F4FF);
  }

  @Override
  protected void onFinishInflate() {

    if (getChildCount() == 1) {
      inner = getChildAt(0);
    }

  }

  @Override
  protected void onDetachedFromWindow() {

    super.onDetachedFromWindow();
    handler.removeCallbacks(this);
  }

  @Override
  protected void onDraw(Canvas canvas) {
    if (getWidth() == 0) {
      android.view.ViewGroup.LayoutParams lp = getLayoutParams();
      lp.width = pWidth;
      lp.height = pHeight;
      setLayoutParams(lp);
    }
    if (bitmap == null && inner != null) {
      width = inner.getMeasuredWidth();
      bitmap = Bitmap.createBitmap(width, inner.getHeight(), Config.RGB_565);
      Canvas canvas1 = new Canvas(bitmap);
      inner.draw(canvas1);
      pWidth = getWidth();
      pHeight = getHeight();
      if (inner != null) {
        removeViewInLayout(inner);
        inner = null;
      }

      run();
    }

    if (bitmap != null) {

      int nowX = x;
      nowX -= step;
      canvas.drawBitmap(bitmap, nowX, 0, null);

      if (nowX < 0) {

        canvas.drawBitmap(bitmap, width + nowX /* + space */, 0, null);
      }
      if (nowX <= -width) {
        nowX = 0;

      }
      x = nowX;
    }
    super.onDraw(canvas);
  }

  private Handler handler = new Handler() {
    @Override
    public void handleMessage(Message msg) {

      super.handleMessage(msg);
    }

  };

  @Override
  public void run() {

    invalidate();
    handler.postDelayed(this, 1);
  }
}

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

(0)

相关推荐

  • Android中使用TextView实现文字跑马灯效果

    通常情况下我们想实现文字的走马灯效果需要在xml文件中这样设置 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:ellipsize="marquee" android:focusable="true" android:

  • Android 中TextView中跑马灯效果的实现方法

     条件: 1.android:ellipsize="marquee" 2.TextView必须单行显示,即内容必须超出TextView大小 3.TextView要获得焦点才能滚动 mTVText.setText("超过文本长度的数据"); mTVText.setSingleLine(true);设置单行显示 mTVText.setEllipsize(TruncateAt.MARQUEE);设置跑马灯显示效果 TextView.setHorizontallyScrol

  • Android基于TextView不获取焦点实现跑马灯效果

    本文实例讲述了Android基于TextView不获取焦点实现跑马灯效果.分享给大家供大家参考,具体如下: 1. 写一个类继承TextView package com.example.tt; import android.content.Context; import android.graphics.Rect; import android.util.AttributeSet; import android.widget.TextView; public class ScrollingText

  • Android自定义textview实现竖直滚动跑马灯效果

    本文实例为大家分享了Android自定义textview实现跑马灯效果的具体代码,供大家参考,具体内容如下 xml布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.c

  • Android实现跑马灯效果的方法

    本文实例讲述了Android实现跑马灯效果的方法.分享给大家供大家参考.具体如下: 运行效果截图如下: 直接在布局里写代码就好了: <TextView android:id="@+id/menu_desc" android:layout_width="300dip" android:layout_height="wrap_content" android:text="温馨提示:左右滑动更改菜单,点击进入" android

  • Android自定义View实现竖直跑马灯效果案例解析

    首先给出跑马灯效果图 中间的色块是因为视频转成GIF造成的失真,自动忽略哈. 大家知道,横向的跑马灯android自带的TextView就可以实现,详情请百度[Android跑马灯效果].但是竖直的跑马灯效果原生Android是不支持的.网上也有很多网友实现了自定义的效果,但是我一贯是不喜欢看别人的代码,所以这篇博客的思路完全是我自己的想法哈. 首先,我们需要给自定义的控件梳理一下格局,如下图所示: 1.首先我们将控件分为三个区块,上面绿色部分为消失不可见的块,中间黑色部分为可见区域,下面红色部

  • Android跑马灯MarqueeView源码解析

    跑马灯效果,大家可以去原作者浏览https://github.com/sfsheng0322/MarqueeView 下面看自定义控件的代码 public class MarqueeView extends ViewFlipper { private Context mContext; private List<String> notices; private boolean isSetAnimDuration = false; private OnItemClickListener onIt

  • Android基于TextView属性android:ellipsize实现跑马灯效果的方法

    本文实例讲述了Android基于TextView属性android:ellipsize实现跑马灯效果的方法.分享给大家供大家参考,具体如下: Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize="marquee" 2.TextView必须单行显示,即内容必须超出TextView大小 3.TextView要获得焦点才能滚动 XML代码: android:ellipsize="marquee", andro

  • Android实现图文垂直跑马灯效果

    最近在维护老项目,老项目有一个地方需要修改,就是垂直跑马灯的问题,之前的垂直跑马灯是只有文字跑马灯,新版需要加上. 之前是用的MarqueeView,看了下源代码是只支持文字的,于是我就改了下原作者的源代码. MarqueeView类之前作者的 // 创建ViewFlipper下的TextView private TextView createTextView(CharSequence text, int position) { TextView tv = new TextView(mConte

  • Android TextView实现跑马灯效果的方法

    本文为大家分享一个非常简单但又很常用的控件,跑马灯状态的TextView.当要显示的文本长度太长,又不想换行时用它来显示文本,一来可以完全的显示出文本,二来效果也挺酷,实现起来超级简单,所以,何乐不为.先看下效果图: 代码实现 TextView自带了跑马灯功能,只要把它的ellipsize属性设置为marquee就可以了.但有个前提,就是TextView要处于被选中状态才能有效果,看到这,我们就很自然的自定义一个控件,写出以下代码: public class MarqueeTextView ex

随机推荐