Android Resources

Animation

Alpha

res/anim/view_tween_animation_alpha.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="5000" android:fromAlpha="0.2" android:toAlpha="1.0" />
複製代碼

AnimationUtils.loadAnimation(context, R.anim.view_tween_animation_alpha)
    .apply {
        mAnimations.add(this)
        mBinding.tvViewTweenAlpha.startAnimation(this)
    }
複製代碼

Rotate

res/anim/view_tween_animation_rotate.xml

<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="5000" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" />
複製代碼

AnimationUtils.loadAnimation(context, R.anim.view_tween_animation_rotate)
    .apply {
        mAnimations.add(this)
        mBinding.tvViewTweenRotate.startAnimation(this)
    }
複製代碼

Scale

res/anim/view_tween_animation_scale.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="5000" android:fromXScale="0.2" android:fromYScale="0.2" android:pivotX="0.0" android:pivotY="0.0" android:toXScale="1.0" android:toYScale="1.0" />
複製代碼

AnimationUtils.loadAnimation(context, R.anim.view_tween_animation_scale)
    .apply {
        mAnimations.add(this)
        mBinding.tvViewTweenScale.startAnimation(this)
    }
複製代碼

translate

res/anim/view_tween_animation_translate.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="5000" android:fromXDelta="-100" android:fromYDelta="-10" android:toXDelta="100" android:toYDelta="10" />
複製代碼

AnimationUtils.loadAnimation(context, R.anim.view_tween_animation_translate)
    .apply {
        mAnimations.add(this)
        mBinding.tvViewTweenTranslate.startAnimation(this)
    }
複製代碼

Set

res/anim/view_tween_animation_set.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="5000" android:interpolator="@android:anim/accelerate_decelerate_interpolator">
    <alpha android:fromAlpha="0.2" android:toAlpha="1.0" />

    <rotate android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" />

    <scale android:fromXScale="0.2" android:fromYScale="0.2" android:pivotX="0.0" android:pivotY="0.0" android:toXScale="1.0" android:toYScale="1.0" />

    <translate android:fromXDelta="-100" android:fromYDelta="-10" android:toXDelta="100" android:toYDelta="10" />

</set>
複製代碼

AnimationUtils.loadAnimation(context, R.anim.view_tween_animation_set)
    .apply {
        mAnimations.add(this)
        mBinding.tvViewTweenSet.startAnimation(this)
    }
複製代碼

Frame

res/drawable/view_frame_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true">

    <item android:drawable="@android:color/holo_green_dark" android:duration="1000" />
    <item android:drawable="@android:color/holo_blue_bright" android:duration="1000" />
    <item android:drawable="@android:color/holo_orange_dark" android:duration="1000" />
    <item android:drawable="@android:color/holo_red_dark" android:duration="1000" />
    <item android:drawable="@android:color/holo_purple" android:duration="1000" />

</animation-list>
複製代碼

mBinding.tvViewFrame.run {
    setBackgroundResource(R.drawable.view_frame_animation)
    if (background is Animatable) {
        (background as Animatable).start()
    }
}
複製代碼

Animator

Value

res/animator/property_animator_value.xml

<?xml version="1.0" encoding="utf-8"?>
<animator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:repeatCount="5" android:repeatMode="reverse" android:valueFrom="0f" android:valueTo="-100f" android:valueType="floatType" />
複製代碼

(AnimatorInflater.loadAnimator(
    context,
    R.animator.property_animator_value
) as ValueAnimator)
    .apply {
        mAnimators.add(this)
        addUpdateListener {
            mBinding.tvPropertyValue.translationX = it.animatedValue as Float
        }
        start()
    }
複製代碼

Object

res/animator/property_animator_object.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="5000" android:propertyName="textColor" android:valueFrom="@color/colorPrimary" android:valueTo="@color/colorAccent" android:valueType="colorType" />
複製代碼

