{"id":739,"date":"2020-08-10T16:35:53","date_gmt":"2020-08-10T08:35:53","guid":{"rendered":"https:\/\/badgameshow.com\/fly\/?p=739"},"modified":"2022-12-29T14:34:55","modified_gmt":"2022-12-29T06:34:55","slug":"material-design-shapeableimageview","status":"publish","type":"post","link":"https:\/\/badgameshow.com\/fly\/material-design-shapeableimageview\/","title":{"rendered":"\u3010Material Design\u3011Android ShapeableImageView \u81ea\u5b9a\u7fa9\u5716\u7247\u5f62\u72c0 \u7bc4\u4f8b"},"content":{"rendered":"

\u3010Material Design\u3011Android ShapeableImageView \u81ea\u5b9a\u7fa9\u5716\u7247\u5f62\u72c0 \u7bc4\u4f8b<\/h1>\n

ShapeableImageView \u662f\u5728 Android \u4e2d\u4e00\u7a2e\u53ef\u4ee5\u81ea\u5b9a\u7fa9\u5f62\u72c0\u7684\u5716\u7247\u8996\u5716\uff0c\u53ef\u4ee5\u901a\u904e\u7c21\u55ae\u7684\u8a9e\u6cd5\u4f86\u5c07\u88c1\u526a\u7684\u5f62\u72c0\u61c9\u7528\u65bc\u5716\u7247\u4e0a\uff0c\u53ef\u4ee5\u901a\u904e\u5b83\u7684loadPath\u7684\u65b9\u6cd5\u8f09\u5165\u5f62\u72c0\u6587\u4ef6\u4e2d\u5b9a\u7fa9\u7684\u88c1\u526a\u6a21\u5f0f\uff0c\u9084\u53ef\u4ee5\u5c07\u5716\u7247\u88c1\u526a\u70ba\u5713\u5f62\u6216\u662f\u4efb\u4f55\u5176\u4ed6\u4efb\u610f\u591a\u908a\u5f62\uff0cShapeableImageView \u9084\u63d0\u4f9b\u4e86\u81ea\u5b9a\u7fa9\u908a\u6846\u984f\u8272\u4ee5\u53ca drawable \u8cc7\u6e90\u6620\u5c04\u8a9e\u6cd5<\/h4>\n
\n

\u6587\u7ae0\u76ee\u9304<\/h4>\n
    \n
  1. ShapeableImageView \u5713\u89d2<\/a><\/li>\n
  2. ShapeableImageView \u5713<\/a><\/li>\n
  3. ShapeableImageView \u534a\u5713<\/a><\/li>\n
  4. ShapeableImageView \u5207\u89d2<\/a><\/li>\n
  5. ShapeableImageView \u83f1\u5f62<\/a><\/li>\n
  6. ShapeableImageView \u908a<\/a><\/li>\n
  7. ShapeableImageView \u5c0d\u8a71\u6846<\/a><\/li>\n<\/ol>\n
    \n

    <\/a><\/p>\n

    1.ShapeableImageView \u5713\u89d2<\/h3>\n
    theme.xml<\/h5>\n
    <resources xmlns:tools=\"http:\/\/schemas.android.com\/tools\">\n    <style name=\"ImageStyle\">\n        <item name=\"cornerFamily\">rounded<\/item>\n        <item name=\"cornerSize\">50dp<\/item>\n    <\/style>\n<\/resources>\n<\/code><\/pre>\n
    activity_main.xml<\/h5>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?><!-- Use DrawerLayout as root container for activity -->\n<layout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\">\n\n    <data>\n\n    <\/data>\n\n    <androidx.constraintlayout.widget.ConstraintLayout\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\">\n\n        <com.google.android.material.imageview.ShapeableImageView\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            app:shapeAppearance=\"@style\/ImageStyle\"\n            android:padding=\"20dp\"\n            android:src=\"@drawable\/zombie\"\n            app:strokeColor=\"@color\/black\"\n            app:layout_constraintBottom_toBottomOf=\"parent\"\n            app:layout_constraintEnd_toEndOf=\"parent\"\n            app:layout_constraintStart_toStartOf=\"parent\"\n            app:layout_constraintTop_toTopOf=\"parent\" \/>\n\n    <\/androidx.constraintlayout.widget.ConstraintLayout>\n<\/layout>\n<\/code><\/pre>\n
    <\/p>\n
    <\/a><\/p>\n
    2.ShapeableImageView \u5713<\/h3>\n
    theme.xml<\/h5>\n
    <resources xmlns:tools=\"http:\/\/schemas.android.com\/tools\">\n    <style name=\"ImageStyle\">\n        <item name=\"cornerFamily\">rounded<\/item>\n        <item name=\"cornerSize\">50%<\/item>\n    <\/style>\n<\/resources>\n<\/code><\/pre>\n
    activity_main.xml<\/h5>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?><!-- Use DrawerLayout as root container for activity -->\n<layout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\">\n\n    <data>\n\n    <\/data>\n\n    <androidx.constraintlayout.widget.ConstraintLayout\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\">\n\n        <com.google.android.material.imageview.ShapeableImageView\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            app:shapeAppearance=\"@style\/ImageStyle\"\n            android:padding=\"20dp\"\n            android:src=\"@drawable\/zombie\"\n            app:strokeColor=\"@color\/black\"\n            app:layout_constraintBottom_toBottomOf=\"parent\"\n            app:layout_constraintEnd_toEndOf=\"parent\"\n            app:layout_constraintStart_toStartOf=\"parent\"\n            app:layout_constraintTop_toTopOf=\"parent\" \/>\n\n    <\/androidx.constraintlayout.widget.ConstraintLayout>\n<\/layout>\n<\/code><\/pre>\n
    <\/p>\n
    <\/a><\/p>\n
    3.ShapeableImageView \u534a\u5713<\/h3>\n
    theme.xml<\/h5>\n
    <resources xmlns:tools=\"http:\/\/schemas.android.com\/tools\">\n    <style name=\"ImageStyle\">\n        <item name=\"cornerFamily\">rounded<\/item>\n        <item name=\"cornerSizeTopLeft\">50%<\/item>\n        <item name=\"cornerSizeTopRight\">50%<\/item>\n    <\/style>\n<\/resources>\n<\/code><\/pre>\n
    activity_main.xml<\/h5>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?><!-- Use DrawerLayout as root container for activity -->\n<layout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\">\n\n    <data>\n\n    <\/data>\n\n    <androidx.constraintlayout.widget.ConstraintLayout\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\">\n\n        <com.google.android.material.imageview.ShapeableImageView\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            app:shapeAppearance=\"@style\/ImageStyle\"\n            android:padding=\"20dp\"\n            android:src=\"@drawable\/zombie\"\n            app:strokeColor=\"@color\/black\"\n            app:layout_constraintBottom_toBottomOf=\"parent\"\n            app:layout_constraintEnd_toEndOf=\"parent\"\n            app:layout_constraintStart_toStartOf=\"parent\"\n            app:layout_constraintTop_toTopOf=\"parent\" \/>\n\n    <\/androidx.constraintlayout.widget.ConstraintLayout>\n<\/layout>\n<\/code><\/pre>\n
    <\/p>\n
    <\/a><\/p>\n
    4.ShapeableImageView \u5207\u89d2<\/h3>\n
    theme.xml<\/h5>\n
    <resources xmlns:tools=\"http:\/\/schemas.android.com\/tools\">\n    <style name=\"ImageStyle\">\n        <item name=\"cornerFamily\">cut<\/item>\n        <item name=\"cornerSize\">50dp<\/item>\n    <\/style>\n<\/resources>\n<\/code><\/pre>\n
    activity_main.xml<\/h5>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?><!-- Use DrawerLayout as root container for activity -->\n<layout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\">\n\n    <data>\n\n    <\/data>\n\n    <androidx.constraintlayout.widget.ConstraintLayout\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\">\n\n        <com.google.android.material.imageview.ShapeableImageView\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            app:shapeAppearance=\"@style\/ImageStyle\"\n            android:padding=\"20dp\"\n            android:src=\"@drawable\/zombie\"\n            app:strokeColor=\"@color\/black\"\n            app:layout_constraintBottom_toBottomOf=\"parent\"\n            app:layout_constraintEnd_toEndOf=\"parent\"\n            app:layout_constraintStart_toStartOf=\"parent\"\n            app:layout_constraintTop_toTopOf=\"parent\" \/>\n\n    <\/androidx.constraintlayout.widget.ConstraintLayout>\n<\/layout>\n<\/code><\/pre>\n
    <\/p>\n
    <\/a><\/p>\n
    5.ShapeableImageView \u83f1\u5f62<\/h3>\n
    theme.xml<\/h5>\n
    <resources xmlns:tools=\"http:\/\/schemas.android.com\/tools\">\n    <style name=\"ImageStyle\">\n        <item name=\"cornerFamily\">cut<\/item>\n        <item name=\"cornerSize\">50%<\/item>\n    <\/style>\n<\/resources>\n<\/code><\/pre>\n
    activity_main.xml<\/h5>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?><!-- Use DrawerLayout as root container for activity -->\n<layout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\">\n\n    <data>\n\n    <\/data>\n\n    <androidx.constraintlayout.widget.ConstraintLayout\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\">\n\n        <com.google.android.material.imageview.ShapeableImageView\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            app:shapeAppearance=\"@style\/ImageStyle\"\n            android:padding=\"20dp\"\n            android:src=\"@drawable\/zombie\"\n            app:strokeColor=\"@color\/black\"\n            app:layout_constraintBottom_toBottomOf=\"parent\"\n            app:layout_constraintEnd_toEndOf=\"parent\"\n            app:layout_constraintStart_toStartOf=\"parent\"\n            app:layout_constraintTop_toTopOf=\"parent\" \/>\n\n    <\/androidx.constraintlayout.widget.ConstraintLayout>\n<\/layout>\n<\/code><\/pre>\n
    <\/p>\n
    <\/a><\/p>\n
    6.ShapeableImageView \u908a<\/h3>\n
    theme.xml<\/h5>\n
    <resources xmlns:tools=\"http:\/\/schemas.android.com\/tools\">\n    <style name=\"ImageStyle\">\n        <item name=\"cornerFamily\">rounded<\/item>\n        <item name=\"cornerSize\">50%<\/item>\n    <\/style>\n<\/resources>\n<\/code><\/pre>\n
    activity_main.xml<\/h5>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?><!-- Use DrawerLayout as root container for activity -->\n<layout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\">\n\n    <data>\n\n    <\/data>\n\n    <androidx.constraintlayout.widget.ConstraintLayout\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\">\n\n        <com.google.android.material.imageview.ShapeableImageView\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            app:shapeAppearance=\"@style\/ImageStyle\"\n            android:padding=\"20dp\"\n            android:src=\"@drawable\/zombie\"\n            app:strokeColor=\"@color\/black\"\n            app:strokeWidth=\"20dp\"\n            app:layout_constraintBottom_toBottomOf=\"parent\"\n            app:layout_constraintEnd_toEndOf=\"parent\"\n            app:layout_constraintStart_toStartOf=\"parent\"\n            app:layout_constraintTop_toTopOf=\"parent\" \/>\n\n    <\/androidx.constraintlayout.widget.ConstraintLayout>\n<\/layout>\n<\/code><\/pre>\n
    <\/p>\n
    <\/a><\/p>\n
    7.ShapeableImageView \u5c0d\u8a71\u6846<\/h3>\n
    MainActivity.kt<\/h5>\n
    class MainActivity : AppCompatActivity() {\n\n    private lateinit var binding: ActivityMainBinding\n\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n\n        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)\n\n        val dialogModel = ShapeAppearanceModel.builder().apply {\n            setAllCorners(RoundedCornerTreatment())\n            setAllCornerSizes(20f)\n            setRightEdge(object : TriangleEdgeTreatment(15f, false) {\n                override fun getEdgePath(length: Float, center: Float, interpolation: Float, shapePath: ShapePath) {\n                    super.getEdgePath(length, 25f, interpolation, shapePath)\n                }\n            })\n        }.build()\n\n        (binding.text.parent as ViewGroup).clipChildren = false\n        binding.text.setTextColor(Color.WHITE)\n        binding.text.background = MaterialShapeDrawable(dialogModel).apply {\n            setTint(ContextCompat.getColor(this@MainActivity, R.color.purple_200))\n            paintStyle = Paint.Style.FILL\n        }\n    }\n\n}\n<\/code><\/pre>\n
    activity_main.xml<\/h5>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?><!-- Use DrawerLayout as root container for activity -->\n<layout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\">\n\n    <data>\n\n    <\/data>\n\n    <androidx.constraintlayout.widget.ConstraintLayout\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\">\n\n        <androidx.appcompat.widget.AppCompatTextView\n            android:id=\"@+id\/text\"\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:text=\"Hello\"\n            android:padding=\"10dp\"\n            android:textSize=\"30sp\"\n            app:layout_constraintBottom_toBottomOf=\"parent\"\n            app:layout_constraintEnd_toEndOf=\"parent\"\n            app:layout_constraintStart_toStartOf=\"parent\"\n            app:layout_constraintTop_toTopOf=\"parent\" \/>\n\n    <\/androidx.constraintlayout.widget.ConstraintLayout>\n<\/layout>\n<\/code><\/pre>\n
    <\/p>\n\n
    <\/div>","protected":false},"excerpt":{"rendered":"
    \u3010Material Design\u3011Android ShapeableImageView \u81ea\u5b9a\u7fa9\u5716\u7247\u5f62\u72c0 \u7bc4\u4f8b  … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[76],"tags":[13,78,119],"class_list":["post-739","post","type-post","status-publish","format-standard","hentry","category-material-design","tag-android","tag-material-design","tag-shapeableimageview"],"_links":{"self":[{"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/posts\/739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/comments?post=739"}],"version-history":[{"count":2,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/posts\/739\/revisions"}],"predecessor-version":[{"id":1721,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/posts\/739\/revisions\/1721"}],"wp:attachment":[{"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/media?parent=739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/categories?post=739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/tags?post=739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}