Android（12）自定义 Preference（二）

Android（12）自定义 Preference（二）

简单的效果效果演示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-apgIG18e-1643643122163)(C:\Users\Yansw1\Desktop\效果演示1.gif)]

使用到的控件（原生）：

CoordinatorLayout

CollapsingToolbarLayout

AppBarLayout

Toolbar

NestedScrollView

FragmentContainerView

准备动手！

• 自定义的Preference: MyPreference

  • 首先看一下它的朴实无华的布局文件：R.layout.mycus

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="200dp">
    
        <ImageView
            android:id="@+id/image"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#40C4FF"
            android:layout_centerInParent="true" />
    
    </RelativeLayout>
    

  • 塞到MyPreference里，并让这个布局里的ImageView无线旋转

    class MyPreference(
        context: Context,
        attributeSet: AttributeSet
    ): Preference(context, attributeSet) {
        
        init {
            // 将刚刚写好的布局赋值给 layoutResource
            layoutResource = R.layout.mycus
        }
    
        override fun onBindViewHolder(holder: PreferenceViewHolder) {
            super.onBindViewHolder(holder)
    
            // 找到自己定义的view
            val imageView = holder.findViewById(R.id.image)
            // 做个朴实无华的运动
            ValueAnimator.ofFloat(0f, 360f).apply {
                duration = 2000
                repeatMode = ValueAnimator.RESTART
                repeatCount = ValueAnimator.INFINITE
                addUpdateListener {
                    imageView.rotation = it.animatedValue as Float
                }
                start()
            }
        }
    }
    

  • OKKKK，MyPreference塞好了就可以在xml文件中用了：

    <?xml version="1.0" encoding="utf-8"?>
    <PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
        
        // 这里就可以使用了，包括原生的属性
        <com.example.myapplication.MyPreference
            android:key="a"
            app:title="我是第一个设置"
            app:summary="啦啦啦啦过年啦"
            />
    
        <Preference
            android:key="c"
            app:title="24352354"
            app:summary="啦啦啦啦过年啦"
            />
    
        <SwitchPreference
            android:key="d"
            app:title="我是第一个设置"
            app:summary="啦啦啦啦过年啦"
            />
      
    </PreferenceScreen>
    

  • OKKKKKK，在上一篇中，我们知道这个页面xml文件需要配合PreferenceFragmentCompat使用：

    朴实无华

    class MyFragment: PreferenceFragmentCompat() {
            override fun onCreatePreferences(savedInstanceState: Bundle?, rootKey: String?) {
                setPreferencesFromResource(R.xml.settings, rootKey)
            }
        }
    

  • 有了Fragment，现在就是搞那个协调联动的效果了，就是非常非常普通的CoordinatorLayout+AppBarLayout+Toolbar+CollapsingToolbarLayout用法，这里就贴一个布局了：

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto">
    
        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"
            app:elevation="0dp">
    
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="178dp"
                android:clipToPadding="false"
                app:forceApplySystemWindowInsetTop="false"
                app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
                app:expandedTitleTextAppearance="@style/CollapsingToolbarTitle.Expanded"
                app:collapsedTitleTextAppearance="@style/CollapsingToolbarTitle.Collapsed"
                app:maxLines="3"
                app:scrimAnimationDuration="50"
                app:scrimVisibleHeightTrigger="137dp"
                app:titleCollapseMode="scale"
                app:toolbarId="@id/toolbar"
                android:background="@null">
    
                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?android:actionBarSize"
                    app:layout_collapseMode="pin" />
            </com.google.android.material.appbar.CollapsingToolbarLayout>
    
        </com.google.android.material.appbar.AppBarLayout>
    
        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fillViewport="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
            <androidx.fragment.app.FragmentContainerView
                android:id="@+id/setting_fragment_container"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
    
            </androidx.fragment.app.FragmentContainerView>
    
        </androidx.core.widget.NestedScrollView>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
    

  • 上面的布局就是Activity的布局了，上代码：

    class MainActivity : AppCompatActivity() {
    
        protected var actionBar: ActionBar? = null
        protected lateinit var toolBar: Toolbar
        protected var collapsingToolbarLayout: CollapsingToolbarLayout? = null
        protected var appBarLayout: AppBarLayout? = null
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
    
            // 设置协调布局和toolbar
            toolBar = findViewById(R.id.toolbar)
            setSupportActionBar(toolBar)
            actionBar = supportActionBar
            // 设置返回键是否可用(系统内置的)
            actionBar?.let {
                it.setDisplayHomeAsUpEnabled(true)
                it.setHomeButtonEnabled(true)
                it.setDisplayShowTitleEnabled(true)
            }
    		// 有时返回键会失效
            toolBar.apply {
                setNavigationOnClickListener {
                    finishAndRemoveTask()
                }
            }
            collapsingToolbarLayout = findViewById(R.id.collapsing_toolbar)
            appBarLayout = findViewById(R.id.appbar_layout)
            // 设置标题，可用在title是读取的AndroidManifest中的lable节点，我们自己可以接受Intent的
            collapsingToolbarLayout?.let {
                it.title = title
            }
         	// 设置根 Fragment，就是上面的 PreferenceFragmentCompat拉
            supportFragmentManager
                .beginTransaction()
                .replace(
                    R.id.setting_fragment_container,
                    supportFragmentManager.fragmentFactory.instantiate(
                        this.classLoader,
                        MyFragment::class.java.name
                    )
                ).commit()
        }
     }
    

    好啦，简单的自定义就是这样的，可以根据业务的复杂程度去自定义了！