(AnimatorInflater.loadAnimator(
    context,
    R.animator.property_animator_object
) as ObjectAnimator)
    .apply {
        mAnimators.add(this)
        target = mBinding.tvPropertyObject
        start()
    }
複製代碼

Set

res/animator/property_animator_set.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="together">
    <animator android:duration="1000" android:repeatCount="5" android:repeatMode="reverse" android:valueFrom="0f" android:valueTo="-100f" android:valueType="floatType" />

    <objectAnimator android:duration="6000" android:propertyName="textColor" android:valueFrom="@color/colorPrimary" android:valueTo="@color/colorAccent" android:valueType="colorType" />
</set>
複製代碼

(AnimatorInflater.loadAnimator(context, R.animator.property_animator_set) as AnimatorSet)
    .apply {
        mAnimators.add(this)
        (this.childAnimations[0] as ValueAnimator).addUpdateListener {
            mBinding.tvPropertySet.translationX = it.animatedValue as Float
        }
        setTarget(mBinding.tvPropertySet)
        start()
    }
複製代碼

ColorStateList

res/color/color_state_list.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- pressed -->
    <item android:color="#ffff0000" android:state_pressed="true" />
    <!-- focused -->
    <item android:color="#ff0000ff" android:state_focused="true" />
    <!-- default -->
    <item android:color="#ff000000" />
</selector>
複製代碼

<Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:text="@string/menu_color_state_list" android:textAllCaps="false" android:textColor="@color/color_state_list" />
複製代碼

Drawable - 可繪製對象資源

Bitmap File - 位圖文件

res/drawable/drawable_bitmap.xml

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:alpha="0.5" android:antialias="true" android:src="@drawable/ic_android_developers" android:tileMode="mirror" />
複製代碼

<ImageView android:id="@+id/iv_bitmap" android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="BitmapDrawable" app:srcCompat="@drawable/drawable_bitmap" />
複製代碼

Nine-Patch File - 九宮格文件

res/drawable/drawable_nine_patch.xml

<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/ic_android_developers_patch" />
複製代碼

<TextView android:id="@+id/tv_nine_patch" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:background="@drawable/ic_android_developers_patch" android:text="@string/draw_9_patch_content" />
複製代碼

Layer List - 圖層列表

res/drawable/drawable_layer_list.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
    <item android:width="60dp" android:height="60dp" android:drawable="@android:color/holo_red_dark" tools:ignore="UnusedAttribute" />
    <item android:width="60dp" android:height="60dp" android:drawable="@android:color/holo_green_dark" android:left="10dp" android:top="10dp" tools:ignore="UnusedAttribute" />
    <item android:width="60dp" android:height="60dp" android:drawable="@android:color/holo_blue_dark" android:left="20dp" android:top="20dp" tools:ignore="UnusedAttribute" />
</layer-list>
複製代碼

<ImageView android:id="@+id/iv_layers" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:contentDescription="LayerDrawable" app:srcCompat="@drawable/drawable_layer_list" />

複製代碼

State List - 狀態列表

res/drawable/drawable_state_list.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- pressed -->
    <item android:drawable="@color/colorAccent" android:state_pressed="true" />
    <!-- focused -->
    <item android:drawable="@color/colorAccent" android:state_focused="true" />
    <!-- hovered -->
    <item android:drawable="@color/colorAccent" android:state_hovered="true" />
    <!-- default -->
    <item android:drawable="@color/colorPrimaryDark" />
</selector>
複製代碼

<Button android:id="@+id/btn_state_list" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:background="@drawable/drawable_state_list" android:text="StateListDrawable" android:textAllCaps="false" android:textColor="@android:color/white" />
複製代碼

Level List - 級別列表

res/drawable/drawable_level_list.xml

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:drawable/star_off" android:maxLevel="0" />
    <item android:drawable="@android:drawable/star_on" android:maxLevel="1" />
</level-list>
複製代碼

