Android控件ViewFlipper仿淘寶頭條垂直滾動廣告條

更新時間：2017年05月24日 08:59:53 作者：Hensen_

這篇文章主要為大家詳細介紹了Android控件ViewFlipper仿淘寶頭條垂直滾動廣告條，具有一定的參考價值，感興趣的小伙伴們可以參考一下

ViewFlipper的使用，仿淘寶頭條垂直滾動廣告條，供大家參考，具體內(nèi)容如下

學(xué)習(xí)，學(xué)習(xí)，學(xué)以致用

ViewFlipper是安卓自帶的控件，很多人可能很少知道這個控件，這個控件很簡單，也很好理解，能不能用上實戰(zhàn)就看你們的本事了。下面是淘寶頭條廣告的原效果

下面是我們今天要實現(xiàn)的效果，圖片是Gif，運行效果是很流暢的，由于這個圖片反應(yīng)有點慢，會浪費大家點時間，所以我把它調(diào)快了，大家可以掏出手機打開淘寶看，一模一樣的

從源碼可以看出，其實ViewFlipper間接的繼承了FrameLayout，也可以說ViewFlipper其實就是個FrameLayout，只不過在內(nèi)部封裝了動畫實現(xiàn)和Handler實現(xiàn)一個循環(huán)而已

一、ViewFlipper的布局實現(xiàn)

布局的編寫很簡單，跟普通布局一樣的

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

  <ViewFlipper
    android:id="@+id/vf"
    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"
    android:paddingLeft="30dp" />
</RelativeLayout>

這里介紹ViewFlipper用到的屬性，這些屬性其實都可以使用代碼實現(xiàn)，只不過這里為了代碼看上去美觀，才放在布局里的

android:autoStart：設(shè)置自動加載下一個View
android:flipInterval：設(shè)置View之間切換的時間間隔
android:inAnimation：設(shè)置切換View的進入動畫
android:outAnimation：設(shè)置切換View的退出動畫

下面是ViewFlipper常用的方法介紹，除了可以設(shè)置上面的屬性之外，還提供了其他方法

isFlipping：判斷View切換是否正在進行
setFilpInterval：設(shè)置View之間切換的時間間隔
startFlipping：開始View的切換，而且會循環(huán)進行
stopFlipping：停止View的切換
setOutAnimation：設(shè)置切換View的退出動畫
setInAnimation：設(shè)置切換View的進入動畫
showNext：顯示ViewFlipper里的下一個View
showPrevious：顯示ViewFlipper里的上一個View

這里還涉及到兩個動畫其實就是一個平移的動畫，它們都保存在anim文件夾中

anim_marquee_in.xml

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

anim_marquee_out.xml

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

當(dāng)然，如果你對動畫xml比較熟悉，自己可以實現(xiàn)更多好看的效果

二、自定義ViewFlipper的廣告條

當(dāng)我們準備好了ViewFlipper之后，就應(yīng)該在ViewFlipper里面添加我們的廣告條了，下面是其中一個廣告條的布局文件，另外兩個雷同，只不過改了文字而已

<?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"
  android:padding="8dp"
  android:orientation="vertical">

  <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@drawable/marqueeview_bg"
      android:text="熱議"
      android:textColor="#F14C00"
      android:textSize="12sp" />

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:ellipsize="end"
      android:padding="3dp"
      android:singleLine="true"
      android:text="小米6來了：曉龍835+8G運存！"
      android:textColor="#333"
      android:textSize="14sp" />
  </LinearLayout>

  <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@drawable/marqueeview_bg"
      android:text="熱議"
      android:textColor="#F14C00"
      android:textSize="12sp" />

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:ellipsize="end"
      android:padding="3dp"
      android:singleLine="true"
      android:text="227斤的胖MM，掀起上衣后，美爆全場！"
      android:textColor="#333"
      android:textSize="14sp" />
  </LinearLayout>
</LinearLayout>

其效果是

三、代碼為ViewFlipper添加廣告條

所有的準備條件都準備好了，該開始使用代碼將準備好的東西黏在一起了，代碼很簡單，這里就不多解釋了

public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ViewFlipper vf = (ViewFlipper) findViewById(R.id.vf);

    vf.addView(View.inflate(this, R.layout.view_advertisement01, null));
    vf.addView(View.inflate(this, R.layout.view_advertisement02, null));
    vf.addView(View.inflate(this, R.layout.view_advertisement03, null));
  }
}

源碼下載：Android垂直滾動廣告條

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: