原文地址：/qq_39734239/article/details/78504691
最近在做电商项目，看京东的首页搜索框渐变效果十分的不错就找了一些大神的博客
应用到自己的项目就是这个样子
这里主要的两个控件就是 Linelayout(包裹的是搜索框部分) Scrollview(包裹的滑动整体页面)
提醒（一定要用RelativeLayout布局）
设置控件在布局最上边line.bringToFront();
好了直接上代码
第一步：自定义ScrollView控件
public class ObservableScrollView extends ScrollView {public interface ScrollViewListener {void onScrollChanged(ObservableScrollView scrollView, int x, int y,int oldx, int oldy);}private ScrollViewListener scrollViewListener = null;public ObservableScrollView(Context context) {super(context);}public ObservableScrollView(Context context, AttributeSet attrs,int defStyle) {super(context, attrs, defStyle);}public ObservableScrollView(Context context, AttributeSet attrs) {super(context, attrs);}public void setScrollViewListener(ScrollViewListener scrollViewListener) {this.scrollViewListener = scrollViewListener;}@Overrideprotected void onScrollChanged(int x, int y, int oldx, int oldy) {super.onScrollChanged(x, y, oldx, oldy);if (scrollViewListener != null) {scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);}}}
定义控件添加监听方法
第二步：布局
<LinearLayout android:layout_width="match_parent" android:id="@+id/line" android:orientation="horizontal" android:layout_height="100dp"> </LinearLayout> <com.example.dell.myapplication.ObservableScrollView android:layout_width="368dp" android:layout_height="495dp" android:id="@+id/scrollView" tools:layout_editor_absoluteY="8dp" tools:layout_editor_absoluteX="8dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > </LinearLayout> </com.example.dell.myapplication.ObservableScrollView>
scrollview默认只有一个子空间，所以要添加一个布局进行包裹，内容自己加
第三步：Activity
import android.graphics.Color;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.widget.LinearLayout;public class MainActivity extends AppCompatActivity {private LinearLayout line;private ObservableScrollView scrollView;private int imageHeight=300; //设置渐变高度，一般为导航图片高度，自己控制@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//查找控件line= (LinearLayout) findViewById(R.id.line);scrollView= (ObservableScrollView) findViewById(R.id.scrollView);//搜索框在布局最上面line.bringToFront();//滑动监听scrollView.setScrollViewListener(new ObservableScrollView.ScrollViewListener() {@Overridepublic void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy) {if (y <= 0) {line.setBackgroundColor(Color.argb((int) 0, 227, 29, 26));//AGB由相关工具获得，或者美工提供} else if (y > 0 && y <= imageHeight) {float scale = (float) y / imageHeight;float alpha = (255 * scale);// 只是layout背景透明line.setBackgroundColor(Color.argb((int) alpha, 227, 29, 26));} else {line.setBackgroundColor(Color.argb((int) 255, 227, 29, 26));}}});}}
如果觉得《仿京东滑动页面搜索框背景渐变》对你有帮助，请点赞、收藏，并留下你的观点哦！
