Android开发:ViewFlipper实现文字广告轮播

背景:

项目中首页需要有个新闻广告的文字轮播,如下图:

本来在github上随便找了几个库,但是用着都不太好,因为来回切换页面的时候会有重影,体验不是很好,正好看到android原生ViewFlipper其实可以实现滚动的,因此记录一下。

1.设置文字进入和退出动画

进入动画:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <translate
      android:fromYDelta="100%p"
      android:toYDelta="0"
      android:duration="1000" />
</set>

退出动画:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <alpha
      android:duration="1000"
      android:fromAlpha="1.0"
      android:toAlpha="0.0" />
  <translate
      android:duration="1000"
      android:fromYDelta="0%p"
      android:toYDelta="-100%p" />

</set>

2.在布局文件中引入ViewFlipper

 <ViewFlipper
              android:id="@+id/tv_banner"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:autoStart="true"
              android:flipInterval="2000"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintStart_toEndOf="@+id/imageView18"
              app:layout_constraintTop_toTopOf="parent"
              android:inAnimation="@anim/anim_come_in"
              android:outAnimation="@anim/anim_get_out"/>

3.自定义view实现我们的文字视图,其实就是一个textView,但是我们还需要点击文字的时候跳转到文章详情,因此把自定义view封装起来方便一点,创建view的时候把数据源传进去,点击的时候直接可以拿到id跳转文章详情


/**
 * Date : 2020/9/22
 * Author : Davaid.lvfujiang
 * Desc :
 */
public class ArticleView extends ConstraintLayout implements View.OnClickListener{
    /**数据源*/
    private HomeBean.RollBean rollBean;
    private Context context;

    public ArticleView(Context context, HomeBean.RollBean rollBean) {
        super(context);
        this.rollBean = rollBean;
        this.context = context;
        View view = inflate(context, R.layout.article_view, this);
        TextView textView = view.findViewById(R.id.tv_content);
        textView.setText(rollBean.getTitle());
        textView.setOnClickListener(this);
    }

    public ArticleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public ArticleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }



    @Override public void onClick(View v) {
        Intent intent = new Intent();
        intent.setClass(context, ArticleDetailActivity.class);
        intent.putExtra("id", rollBean.getId());
        context.startActivity(intent);
    }
}

自定义view的布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
  <TextView
      android:id="@+id/tv_content"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:ellipsize="end"
      android:paddingTop="8dp"
      android:paddingBottom="8dp"
      android:maxLines="1"
      android:textColor="@android:color/black"
      android:textSize="14sp"
      android:text=""
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      />
</android.support.constraint.ConstraintLayout>

4.最后在activity中给ViewFlipper循环添加数据

@BindView(R.id.tv_banner) ViewFlipper viewFlipper;
  /**
     * 初始化轮播文字广告
     *
     * @param homeBean
     */
    public void initAdvertising(HomeBean homeBean) {
        final List<HomeBean.RollBean> roll = homeBean.getRoll();
        if (roll != null && roll.size() > 0) {
            for (HomeBean.RollBean rollBean : roll) {
                viewFlipper.addView(new ArticleView(getActivity(), rollBean));
            }
            viewFlipper.startFlipping();
        }
    }

 

©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页