Android -- 仿淘寶廣告條滾動

1，在趕項目的時候我們經常會實現下面這個功能，及添加滾動條廣告廣播，先看一下淘寶的效果

2，這次實現效果主要使用Android自帶的ViewFlipper控件，先來看一下我們的它的基本屬性和基本方法吧

屬性：

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

方法：

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

所以現在實現該功能的思路是：

①創建主布局文件，包含ViewFlipper控件（從源碼來看，ViewFlipper控件是集成FrameLayout，也是相當於一個幀布局，只是包含了一些特殊的屬性）

②創建ViewFlipper的子View，就是兩個LinearLayout（里面包含兩個TextView）

③創建ViewFlipper中子view的進入和退出動畫anim_in和anim_out兩個動畫文件

④在Activity中將兩個子View添加到ViewFlipper中去，調動的是ViewFlipper的addView方法

好了，現在我們來一點點來實現

3，實現 ：

 ①創建主布局文件

 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.qianmo.rollads.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>

    <RelativeLayout
        android:id="@+id/content_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context="com.qianmo.rollads.MainActivity"
        tools:showIn="@layout/activity_main">

        <ViewFlipper
            android:id="@+id/viewFlipper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:autoStart="true"
            android:background="#fff"
            android:flipInterval="3000"
            android:inAnimation="@anim/anim_in"
            android:outAnimation="@anim/anim_out"
            android:paddingLeft="30dp"
            >

        </ViewFlipper>
    </RelativeLayout>


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email"/>

</android.support.design.widget.CoordinatorLayout>

　②創建ViewFlipper的子View，這里有兩個，我就只給出一個來了，另一個是一樣的

　　one_ads.xml

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

    <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:text="熱議"
            android:textColor="#F14C00"
            android:textSize="12sp"
            android:background="@drawable/bg"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:padding="3dp"
            android:singleLine="true"
            android:text="小米8問世，雷胖子現在笑的開心了啦！"
            android:textColor="#333"
            android:textSize="16sp"
            />

    </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:text="熱議"
            android:textColor="#F14C00"
            android:textSize="12sp"
            android:background="@drawable/bg"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:padding="3dp"
            android:singleLine="true"
            android:text="取了個漂亮的媳婦，整的是好開心！"
            android:textColor="#333"
            android:textSize="16sp"
            />

    </LinearLayout>

</LinearLayout>

　　③創建ViewFlipper中子view的進入和退出動畫anim_in和anim_out兩個動畫文件,這里也只給出anim_in的代碼，anim_out代碼是類似的

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

　　④在Activity中將兩個子View添加到ViewFlipper中去，調動的是ViewFlipper的addView方法

　　MainActivity.java

package com.qianmo.rollads;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {

    private ViewFlipper viewFlipper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        viewFlipper.addView(View.inflate(this, R.layout.one_ads, null));
        viewFlipper.addView(View.inflate(this, R.layout.two_ads, null));
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

　　ok，來看一下我們的效果

　　

　　ok，這樣就實現了，代碼地址：https://github.com/543441727/SuspendWindow.git

　　Seee You Next Time~~~