<ImageButton android:id="@+id/ib_level_list" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:contentDescription="LevelListDrawable" android:src="@drawable/drawable_level_list" />
複製代碼

mBinding.ibLevelList.setOnClickListener {
    (it as ImageButton).drawable.level.let { level ->
        if (level == 1) {
            it.drawable.level = 0
        } else {
            it.drawable.level = 1
        }
    }
}
複製代碼

Transition Drawable - 轉換可繪製對象

res/drawable/drawable_transition.xml

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:drawable/star_big_on" />
    <item android:drawable="@android:drawable/star_big_off" />
</transition>
複製代碼

<ImageButton android:id="@+id/ib_transition" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:contentDescription="TransitionDrawable" android:src="@drawable/drawable_transition"/>
複製代碼

mBinding.ibTransition.setOnClickListener {
    ((it as ImageButton).drawable as TransitionDrawable).startTransition(500)
}
複製代碼

Inset Drawable - 插入可繪製對象

res/drawable/drawable_insert.xml

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@color/colorAccent" android:insetLeft="10dp" android:insetTop="10dp" android:insetRight="10dp" android:insetBottom="10dp" />
複製代碼

<Button android:id="@+id/btn_insert" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:foreground="@drawable/drawable_insert" android:text="InsertDrawable" android:textAllCaps="false" android:textColor="@android:color/white" />
複製代碼

Clip Drawable - 裁剪可繪製對象

res/drawable/drawable_clip.xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android" android:clipOrientation="horizontal" android:drawable="@drawable/ic_android_developers" android:gravity="left"/>
複製代碼

<ImageView android:id="@+id/iv_clip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:contentDescription="ClipDrawable" android:src="@drawable/drawable_clip" />
複製代碼

mBinding.ivClip.drawable.level = 1000
mBinding.ivClip.setOnClickListener {
    (it as ImageView).drawable.let { drawable ->
        drawable.level += 1000
        if (drawable.level >= 10000) {
            drawable.level = 0
        }
    }
}
複製代碼

Scale Drawable - 縮放可繪製對象

res/drawable/drawable_scale.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:drawable="@drawable/ic_android_developers" tools:level="5000" android:scaleWidth="80%" android:scaleHeight="80%" android:scaleGravity="center" />
複製代碼

<ImageView android:id="@+id/iv_scale" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:contentDescription="ScaleDrawable" android:background="@drawable/drawable_scale" />
複製代碼

mBinding.ivScale.background.level = 1000
mBinding.ivScale.setOnClickListener {
    (it as ImageView).background.let { drawable ->
        drawable.level += 1000
        if (drawable.level >= 10000) {
            drawable.level = 0
        }
    }
}
複製代碼

Shape Drawable - 形狀可繪製對象

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadius="8dp" android:shape="rectangle" android:useLevel="false">

    <!--爲形狀產生圓角。僅當形狀爲矩形時適用。-->
    <corners android:radius="8dp" />
    
    <!--用於填充形狀的純色。-->
    <!-- <solid android:color="@color/colorPrimaryDark" />-->

    <!--指定形狀的漸變顏色。-->
    <gradient android:angle="90" android:centerColor="@android:color/white" android:centerX="0.5" android:centerY="0.5" android:endColor="@color/colorAccent" android:startColor="@color/colorPrimary" />

    <!--要應用到包含視圖元素的內邊距（這會填充視圖內容的位置，而非形狀）。-->
    <padding android:bottom="10dp" android:left="20dp" android:right="20dp" android:top="10dp" />

    <!--形狀的大小。-->
    <size android:width="100dp" android:height="100dp" />

    <!--形狀的筆劃中線。外邊框-->
    <stroke android:width="10dp" android:color="@color/colorPrimary" android:dashWidth="20dp" android:dashGap="10dp" />
</shape>
複製代碼

<TextView android:id="@+id/tv_gradient" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:background="@drawable/drawable_gradient" android:text="@string/draw_9_patch_content" />
複製代碼