仿京东滑动页面搜索框背景渐变实现方法

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));
                }
            }
        });
 
    }
上一篇下一篇

猜你喜欢

热点阅读