[Android] Folivora，在layout中直接建立drawable

cricin發表於2019-02-15
Android

[Android] Folivora，在layout中直接建立drawable

為什麼需要Folivora

對於android開發者來說，在layout檔案中引用drawable來設定View的背景或者ImageView的src是很常見的事情，需要我們在drawable資料夾下寫好xml檔案就可以應用了，但是有許多drawable檔案可能只被使用了一次，也有可能我們只是為了實現一個簡單的圓角背景的功能。越來越多的drawable檔案導致開發和維護成本的增加(還有強迫症)，有沒有什麼方法可以直接在layout檔案中去建立drawable呢，Folivora為你提供了這樣的功能。

Folivora(樹懶), 形狀略似猴，動作遲緩，常用爪倒掛在樹枝上數小時不移動，故稱之為樹懶。

Folivora能做什麼

Folivora可以為你的View設定一個背景或者ImageView的src,當前支援的drawable型別有

  • shape (GradientDrawable)
  • selector (StateListDrawable)
  • ripple (RippleDrawable)
  • layerlist (LayerListDrawable)
  • levellist (LevelListDrawable)
  • inset (InsetDrawable)
  • clip (ClipDrawable)
  • scale (ScaleDrawable)
  • animation (AnimationDrawable)

[Android] Folivora，在layout中直接建立drawable

使用方法

只需要在layout.xml中加入自定義的屬性, 告訴Folivora如何建立drawable就可以了

我們來試著建立一個簡單的圓角效果:

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:padding="20dp"
  android:text="shape1"
  app:drawableType="shape"
  app:shapeSolidColor="@android:color/holo_blue_light"
  app:shapeSolidCorner="5dp"/>
複製程式碼

效果是這樣的

[Android] Folivora，在layout中直接建立drawable

下面我們來建立一個只有正常狀態和按下狀態的selector:

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:padding="20dp"
  android:text="selector"
  app:drawableType="selector"
  app:selectorStateNormal="@android:color/holo_blue_light"
  app:selectorStatePressed="@android:color/holo_blue_dark"/>
複製程式碼

顯示的效果是這樣的

[Android] Folivora，在layout中直接建立drawable

這樣的點選效果太單調了，我們來嘗試一下ripple漣漪效果:

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:padding="20dp"
  android:text="ripple"
  app:drawableType="ripple"
  app:rippleColor="@android:color/white"
  app:rippleContent="@color/colorAccent"/>
複製程式碼

[Android] Folivora，在layout中直接建立drawable

使用ripple的確是酷炫多了，但是ripple效果是5.0之後引入的，那5.0之前的裝置怎麼辦呢，Folivora為你提供了RippleFallback介面，用來建立一個替換RippleDrawable的Drawable例項.

Folivora.setRippleFallback(new RippleFallback()){
  @Override
  public Drawable onFallback(ColorStateList ripple, Drawable content, Drawable mask, Context ctx){
    StateListDrawable sld = new StateListDrawable();
    sld.addState(new int[]{android.R.attr.state_pressed}, new ColorDrawable(ripple.getDefaultColor()));
    sld.addState(new int[0], content);
    return sld;
  }
}

複製程式碼

更多可用的drawable型別和相應屬性可以點這裡檢視

  • 注入Folivora :

我們在layout檔案中設定了這些屬性之後，執行app是沒有任何效果的，View並不認識這些自定義的屬性，但是Folivora知道，所以想讓我們設定的屬性生效，我們需要在context中啟用Folivora,可以使用下面兩種方法：

public class MainActivity extends AppCompatActivity {
  @Override
  protected void attachBaseContext(Context newBase) {
    super.attachBaseContext(Folivora.wrap(newBase));
  }
}
複製程式碼

或者

public class MainActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Folivra.installViewFactory(this);
    setContentView(R.layout.your_layout_xml_name);
  }
}

複製程式碼

Gradle依賴

  dependencies {
    implementation 'cn.cricin:folivora:0.0.2'
  }
複製程式碼

支援工具

在Android Studio中提供了實時預覽編輯layout檔案，但是IDE不識別自定義的屬性，預覽視窗渲染不出自定義的View背景，也無法使用屬性提示

為了解決這個問題，Folivora提供了支援工具，按下面的方式使用：

  1. 下載jar包 點選下載。
  2. 拷貝下載的檔案到Android Studio安裝目錄下的plugins/android/lib/下
  3. 重啟IDE，如果你的專案依賴中有Folivora，開啟layout檔案即可實時預覽

注: 支援工具依賴java的classloader載入類的順序(替換LayoutLibraryLoader和AndroidDomExtender)，所以下載的jar包請不要重新命名，直接拷貝即可

預覽效果

[Android] Folivora，在layout中直接建立drawable

相關文章