效果如下:
做法非常简单,只分4步。如有手懒的朋友,可直接到我的资源页下载(0积分):
http://download.csdn.net/detail/qq_29614465/9636799,是Android studio版本,有用eclipse的朋友只要用关键代码即可。
1.自定义一个带滚动监听的scrollview
import
android.content.Context
;
import android.util.AttributeSet
;
import android.widget.ScrollView
;
/**
* 带滚动监听的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
;
}
@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)
;
}
}
}
2.MainActivity
import android.app.Activity
;
import android.graphics.Color
;
import android.os.Bundle
;
import android.view.ViewTreeObserver
;
import android.view.ViewTreeObserver.OnGlobalLayoutListener
;
import
android.view.Window
;
import
android.webkit.WebSettings
;
import android.webkit.WebView
;
import android.webkit.WebViewClient
;
import android.widget.LinearLayout
;
import android.widget.RelativeLayout
;
import yksg.kuangkuang.R
;
import yksg.kuangkuang.views.ObservableScrollView
;
public class MainActivity extends Activity implements ObservableScrollView.ScrollViewListener {
private RelativeLayout
layoutHead
;
private ObservableScrollView
scrollView
;
private LinearLayout
layout_zhan
;
//占位用的布局
private WebView
webView
;
private int
height
;
@Override
protected void
onCreate
(Bundle savedInstanceState) {
super.onCreate(savedInstanceState)
;
requestWindowFeature(
Window
.
FEATURE_NO_TITLE
)
;
setContentView(R.layout.
activity_main2
)
;
initView()
;
}
private void
initView
() {
webView
= (WebView) findViewById(R.id.
webview1
)
;
scrollView
= (ObservableScrollView) findViewById(R.id.
scrollview
)
;
layoutHead
= (RelativeLayout) findViewById(R.id.
title_RelativeLayout
)
;
layout_zhan
= (LinearLayout) findViewById(R.id.
layout_zhanwei
)
;
//初始化webview
//启用支持javascript
WebSettings
settings =
webView
.getSettings()
;
settings.setJavaScriptEnabled(true)
;
webView
.loadUrl(
"
http://weibo.com/u/2697099753
"
)
;
//覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为,使网页用WebView打开
webView
.setWebViewClient(new WebViewClient() {
@Override
public boolean
shouldOverrideUrlLoading
(WebView view
,
String url) {
//返回值是true的时候控制去WebView打开,为false调用系统浏览器或第三方浏览器
view.loadUrl(url)
;
return true
;
}
})
;
//获取顶部图片高度后,设置滚动监听
ViewTreeObserver vto =
layout_zhan
.getViewTreeObserver()
;
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override
public void
onGlobalLayout
() {
layout_zhan
.getViewTreeObserver().removeGlobalOnLayoutListener(this)
;
height
=
layout_zhan
.getHeight()
;
scrollView
.setScrollViewListener(MainActivity.this)
;
}
})
;
}
@Override
public void
onScrollChanged
(ObservableScrollView scrollView
,
int x
,
int y
,
int oldx
,
int oldy) {
//当向上滑动距离大于占位布局的高度值,就调整标题的背景
if (y >
height
) {
float alpha = (
128
)
;
//0~255 完全透明~不透明
//4个参数,第一个是透明度,后三个是红绿蓝三元色参数
layoutHead
.setBackgroundColor(Color.
argb
((int) alpha
,
0
,
0
,
0
))
;
} else {
layoutHead
.setBackgroundColor(Color.
BLACK
)
;
}
}
}
因为加了一个webview,所以要在清单配置文件里加一个权限
<
uses-permission
android:name=
"android.permission.INTERNET"
/>
3.布局
activity_main2.xml 注:用的相对布局,使标题布局与占位布局位置重叠
<
RelativeLayout
xmlns:android=
"http://schemas.android.com/apk/res/android"
android:layout_width=
"match_parent"
android:layout_height=
"match_parent"
>
<
yksg.kuangkuang.views.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"
>
<
LinearLayout //占位布局
android:id=
"@+id/layout_zhanwei"
android:layout_width=
"match_parent"
android:layout_height=
"@dimen/title_layout_height"
android:orientation=
"horizontal"
></
LinearLayout
>
<
WebView
android:id=
"@+id/webview1"
android:layout_width=
"match_parent"
android:layout_height=
"fill_parent"
/>
</
LinearLayout
>
</
yksg.kuangkuang.views.ObservableScrollView
>
<
LinearLayout //标题布局
android:layout_width=
"match_parent"
android:layout_height=
"wrap_content"
>
<
include
layout=
"@layout/title_two"
/>
</
LinearLayout
>
</
RelativeLayout
>
4.标题布局
<?
xml version=
"1.0"
encoding=
"utf-8"
?>
<
RelativeLayout
xmlns:android=
"http://schemas.android.com/apk/res/android"
android:id=
"@+id/title_RelativeLayout"
android:layout_width=
"fill_parent"
android:layout_height=
"40dp"
android:background=
"@color/black"
>
<
TextView
android:id=
"@+id/tv_title"
android:layout_width=
"wrap_content"
android:layout_height=
"fill_parent"
android:layout_centerInParent=
"true"
android:gravity=
"center"
android:text=
"这是我的世界"
android:textColor=
"@color/blue"
android:padding=
"2dp"
android:textSize=
"18sp"
/>
</
RelativeLayout
>
写完收工!
![大笑](http://static.blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif)
如有手懒的朋友,可直接到我的资源页下载(0积分):
http://download.csdn.net/detail/qq_29614465/9636799,是Android studio版本,有用eclipse的朋友只要用关键代码即可。
(也可以进入我个人资源中心,寻找其它可以帮到你的项目代码:http://download.csdn.net/user/qq_29614465)