前言:ViewFlipper是一个切换控件,一般用于图片的切换,当然它是可以添加View的,而不限定只用于ImageView,当然我们也可以自定义View达到跑马灯效果。

效果:
在这里插入图片描述

①:MainActivity使用:

 public class MainActivity extends AppCompatActivity {

    private ViewFlipper viewFlipper;

    /**
     * 获取跑马灯数据
     */
    private String bottomFirst = "https://img.zcool.cn/community/0192ef5548e0ba0000009e320ddbe1.jpg";
    private String bottomSecond = "https://img.zcool.cn/community/0192b7563725ff32f87512f6e14db1.jpg";
    private String bottomThird = "https://a.vpimg2.com/upload/merchandise/236513/AK-1102031400044411-1.jpg";
    private String bottomFourth = "https://img001.hc360.cn/hb/MTQ3NDM5MDAzNjE1Mi0xODU1Njg5MjU4.jpg";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewFlipper = this.findViewById(R.id.view_flipper);
        initMarquee();
    }

    private void initMarquee() {
        //防止重复添加
        viewFlipper.removeAllViews();
        for (int i = 0; i < getFlipperData().size(); i++) {
            View view = View.inflate(this, R.layout.layout_view_flipper, null);
            ImageView img = view.findViewById(R.id.flipper_image);
            TextView text = view.findViewById(R.id.flipper_text);
            //设置图片圆角角度
            //RoundedCorners roundedCorners = new RoundedCorners(20);//圆角弧度
            //通过RequestOptions扩展功能,override:采样率,因为ImageView就这么大,可以压缩图片,降低内存消耗.override(300, 300)
            //RequestOptions options = RequestOptions.bitmapTransform(roundedCorners);
            Glide.with(this).load(getFlipperData().get(i).getUrl()).apply(new RequestOptions()
                    .transforms(new CenterCrop(), new RoundedCorners(30))).into(img);
            text.setText(getFlipperData().get(i).getTitle());
            viewFlipper.addView(view);
            final int finalI = i;
            img.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(MainActivity.this, "点击的下标" + finalI, Toast.LENGTH_SHORT).show();
                }
            });
        }
    }

    private List<ViewFlipperDto> getFlipperData() {
        List<ViewFlipperDto> list = new ArrayList<>();
        list.add(new ViewFlipperDto(bottomFirst, "张三发起了拼团"));
        list.add(new ViewFlipperDto(bottomSecond, "李四发起了拼团"));
        list.add(new ViewFlipperDto(bottomThird, "王五发起了拼团"));
        list.add(new ViewFlipperDto(bottomFourth, "赵六发起了拼团"));
        return list;
    }
}

②:布局文件activity_main:

<?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">

    <ViewFlipper
        android:id="@+id/view_flipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:autoStart="true"
        android:layout_margin="15dp"
        android:background="@drawable/marquee_shape"
        android:flipInterval="1500"
        android:inAnimation="@anim/anim_marquee_in"
        android:outAnimation="@anim/anim_marquee_out" />
        
</LinearLayout>

flipInterval:替换的间隔时间(1500=1.5秒)

布局layout_view_flipper:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp">

    <ImageView
        android:id="@+id/flipper_image"
        android:layout_width="30dp"
        android:layout_height="30dp" />

    <TextView
        android:id="@+id/flipper_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:textColor="#ffffff"
        android:textSize="15sp" />

</RelativeLayout>

③:res目录下新建anim动画文件夹
anim_marquee_in:

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

anim_marquee_out:

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

drawable下新建marquee_shape.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp" />
    <solid android:color="#55000000" />
</shape>

④:数据实体类ViewFlipperDto:

public class ViewFlipperDto {
    private String url;//图片地址
    private String title;//标题

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public ViewFlipperDto(String url, String title) {
        this.url = url;
        this.title = title;
    }
}

⑤:图片加载build.gradle加入

implementation 'com.github.bumptech.glide:glide:4.7.1'

AndroidManifest.xml清单文件:

<uses-permission android:name="android.permission.INTERNET" />
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