前言: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";@Overrideprotected 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() {@Overridepublic 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"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><ViewFlipperandroid: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"><ImageViewandroid:id="@+id/flipper_image"android:layout_width="30dp"android:layout_height="30dp" /><TextViewandroid: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"><translateandroid: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"><translateandroid: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" />