Android仿淘宝滚动的头条

http://www.jianshu.com/p/73c04d93cc56

1. 先看效果图

marquee_view.gif

感谢鸿洋大神，我是从他的博客上看到的，在自己实现的。

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_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>

• 这个滚动条就简单的实现了。