ViewFlipper實現豎向廣播輪轉效果

ViewFlipper繼承自ViewAnimator,再上層是FrameLayout,OK,把它當成FrameLayout容器使用。

直接看例子:
layout:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="wy.bzt.com.carousel.MainActivity">


    <ViewFlipper
        android:id="@+id/vf"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
       android:flipInterval="2000"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/test1"
            android:textSize="24sp"
            android:gravity="center_horizontal"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/test2"
            android:textSize="24sp"
            android:gravity="center_horizontal"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/test3"
            android:textSize="24sp"
            android:gravity="center_horizontal"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/test4"
            android:textSize="24sp"
            android:gravity="center_horizontal"
            />
    </ViewFlipper>

</RelativeLayout>

activity:

public class MainActivity extends AppCompatActivity {
 @butterknife.Bind(R.id.vf)
    ViewFlipper vf;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        butterknife.ButterKnife.bind(this);
        vf.startFlipping();
    }
}

好吧,就這麼簡單,直接可以運行了。
爲了效果好一點,實用一點,優化一下代碼:
layout:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="wy.bzt.com.carousel.MainActivity">


    <ViewFlipper
        android:id="@+id/vf"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        >

    </ViewFlipper>

</RelativeLayout>

activity:

public class MainActivity extends AppCompatActivity {

    @butterknife.Bind(R.id.vf)
    ViewFlipper vf;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        butterknife.ButterKnife.bind(this);
        initView();

    }

    private void initView() {
        String [] carousel=getResources().getStringArray(R.array.mycarousel);
        int size= carousel.length;
        for (String s:carousel){
            TextView tv=new TextView(this);
            tv.setLayoutParams(new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
                    FrameLayout.LayoutParams.WRAP_CONTENT));
            tv.setGravity(Gravity.CENTER_HORIZONTAL);
            tv.setText(s);
            tv.setTextSize(dp2px(20));
            vf.addView(tv);
        }
        vf.setFlipInterval(3000);
        vf.setInAnimation(AnimationUtils.loadAnimation(this,R.anim.carousel_in));
        vf.setOutAnimation(AnimationUtils.loadAnimation(this,R.anim.carousel_out));
        vf.startFlipping();
    }
    /** 單位轉換 */
    public  int dp2px( int dp) {
        float scale = getResources().getDisplayMetrics().density;
        return (int) (dp * scale + 0.5f);
    }


}

anim:
carousel_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    >

    <translate
        android:fromYDelta="100%"
        android:toYDelta="0%"
        />
    <alpha android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
</set>

carousel_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    >
    <translate
        android:fromYDelta="0%"
        android:toYDelta="-100%"
        />
    <alpha android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
</set>

strings:

<resources>
    <string name="app_name">Carousel</string>

    <string name="test1">今年過節不收禮~</string>
    <string name="test2">收禮還收腦白金!</string>
    <string name="test3">我就不收腦白金!!!</string>
    <string name="test4">腦黃金巨惠來襲~~</string>


    <string-array name="mycarousel">

        <item >@string/test1</item>
        <item >@string/test2</item>
        <item >@string/test3</item>
        <item >@string/test4</item>
    </string-array>
</resources>

代碼很簡單,就不註釋了。添加了一個動畫效果,一個動態的內容填充效果,只需要更改數據源的內容就可以控制播放內容。OK,就這些了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章