Android 协调者布局-CSDN博客

本文链接：https://blog.csdn.net/PatrickSta/article/details/111572117

本文介绍了如何在Android中使用协调者布局(CoordinatorLayout)。首先，详细讲解了导入必要的依赖库步骤；接着，展示了如何设计配合协调者布局的XML布局文件；最后，解析了在Activity中如何操作和响应布局的交互逻辑。通过此教程，读者将能够掌握协调者布局在Android应用中的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下:
在这里插入图片描述

1.导入依赖

    //上拉下拉刷新
    implementation 'com.scwang.smartrefresh:SmartRefreshLayout:1.1.0'
    //工具类
    implementation 'com.blankj:utilcode:1.23.2'

2.布局文件

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >


    <ImageView
        android:id="@+id/act_user_home_iv"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:scaleType="centerCrop"
        android:src="@drawable/lbjn" />

    <com.scwang.smartrefresh.layout.SmartRefreshLayout
        android:id="@+id/act_user_home_re_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.scwang.smartrefresh.layout.header.ClassicsHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srlAccentColor="#ffffff" />

        <androidx.core.widget.NestedScrollView
            android:id="@+id/act_user_home_scroll_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <!-- 内容区域 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="800dp"
                    android:layout_marginTop="200dp"
                    android:background="#ffffff">


                </LinearLayout>

            </LinearLayout>


        </androidx.core.widget.NestedScrollView>


    </com.scwang.smartrefresh.layout.SmartRefreshLayout>

    <RelativeLayout
        android:id="@+id/act_user_home_title_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <LinearLayout
            android:id="@+id/act_user_home_bg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ffffff"
            android:orientation="horizontal" />


        <ImageView
            android:id="@+id/act_user_back_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:src="@drawable/dislike_icon_back_black_xl_normal" />

    </RelativeLayout>

    </RelativeLayout>

3.Activity文件

public class MainActivity extends AppCompatActivity {

    private SmartRefreshLayout smartRefreshLayout;
    private ImageView bgIv;
    private NestedScrollView mScrollView;
    //图片最大偏移量
    private final int MAX_BG_IMG_OFFSET = SizeUtils.dp2px(300);
    //标题背景
    private LinearLayout bgTitleLayout;
    private ImageView titleBackIv;

    @RequiresApi(api = Build.VERSION_CODES.M)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        smartRefreshLayout = findViewById(R.id.act_user_home_re_layout);
        bgIv = findViewById(R.id.act_user_home_iv);
        mScrollView = findViewById(R.id.act_user_home_scroll_view);
        bgTitleLayout = findViewById(R.id.act_user_home_bg);
        bgTitleLayout.setAlpha(0);
        titleBackIv = findViewById(R.id.act_user_back_btn);

        /**
         * 监听刷新框架滑动事件
         */
        smartRefreshLayout.setOnMultiPurposeListener(new SimpleMultiPurposeListener() {
            @Override
            public void onHeaderMoving(RefreshHeader header, boolean isDragging, float percent, int offset, int headerHeight, int maxDragHeight) {
                bgImageScale(percent);
            }

            @Override
            public void onRefresh(@NonNull RefreshLayout refreshLayout) {
                refreshLayout.finishRefresh(2000);
            }
        });
        /**
         * ScrollView 滑动监听
         */
        mScrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
            @Override
            public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                //处理区间为200dp内
                if (scrollY < SizeUtils.dp2px(200)) {
                    //TODO Q
                    float percent = scrollY * 1f / SizeUtils.dp2px(200);
                    bgImagePosition(percent);
                }
                if (scrollY < SizeUtils.dp2px(100)) {
                    float percent = scrollY * 1f / SizeUtils.dp2px(100);
                    titleState(percent, false);
                }
                //在滑动速度过快时，我们我发计算准确值，进行大于位置值到校准
                if (scrollY >= SizeUtils.dp2px(100)) {
                    titleState(1, true);
                }
            }
        });
    }

    /**
     * 背景缩放
     */
    public void bgImageScale(float percent) {
        bgIv.setScaleX(1 + percent * 0.4f);
        bgIv.setScaleY(1 + percent * 0.4f);
    }

    /**
     * 背景向上偏移（1.tran类似方法,2.margeTop ）
     */
    public void bgImagePosition(float percent) {
        //TODO Q
        bgIv.setTranslationY(1 - percent * MAX_BG_IMG_OFFSET);
    }

    /**
     * 改变标题栏样式
     * 1.有背景色，按钮黑色无背景
     * 2.无背景色，按钮白色有背景
     * <p>
     * 1.改变颜色透明度 bgIv.setBackgroundColor(Color.parseColor("#FF000000"));
     * 2.改变控件透明度 bgIv.setAlpha()
     */
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public void titleState(float percent, boolean isTop) {
        bgTitleLayout.setAlpha(percent);
        LogUtils.d(percent);
        //按钮透明度变化
        if (percent == 1) {
            //改变按钮到颜色
            titleBackIv.setImageTintList(ColorStateList.valueOf(0xFF000000));
        } else if (percent == 0) {
            //改变按钮到颜色
            titleBackIv.setImageTintList(ColorStateList.valueOf(0xFFFFFFFF));
        }
    }

}