自定義控件：垂直輪播的小貼士Banner，仿 淘寶app的“淘寶頭條”

VerticalTipsBanner

現在很多App都有2行的文章小貼士功能，垂直方向輪播展示 文章標題。現在很多App都有2行的文章小貼士功能，垂直方向輪播展示 文章標題。比如淘寶app的“淘寶頭條”、螞蟻財富app的“財富頭條”，都可以用該控件展示，只需要傳入標題列表就可以了，還可以方便配置展示佈局、動畫細節等。

效果圖

使用方法

Gradle配置

1. 在project的build.gradle添加如下代碼

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

2. 在Module的build.gradle添加依賴

compile "com.github.alexchenopen:VerticalTipsBanner:0.0.5"

3. 在xml中使用該控件

<com.alex.widget.banner.tips.TipsBanner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/white"
        app:tips_layout="@layout/layout_tips"
        app:delay_time="3000"
        app:is_auto_play="true"
        app:is_scroll="false"
        app:scroll_duration="4000"/>  

可以直接在xml佈局文件中設置 滑動間隔delay_time、滑動時間scroll_duration、是否自動滑動is_auto_play、是否可以拖動is_scroll

也可以在Activity中通過Java代碼控制

banner = (TipsBanner) findViewById(R.id.banner);
banner.setDelayTime(3000)
        .setScrollTime(4000)
        .setAutoPlay(true)
        .setScroll(false);

xml佈局中 app:tips_layout="@layout/layout_tips" 設置tips展示佈局，必須把2個TextView的id定義爲tvTopTips和tvBottomTips 比如

<?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="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvTopTips"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="tips"
        android:textColor="#000"
        android:textSize="16sp"/>

    <TextView
        android:id="@+id/tvBottomTips"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="tips"
        android:textColor="#08c3a6"
        android:textSize="16sp"/>
</LinearLayout>

4、傳入tips列表

List<String> tipsList = new ArrayList<>();
        tipsList.add("貴州茅臺接連出現折價大宗交易");
        tipsList.add("創紀錄！恆指剛剛突破三萬點！");
        tipsList.add("大衆領先合資SUV集體下探");
        tipsList.add("基金辣評 | 大象起舞");
        tipsList.add("滬深百元股陣營擴編 達到23只");
banner.setTipsList(tipsList);
banner.start();

5、監控點擊事件

banner.setOnTopTipsClickListener(new OnTopTipsClickListener() {
            @Override
            public void OnTopTipsClick(int position) {
                Log.d(TAG,  "點擊" + position);
            }
        });

banner.setOnBottomTipsClickListener(new OnBottomTipsClickListener() {
            @Override
            public void OnBottomTipsClick(int position) {
                Log.d(TAG,  "點擊" + position);
            }
        });

代碼鏈接 點擊打開鏈接 或者 點擊打開鏈接