1. 程式人生 > >Android 上下滾動的廣告條

Android 上下滾動的廣告條

有些應用裡面會有一些上下滾動文字的廣告,尤其是關於商城裡面的容易出現,具體的效果相比大家也見過,先看看效果吧
這裡寫圖片描述
這是怎麼實現的呢,有人說是用TextView實現,有的說這是跑馬燈效果。其實說TextView實現這種效果的同學只是說對了一半,這個效果的實現是離不開TextView的,因為文字的顯示的大小和顏色都可以通過TextView來實現。但是隻有TextView是萬萬不能實現的。這裡還需要用到一種控制元件那就是TextSwitcher。TextSwitcher 字面理解是文字切換器,是ViewSwitcher的子類,ViewSwitcher的父類則是ViewAnimator,而ViewAnimator的父類又是FrameLayout。從ViewSwitcher來看,是View交換器,TextSwitcher繼承自ViewSwitcher,TextView是View的子類,是用來交換TextView。ViewSwitcher 代表了檢視切換元件, 又繼承FrameLayout ,FrameLayout 的效果想必大家都知道,就是一層一層的將多個View疊在一起 ,每次只顯示一個元件.由於ViewSwitcher 支援指定動畫效果,當我們從一個View切換到另個View時,可以實現切換的動畫效果。我們既然使用TextSwitcher進行文字切換,那麼我們需要的文字肯定不是一個,於是TextSwitcher的父類ViewSwitcher給我們提供了一個ViewFactory()工廠方法,我們就可以使用ViewSwitcher的ViewFactory裡面的makeView()方法建立View或新增自己建立的View。
這個上下滾動也可以實現無限的迴圈滾動的效果,雖然不用介面卡去設定數量為int的最大值,但是我們可以設定從0開始,讓數量一直增加到int的最大值效果是一樣的。 具體的實現程式碼也不多,就把程式碼展示出來吧
MainActivity類

package com.lyxrobert.textshuffling;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Handler;
import android.os.Message;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.View;
import android.widget.ImageView;
import
android.widget.TextSwitcher; import android.widget.TextView; import android.widget.ViewSwitcher; public class MainActivity extends Activity { private ImageView img_notice; private AnimationDrawable animationDrawable; private TextSwitcher tv_notice; private String[] mAdvertisements ; private
final int HOME_AD_RESULT = 1; private int mSwitcherCount=0; private Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); switch (msg.what) { // 廣告 case HOME_AD_RESULT: tv_notice.setText(mAdvertisements[mSwitcherCount % mAdvertisements.length]); mSwitcherCount++; mHandler.sendEmptyMessageDelayed(HOME_AD_RESULT, 3000); break; } } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView() { img_notice = (ImageView)findViewById(R.id.img_notice); img_notice.setImageResource(R.drawable.notices); animationDrawable = (AnimationDrawable)img_notice.getDrawable(); animationDrawable.start(); tv_notice = (TextSwitcher) findViewById(R.id.tv_notice); tv_notice.setFactory(new ViewSwitcher.ViewFactory() { // 這裡用來建立內部的檢視,這裡建立TextView,用來顯示文字 public View makeView() { TextView tv = new TextView(getApplicationContext()); // 設定文字的顯示單位以及文字的大小 tv.setTextSize(TypedValue.COMPLEX_UNIT_DIP, getResources() .getDimension(R.dimen.font_size)); return tv; } }); tv_notice.setInAnimation(getApplicationContext(), R.anim.slide_in_bottom); tv_notice.setOutAnimation(getApplicationContext(), R.anim.slide_out_up); mAdvertisements = new String[] { "海外助理服務,搶先體驗","日本個籤1799元三年多次","日本個籤1999元五年多次" }; mHandler.sendEmptyMessage(HOME_AD_RESULT); } }

activity_main.xml佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_margin="10dp"
    tools:context="com.lyxrobert.textshuffling.MainActivity">

    <ImageView
    android:id="@+id/img_notice"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:src="@drawable/notices"/>
    <TextSwitcher
        android:id="@+id/tv_notice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:textSize="24dp"  />
</LinearLayout>

從底部進入的動畫檔案enter_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:shareInterpolator="false" 
    android:zAdjustment="top"
    >
    <translate
        android:duration="1000"
        android:fromYDelta="100%p"
        android:toYDelta="0" />
</set>

從頂部離開的動畫檔案leave_top.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:shareInterpolator="false" 
    android:zAdjustment="top"
    >
    <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="-100%p" />
</set>

具體的實現就是上面那麼多。如果對你有幫助或者有疑問歡迎留言