1. 先看效果图
感谢鸿洋大神,我是从他的博客上看到的,在自己实现的。
2. 使用android 原生的控件ViewFlipper 实现
- activity布局的实现
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.spore.marqueeview.MainActivity">
<ViewFlipper
android:id="@+id/marquee_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autoStart="true"
android:background="#fff"
android:flipInterval="3000"
android:inAnimation="@anim/anim_marquee_in"
android:outAnimation="@anim/anim_marquee_out">
</ViewFlipper>
</RelativeLayout>
3. 各属性的含义
- autoStart : 顾名思义,自动滚动。
- flipInterval: 滑动间隔时间。
- inAnimation: 进入动画。
- outAnimation: 出来的动画。
- 其中动画就是一个简单的Y轴 xml平移动画, 都在res/anim下。
- anim_in
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
>
<translate
android:duration="1500"
android:fromYDelta="100%p"
android:toYDelta="0">
</translate>
</set>
- anim_in
- anim_out
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="1500"
android:fromYDelta="0"
android:toYDelta="-100%p">
</translate>
</set> - 也可以通过代码设置。
- isFlipping() : 判断是否滑动。
- marqueeView.setFlipInterval():设置滑动的间隙。
- setOutAnimation() : 设置View出去的动画。
- setInAnimation() : 设置View进入的动画。
- showNext() : 显示ViewFlipper中的下个View。
- showPrevious : 显示ViewFlipper里面的上一个View 。
4. 自定义广告条布局文件。
<?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="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/marquee_text_background"
android:padding="5dp"
android:text="热评"
android:textColor="@android:color/holo_orange_dark"
android:textSize="18sp"/>
<TextView
android:singleLine="true"
android:textSize="18sp"
android:paddingLeft="10dp"
android:gravity="center_vertical"
android:text="魅族_魅蓝note5_新品上市,赶快拥有"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
- 这个滚动条就简单的实现了。