{"id":1800,"date":"2023-01-12T11:14:12","date_gmt":"2023-01-12T03:14:12","guid":{"rendered":"https:\/\/badgameshow.com\/fly\/?p=1800"},"modified":"2023-01-12T11:40:00","modified_gmt":"2023-01-12T03:40:00","slug":"%e3%80%90material-design%e3%80%91android-bottom-sheets-%e5%ba%95%e9%83%a8%e9%9d%a2%e6%9d%bf-%e7%af%84%e4%be%8b","status":"publish","type":"post","link":"https:\/\/badgameshow.com\/fly\/%e3%80%90material-design%e3%80%91android-bottom-sheets-%e5%ba%95%e9%83%a8%e9%9d%a2%e6%9d%bf-%e7%af%84%e4%be%8b\/","title":{"rendered":"\u3010Material Design\u3011Android Bottom Sheets \u5e95\u90e8\u9762\u677f \u7bc4\u4f8b"},"content":{"rendered":"

\u3010Material Design\u3011Android Bottom Sheets \u5e95\u90e8\u9762\u677f \u7bc4\u4f8b<\/h1>\n

Bottom Sheets \u662f Android \u754c\u9762\u8a2d\u8a08\u4e2d\u4e00\u7a2e\u5e38\u898b\u5143\u7d20\uff0c\u5b83\u662f\u4e00\u500b\u53ef\u6ed1\u52d5\u51fa\u73fe\u5728\u756b\u9762\u5e95\u90e8\u7684\u9762\u677f\u3002\u5b83\u53ef\u4ee5\u7528\u4f86\u986f\u793a\u984d\u5916\u7684\u5167\u5bb9\u6216\u4f5c\u70ba\u4e92\u52d5\u9762\u677f\uff0c\u4f8b\u5982\u5728\u5730\u5716\u61c9\u7528\u4e2d\u986f\u793a\u9ede\u64ca\u5730\u9ede\u7684\u8a73\u7d30\u4fe1\u606f\uff0c\u6216\u5728\u97f3\u6a02\u64ad\u653e\u5668\u4e2d\u986f\u793a\u6b4c\u55ae\u3002<\/h4>\n

Bottom Sheets \u53ef\u4ee5\u6709\u5169\u7a2e\u4e0d\u540c\u7684\u985e\u578b\uff1a\u6a21\u614b\u548c\u975e\u6a21\u614b\u3002 \u6a21\u614b Bottom Sheets \u9700\u8981\u7528\u6236\u9032\u884c\u4e92\u52d5\u624d\u80fd\u95dc\u9589\uff0c\u800c\u975e\u6a21\u614b Bottom Sheets \u53ef\u4ee5\u88ab\u7528\u6236\u8f15\u9b06\u95dc\u9589\u3002<\/h4>\n

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

\n

\u6587\u7ae0\u76ee\u9304<\/h4>\n
    \n
  1. \u975e\u6a21\u614b Bottom Sheets \u6a23\u5f0fUI<\/a><\/li>\n
  2. \u975e\u6a21\u614b Bottom Sheets \u63a7\u5236\u72c0\u614b<\/a><\/li>\n
  3. \u975e\u6a21\u614b Bottom Sheets \u52d5\u614b\u8a2d\u7f6e<\/a><\/li>\n
  4. \u975e\u6a21\u614b Bottom Sheets \u6ed1\u52d5\u76e3\u807d<\/a><\/li>\n
  5. \u6a21\u614b Bottom Sheets Dialog \u6a23\u5f0fUI<\/a><\/li>\n
  6. \u6a21\u614b Bottom Sheets Dialog<\/a><\/li>\n
  7. Developer Documents Bottom Sheets<\/a><\/li>\n<\/ol>\n
    \n

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

    1.\u975e\u6a21\u614b Bottom Sheets \u6a23\u5f0fUI<\/h4>\n

    <\/p>\n

    drawable\/rounded_dialog.xml<\/h5>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>\n<shape xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\">\n    <solid android:color=\"@android:color\/black\" \/>\n    <corners\n        android:topLeftRadius=\"15dp\"\n        android:topRightRadius=\"15dp\" \/>\n<\/shape>\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.AppCompatButton\n            android:id=\"@+id\/change\"\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:text=\"Change\"\n            android:textAllCaps=\"false\"\n            android:layout_marginTop=\"20dp\"\n            app:layout_constraintEnd_toEndOf=\"parent\"\n            app:layout_constraintStart_toStartOf=\"parent\"\n            app:layout_constraintTop_toTopOf=\"parent\" \/>\n\n        <androidx.coordinatorlayout.widget.CoordinatorLayout\n            android:layout_width=\"0dp\"\n            android:layout_height=\"0dp\"\n            android:layout_marginTop=\"20dp\"\n            app:layout_constraintBottom_toBottomOf=\"parent\"\n            app:layout_constraintEnd_toEndOf=\"parent\"\n            app:layout_constraintStart_toStartOf=\"parent\"\n            app:layout_constraintTop_toBottomOf=\"@+id\/change\">\n\n            <FrameLayout\n                android:id=\"@+id\/bottomSheetLayout\"\n                android:background=\"@drawable\/rounded_dialog\"\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"300dp\"\n                app:behavior_peekHeight=\"100dp\"\n                app:layout_behavior=\"@string\/bottom_sheet_behavior\">\n\n                <androidx.appcompat.widget.AppCompatButton\n                    android:id=\"@+id\/hello\"\n                    android:textAllCaps=\"false\"\n                    android:layout_width=\"wrap_content\"\n                    android:layout_height=\"wrap_content\"\n                    android:layout_gravity=\"center\"\n                    android:text=\"Hello\" \/>\n\n            <\/FrameLayout>\n        <\/androidx.coordinatorlayout.widget.CoordinatorLayout>\n    <\/androidx.constraintlayout.widget.ConstraintLayout>\n\n<\/layout>\n<\/code><\/pre>\n
    <\/a><\/p>\n
    2.\u975e\u6a21\u614b Bottom Sheets \u63a7\u5236\u72c0\u614b<\/h4>\n
    \u72c0\u614b<\/h5>\n
    STATE_COLLAPSED\uff1a\u574d\u584c(\u9ed8\u8a8d)\nSTATE_EXPANDED\uff1a\u5c55\u958b\n<\/code><\/pre>\n
    MainActivity.kt<\/h5>\n
    @SuppressLint(\"RestrictedApi\", \"VisibleForTests\")\nclass MainActivity : AppCompatActivity() {\n\n    private lateinit var binding: ActivityMainBinding\n    private lateinit var bottomSheetBehavior: BottomSheetBehavior<View>\n\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n\n        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)\n\n        bottomSheetBehavior = BottomSheetBehavior.from(binding.bottomSheetLayout)\n        bottomSheetBehavior.disableShapeAnimations()\n\n        init()\n    }\n\n    private fun init() {\n        binding.change.setOnClickListener {\n            if (bottomSheetBehavior.state != BottomSheetBehavior.STATE_EXPANDED) {\n                bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED\n            } else {\n                bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED\n            }\n        }\n\n        binding.hello.setOnClickListener {\n            Toast.makeText(this, \"Hello\", Toast.LENGTH_SHORT).show()\n        }\n    }\n\n}\n<\/code><\/pre>\n
    <\/a><\/p>\n
    3.\u975e\u6a21\u614b Bottom Sheets \u52d5\u614b\u8a2d\u7f6e<\/h4>\n
    Extensions.kt<\/h5>\n
    val Float.dp get() = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, this, Resources.getSystem().displayMetrics)\n<\/code><\/pre>\n
    MainActivity.kt<\/h5>\n
    @SuppressLint(\"RestrictedApi\", \"VisibleForTests\")\nclass MainActivity : AppCompatActivity() {\n\n    private lateinit var binding: ActivityMainBinding\n    private lateinit var bottomSheetBehavior: BottomSheetBehavior<View>\n\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n\n        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)\n\n        bottomSheetBehavior = BottomSheetBehavior.from(binding.bottomSheetLayout)\n        bottomSheetBehavior.disableShapeAnimations()\n\n        val bottomSheetBehavior = BottomSheetBehavior.from(binding.bottomSheetLayout)\n        bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED\n        bottomSheetBehavior.peekHeight = 90f.dp.toInt()\n    }\n\n}\n<\/code><\/pre>\n
    <\/a><\/p>\n
    4.\u975e\u6a21\u614b Bottom Sheets \u6ed1\u52d5\u76e3\u807d<\/h4>\n
    MainActivity.kt<\/h5>\n
    @SuppressLint(\"RestrictedApi\", \"VisibleForTests\")\nclass MainActivity : AppCompatActivity() {\n\n    private lateinit var binding: ActivityMainBinding\n    private lateinit var bottomSheetBehavior: BottomSheetBehavior<View>\n    private lateinit var bottomSheetCallback: BottomSheetBehavior.BottomSheetCallback\n\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n\n        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)\n\n        bottomSheetBehavior = BottomSheetBehavior.from(binding.bottomSheetLayout)\n        bottomSheetBehavior.disableShapeAnimations()\n\n        init()\n    }\n\n    private fun init() {\n        bottomSheetCallback = object : BottomSheetBehavior.BottomSheetCallback() {\n            override fun onStateChanged(bottomSheet: View, newState: Int) {\n                Log.e(\"bottomSheet\", \"onStateChanged\")\n            }\n\n            override fun onSlide(bottomSheet: View, slideOffset: Float) {\n                Log.e(\"bottomSheet\", \"onSlide\")\n            }\n        }\n    }\n\n    override fun onStart() {\n        super.onStart()\n        bottomSheetBehavior.addBottomSheetCallback(bottomSheetCallback)\n    }\n\n    override fun onDestroy() {\n        bottomSheetBehavior.removeBottomSheetCallback(bottomSheetCallback)\n        super.onDestroy()\n    }\n\n}\n<\/code><\/pre>\n
    <\/a><\/p>\n
    5.\u6a21\u614b Bottom Sheets Dialog \u6a23\u5f0fUI<\/h4>\n
    <\/p>\n
    drawable\/rounded_dailog.xml<\/h5>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>\n<shape xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\">\n    <solid android:color=\"@android:color\/black\" \/>\n    <corners\n        android:topLeftRadius=\"15dp\"\n        android:topRightRadius=\"15dp\" \/>\n<\/shape>\n<\/code><\/pre>\n
    values\/themes.xml<\/h5>\n
    <resources>\n\n    <style name=\"Theme.JetpackDemo\" parent=\"Theme.MaterialComponents.Light.NoActionBar\">\n        <item name=\"bottomSheetDialogTheme\">@style\/AppBottomSheetDialogTheme<\/item>\n    <\/style>\n\n    <style name=\"AppBottomSheetDialogTheme\" parent=\"ThemeOverlay.Material3.BottomSheetDialog\">\n        <item name=\"bottomSheetStyle\">@style\/AppModalStyle<\/item>\n    <\/style>\n\n    <style name=\"AppModalStyle\" parent=\"Widget.Design.BottomSheet.Modal\">\n        <item name=\"android:background\">@drawable\/rounded_dialog<\/item>\n    <\/style>\n\n<\/resources>\n<\/code><\/pre>\n
    bottom_sheet_dialog.xml<\/h5>\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>\n<layout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\">\n\n    <data>\n\n    <\/data>\n\n    <androidx.appcompat.widget.LinearLayoutCompat\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:orientation=\"vertical\">\n\n        <androidx.appcompat.widget.AppCompatButton\n            android:id=\"@+id\/hello\"\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:layout_gravity=\"center\"\n            android:layout_marginTop=\"20dp\"\n            android:text=\"hello\"\n            android:textAllCaps=\"false\" \/>\n\n        <androidx.appcompat.widget.AppCompatTextView\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:layout_gravity=\"center\"\n            android:layout_marginTop=\"20dp\"\n            android:text=\"A\" \/>\n\n        <androidx.appcompat.widget.AppCompatTextView\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:layout_gravity=\"center\"\n            android:layout_marginTop=\"20dp\"\n            android:text=\"B\" \/>\n\n        <androidx.appcompat.widget.AppCompatTextView\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:layout_gravity=\"center\"\n            android:layout_marginTop=\"20dp\"\n            android:layout_marginBottom=\"20dp\"\n            android:text=\"C\" \/>\n\n    <\/androidx.appcompat.widget.LinearLayoutCompat>\n<\/layout>\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.AppCompatButton\n            android:id=\"@+id\/open\"\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:text=\"open\"\n            android:textAllCaps=\"false\"\n            android:layout_marginTop=\"20dp\"\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\n<\/layout>\n<\/code><\/pre>\n
    <\/a><\/p>\n
    6.\u6a21\u614b Bottom Sheets Dialog<\/h4>\n
    BottomSheetDialog.kt<\/h5>\n
    class BottomSheetDialog : BottomSheetDialogFragment() {\n\n    private var mBinding: BottomSheetDialogBinding? = null\n    private val binding get() = requireNotNull(mBinding)\n\n    override fun onCreateView(\n        inflater: LayoutInflater,\n        container: ViewGroup?,\n        savedInstanceState: Bundle?,\n    ): View {\n        if (mBinding == null) {\n            mBinding = BottomSheetDialogBinding.inflate(inflater, container, false)\n        }\n\n        init()\n        return binding.root\n    }\n\n    private fun init() {\n        binding.hello.setOnClickListener {\n            Toast.makeText(context, \"Hello\", Toast.LENGTH_SHORT).show()\n        }\n    }\n\n    override fun onDestroy() {\n        mBinding = null\n        super.onDestroy()\n    }\n\n}\n<\/code><\/pre>\n
    MainActivity.kt<\/h5>\n
    @SuppressLint(\"RestrictedApi\", \"VisibleForTests\")\nclass 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        init()\n    }\n\n    private fun init() {\n        binding.open.setOnClickListener {\n            BottomSheetDialog().show(supportFragmentManager, \"Dialog\")\n        }\n    }\n\n}\n<\/code><\/pre>\n
    <\/a><\/p>\n
    7.Developer Documents Bottom Sheets<\/h4>\n
    Open in Documents Bottom Sheets<\/a><\/p>\n\n
    <\/div>","protected":false},"excerpt":{"rendered":"
    \u3010Material Design\u3011Android Bottom Sheets \u5e95\u90e8\u9762\u677f \u7bc4\u4f8b Bottom S … <\/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,228,78],"class_list":["post-1800","post","type-post","status-publish","format-standard","hentry","category-material-design","tag-android","tag-bottom-sheets","tag-material-design"],"_links":{"self":[{"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/posts\/1800","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=1800"}],"version-history":[{"count":2,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/posts\/1800\/revisions"}],"predecessor-version":[{"id":1807,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/posts\/1800\/revisions\/1807"}],"wp:attachment":[{"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/media?parent=1800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/categories?post=1800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/badgameshow.com\/fly\/wp-json\/wp\/v2\/tags?post=1800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}