实现仿QQ好友动态、微信朋友圈标题栏渐变

本文介绍了一种使用ScrollView实现标题栏背景及文字颜色渐变的效果。通过监听ScrollView的滚动位置,实现了不同滚动阶段标题栏背景及文字颜色的变化。

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

按规矩办事,先看一下效果图

图一为ScrollView未滚动状态
在这里插入图片描述

图二为ScrollView状态一半状态
在这里插入图片描述

图三为ScllorView滚动下来的状态

在这里插入图片描述

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!--标题栏-->
    <TextView
        android:id="@+id/main_titleBar"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:gravity="center"
        android:text="标题栏"
        android:textSize="25dp"></TextView>

    <ScrollView
        android:id="@+id/main_scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/main_img"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@mipmap/ic_launcher_round" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_gravity="center"
                android:background="@color/colorAccent"
                android:gravity="center"
                android:text="条目xxx"
                android:textSize="20dp" />


            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_gravity="center"
                android:background="@color/colorAccent"
                android:gravity="center"
                android:text="条目xxx"
                android:textSize="20dp" />


            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_gravity="center"
                android:background="@color/colorAccent"
                android:gravity="center"
                android:text="条目xxx"
                android:textSize="20dp" />


            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_gravity="center"
                android:background="@color/colorAccent"
                android:gravity="center"
                android:text="条目xxx"
                android:textSize="20dp" />


            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_gravity="center"
                android:background="@color/colorAccent"
                android:gravity="center"
                android:text="条目xxx"
                android:textSize="20dp" />


            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_gravity="center"
                android:background="@color/colorAccent"
                android:gravity="center"
                android:text="条目xxx"
                android:textSize="20dp" />
        </LinearLayout>
    </ScrollView>

</LinearLayout>

MainActivity代码

public class MainActivity extends AppCompatActivity {

    private TextView mTitleBarMain;
    private ScrollView mScrollViewMain;
    private int height;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initListener();
    }

    private void initView() {
        mTitleBarMain = findViewById(R.id.main_titleBar);
        mScrollViewMain = findViewById(R.id.main_scrollView);
    }

    @RequiresApi(api = Build.VERSION_CODES.M)
    private void initListener() {
        mScrollViewMain.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
            @Override
            public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
                height = mTitleBarMain.getHeight()*2;
            }
        });

        mScrollViewMain.setOnScrollChangeListener(new View.OnScrollChangeListener() {
            @Override
            public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                // TODO Auto-generated method stub
                if (scrollY <= 0) {   //设置标题的背景颜色
                    mTitleBarMain.setTextColor(Color.argb((int) 0, 0,0,0));
                    mTitleBarMain.setBackgroundColor(Color.argb((int) 255, 255, 255, 255));
                } else if (scrollY > 0 && scrollY <= height) {
                     //滑动距离小于图片的高度时,设置背景和字体颜色颜色透明度渐变
                    float scale = (float) scrollY / height;
                    float alpha = (255 * scale);
                  mTitleBarMain.setTextColor(Color.argb((int) alpha, 255,255,255));
                    mTitleBarMain.setBackgroundColor(Color.argb((int) alpha, 0, 0, 0));
                } else {    //滑动到图片下面设置普通颜色
                    mTitleBarMain.setBackgroundColor(Color.argb((int) 255, 0, 0, 0));
                }
            }
        });
    }
}

主要代码就在于这个initListener方法里边

1.获取到TitleBar的高度。
2.通过监听scrollY判断ScrollView Y轴滑动的位置。
3.如果scrollY为0的时候就代表ScrollView没有滑动,那么就给TitleBar设置白色背景和黑色字体。
4.如果scrollY不为0而且小于TitleBar高度的时候,将背景和字体颜色设置为渐变。
5.其他情况下(也就是说滑动高度大于TitleBar的时候)将TitleBar设置黑色背景和白色字体。

private void initListener() {
        mScrollViewMain.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
            @Override
            public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
                height = mTitleBarMain.getHeight()*2;
            }
        });

        mScrollViewMain.setOnScrollChangeListener(new View.OnScrollChangeListener() {
            @Override
            public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                // TODO Auto-generated method stub
                if (scrollY <= 0) {   //设置标题的背景颜色
                    mTitleBarMain.setTextColor(Color.argb((int) 0, 0,0,0));
                    mTitleBarMain.setBackgroundColor(Color.argb((int) 255, 255, 255, 255));
                } else if (scrollY > 0 && scrollY <= height) {
                     //滑动距离小于图片的高度时,设置背景和字体颜色颜色透明度渐变
                    float scale = (float) scrollY / height;
                    float alpha = (255 * scale);
                  mTitleBarMain.setTextColor(Color.argb((int) alpha, 255,255,255));
                    mTitleBarMain.setBackgroundColor(Color.argb((int) alpha, 0, 0, 0));
                } else {    //滑动到图片下面设置普通颜色
                    mTitleBarMain.setBackgroundColor(Color.argb((int) 255, 0, 0, 0));
                }
            }
        });
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值