一個有上下滾動效果的TextView

YvesCheung發表於2018-03-18
TextView

RollingTextView

preview

特性

  • 使用簡單，API與TextView類似，setText方法可帶有上下滾動的動畫
  • 支援xml設定android:textSize/android:textColor/android:textStyle等常用屬性
  • 可高度定製，支援任何單個字元的上下滾動變化效果

動畫效果

策略

可以通過設定不同的動畫策略來實現不同的滾動效果

預設的動畫是小字元向大字元變化時向下滾動，反之向上滾動

也可以指定讓滾動向同一個方向

進位動畫可以從低位數字進位到高位數字，不止是適用於十進位制。但只能用於長度小於10的字串防止溢位整型數。只能用於包含0的字元序列，否則進位的計算將沒有意義。

StrategyCompare

字元的順序

  • 字元的順序需要自行設定，告訴RollingTextView怎麼從原字元滾動變化到目標字元
  • 常用的字元順序可以在 CharOrder 常量中找到
  • 當新增多個順序時且都適用於目標字元和原字元，前面設定的優先順序會更高
alphaBetView.addCharOrder(CharOrder.Alphabet);
alphaBetView.addCharOrder(CharOrder.UpperAlphabet);
alphaBetView.addCharOrder(CharOrder.Number);
alphaBetView.addCharOrder(CharOrder.Hex);
alphaBetView.addCharOrder(CharOrder.Binary);
複製程式碼

charOrderCompare

滾動流暢度

可以通過傳遞一個 factor 引數來調整動畫的流暢度。 factor 值越接近0.0，滾動會顯得比較跳躍。而 factor 值越接近1.0，滾動越平滑

stickyFactor

其他

更多的想法可自行實現 CharOrderStrategy 介面，定製自己的動畫效果

配置

  1. 在App根目錄的project build.gradle檔案中新增：

    allprojects {
 	repositories {
 		...
		maven { url 'https://jitpack.io' }
 	}
}
複製程式碼

  2. 在對應的module 中新增依賴：

    dependencies {  
    compile 'com.github.YvesCheung:RollingText:1.2.0'
}
複製程式碼

使用

xml設定

<com.yy.mobile.rollingtextview.RollingTextView
    android:id="@+id/alphaBetView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="i am text"
    android:textSize="25sp" 
    android:textColor="#1d1d1d"
    android:textStyle="bold"
    android:gravity="center"
    android:shadowColor="#ffdd00"
    android:shadowDx="4dp"
    android:shadowDy="4dp"/>
複製程式碼

程式碼設定

final RollingTextView rollingTextView = findViewById(R.id.alphaBetView);
rollingTextView.setAnimationDuration(2000L);
rollingTextView.setCharStrategy(Strategy.NormalAnimation);
rollingTextView.addCharOrder(CharOrder.Alphabet);
rollingTextView.setAnimationInterpolator(new AccelerateDecelerateInterpolator());
rollingTextView.addAnimatorListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        //finsih
    }
});
rollingTextView.setText("i am a text");
複製程式碼

專案地址：github.com/YvesCheung/…

相關文章