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

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

作者: 丶Mars绝版 | 来源:发表于2018-01-24 10:26 被阅读0次

    这里主要的两个控件就是 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));
                    }
                }
            });
     
        }
    

    相关文章

      网友评论

          本文标题:仿京东滑动页面搜索框背景渐变实现方法

          本文链接:https://www.haomeiwen.com/subject/ulwyaxtx.html