下拉将title淡化

来源：互联网发布：淘宝历史订单消失编辑：程序博客网时间：2024/04/28 12:11

主要就是在布局上重叠一个title控件，然后监听下拉事件，然后逐渐淡化。

效果：

在scroll中淡化title的主要代码：

        // 获取顶部图片高度后，设置滚动监听        ViewTreeObserver vto = imageView.getViewTreeObserver();        vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {            @SuppressWarnings("deprecation")            @Override            public void onGlobalLayout() {                imageView.getViewTreeObserver().removeGlobalOnLayoutListener(                        this);                height = imageView.getHeight();                imageView.getWidth();                scrollView.setScrollViewListener(SrcollActivity.this);            }        });    }    @Override    public void onScrollChanged(ObservableScrollView scrollView, int x, int y,                                int oldx, int oldy) {         Log.e("TAG","y--->"+y+"    height-->"+height);        if (y <= height) {            float scale = (float) y / height;            float alpha = (255 * scale);             Log.e("TAG", "alpha--->" + alpha);            // layout全部透明            // 只是layout背景透明(仿知乎滑动效果)            layoutHead.setBackgroundColor(Color.argb((int) alpha, 0xfd, 0x91,                    0x5b));        }    }

布局：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:layout_width="match_parent"              android:layout_height="match_parent">    <com.zhangli.srcolltest.ObservableScrollView        android:id="@+id/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/imageView1"                android:layout_width="match_parent"                android:layout_height="200dp"                android:scaleType="fitXY"                android:src="@drawable/bg" />            <WebView                android:id="@+id/webview1"                android:layout_width="match_parent"                android:layout_height="1280dp" />        </LinearLayout>    </com.zhangli.srcolltest.ObservableScrollView>    <include layout="@layout/layout_head" /></RelativeLayout>

在listView当中淡化的代码：

    // 最重要的方法，标题栏的透明度变化在这个方法实现    @Override    public void onScroll(AbsListView listView, int firstVisibleItem,                         int visibleItemCount, int totalItemCount) {        // 判断当前最上面显示的是不是头布局，因为Xlistview有刷新控件，所以头布局的位置是1，即第二个        if (firstVisibleItem == 1) {            // 获取头布局            View view = listView.getChildAt(0);            if (view != null) {                // 获取头布局现在的最上部的位置的相反数                int top = -view.getTop();                // 获取头布局的高度                headerHeight = view.getHeight();                // 满足这个条件的时候，是头布局在XListview的最上面第一个控件的时候，只有这个时候，我们才调整透明度                if (top <= headerHeight && top >= 0) {                    // 获取当前位置占头布局高度的百分比                    float f = (float) top / (float) headerHeight;                    title.getBackground().setAlpha((int) (f * 255));                    // 通知标题栏刷新显示                    title.invalidate();                }            }        } else if (firstVisibleItem > 1) {            title.getBackground().setAlpha(255);        } else {            title.getBackground().setAlpha(0);        }    }

布局：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:background="#f0f0f0">    <com.warmtel.android.xlistview.XListView        android:id="@+id/list"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:cacheColorHint="#00000000">    </com.warmtel.android.xlistview.XListView>    <RelativeLayout        android:id="@+id/rl_title"        android:layout_width="fill_parent"        android:layout_height="40dip"        android:background="#668899">    </RelativeLayout></RelativeLayout>

最好下载demo下来看看：http://download.csdn.net/detail/zhangli_/9464210

0 0