快捷導(dǎo)航

Android控件ViewFlipper仿淘寶頭條垂直滾動(dòng)廣告條

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

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

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

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

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

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

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

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

布局的編寫很簡(jiǎ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用到的屬性，這些屬性其實(shí)都可以使用代碼實(shí)現(xiàn)，只不過(guò)這里為了代碼看上去美觀，才放在布局里的

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

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

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

這里還涉及到兩個(gè)動(dòng)畫其實(shí)就是一個(gè)平移的動(dòng)畫，它們都保存在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)然，如果你對(duì)動(dòng)畫xml比較熟悉，自己可以實(shí)現(xiàn)更多好看的效果

二、自定義ViewFlipper的廣告條

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

<?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來(lái)了：曉龍835+8G運(yùn)存！"
      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，掀起上衣后，美爆全場(chǎng)！"
      android:textColor="#333"
      android:textSize="14sp" />
  </LinearLayout>
</LinearLayout>

其效果是

三、代碼為ViewFlipper添加廣告條

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

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垂直滾動(dòng)廣告條

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

您可能感興趣的文章: