Android中的類似淘寶的跑馬燈

一、先在res下創建anim文件夾，裏面創建兩個xml，負責內容進出動畫

1. 近new_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500">
    <translate
        android:fromXDelta="0"
        android:fromYDelta="100%p"
        android:toXDelta="0"
        android:toYDelta="0" />
</set>

2. 出new_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500">
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="0"
        android:toYDelta="-100%p" />
</set>

二、文本內容旁邊經常會有一個帶有顏色的文本和背景，所以需要在drawable下創建一個樣式shape.xml,你可選擇添加

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white" />
    <stroke
        android:width="1dp"
        android:color="@android:color/holo_red_light" />

    <corners android:radius="3dp" />
</shape>

三、創建跑馬燈中每條內容的佈局

<?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:weightSum="2">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:padding="3dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/shape"
            android:paddingBottom="3dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingTop="3dp"
            android:text="熱點"
            android:textColor="@android:color/holo_red_light" />

        <TextView
            android:id="@+id/tv_title1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:ellipsize="end"
            android:gravity="center_vertical"
            android:maxLines="1"
            android:paddingLeft="5dp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_second"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:padding="3dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/shape"
            android:paddingBottom="3dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingTop="3dp"
            android:text="熱點"
            android:textColor="@android:color/holo_red_light" />

        <TextView
            android:id="@+id/tv_title2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:ellipsize="end"
            android:gravity="center_vertical"
            android:maxLines="1"
            android:paddingLeft="5dp" />

    </LinearLayout>

</LinearLayout>

四、在使用的地方佈局添加如下

<ViewFlipper
        android:id="@+id/viewFlipper"
        android:layout_gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="50dp"/>

五、控制跑馬燈內容、滾動與停止

public class MainActivity extends AppCompatActivity {

    private ViewFlipper viewFlipper;
    private List<String> titles;

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

    private void initView() {
        viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);
    }

    private void setViews() {
        if (titles.size() > 0) {
            //計算ViewFlipper視圖的數目
            int viewNum = titles.size() / 2 + 1;
            for (int i = 0; i < viewNum; i++) {
                //每一個視圖的第一個新聞標題中集合中的下標值
                final int position = i * 2;
                View itemView = View.inflate(this, R.layout.title_view, null);
                TextView tvTitle1 = (TextView) itemView.findViewById(R.id.tv_title1);
                TextView tvTitle2 = (TextView) itemView.findViewById(R.id.tv_title2);
                LinearLayout ll = (LinearLayout) itemView.findViewById(R.id.ll_second);
                tvTitle1.setText(titles.get(position));
                //判斷第二行是否有數據
                if (position + 1 < titles.size()) {
                    tvTitle2.setText(titles.get(position + 1));
                } else {
                    //表示該視圖的第二個標題沒有數據，隱藏第二行佈局
                    ll.setVisibility(View.GONE);
                }
                //標題1的點擊事件
                tvTitle1.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this, titles.get(position), Toast.LENGTH_SHORT).show();
                    }
                });
                //標題2的點擊事件
                tvTitle2.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this, titles.get(position + 1), Toast.LENGTH_SHORT).show();
                    }
                });
                viewFlipper.addView(itemView);
            }
            //視圖進入動畫
            viewFlipper.setInAnimation(this, R.anim.new_in);
            //視圖退出動畫
            viewFlipper.setOutAnimation(this, R.anim.new_out);
            //自動開始滾動
            viewFlipper.setAutoStart(true);
            //視圖的切換間隔
            viewFlipper.setFlipInterval(3000);
//            viewFlipper.startFlipping();//開始滾動
//            viewFlipper.stopFlipping();//停止滾動
        }
    }

    private void initData() {
        titles = new ArrayList();
        titles.add("週一");
        titles.add("週二");
        titles.add("週三");
        titles.add("週四");
        titles.add("週五");
        titles.add("週六");
        titles.add("周七");
    }

}