仿京东滑动页面搜索框背景渐变实现方法
2018-01-24 本文已影响0人
丶Mars绝版
这里主要的两个控件就是 Linelayout(包裹的是搜索框部分) Scrollview(包裹的滑动整体页面)
提醒(一定要用RelativeLayout布局)
设置控件在布局最上边line.bringToFront();//相当于改变Z轴
好了直接上代码
第一步:定义控件
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;
}
@Override
protected 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:id="@+id/line" android:layout_height="100dp" android:layout_width="match_parent" android:orientation="horizontal"> </linearlayout> <com.example.dell.myapplication.observablescrollview android:id="@+id/scrollView" android:layout_height="495dp" android:layout_width="368dp" tools:layout_editor_absolutex="8dp" tools:layout_editor_absolutey="8dp"> <linearlayout android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical"> </linearlayout> </com.example.dell.myapplication.observablescrollview>
scrollview默认只有一个子空间,所以要添加一个布局进行包裹,内容自己加
第三步:Activity.class
public class MainActivity extends AppCompatActivity {
private LinearLayout line;
private ObservableScrollView scrollView;
private int imageHeight=300; //设置渐变高度,一般为导航图片高度,自己控制
@Override
protected 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() {
@Override
public 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));
}
}
});
}