今天上午做了一个这样的效果:移动滚动条时,标题栏颜色发生变化。(仿QQ中的“我的空间”那种效果)现在来说一下,如何简单做出这种效果。(可惜这里还未做出颜色渐变的效果——后来改了有渐变效果,感觉挺麻烦的,可以参考参考)
首先是布局文件,布局中有一个自定义的标题栏,其中包含返回按钮和活动标题(其实也就是一个Button和一个TextView),将这两个组件放在同一个布局管理器中,此外将该布局管理器的背景颜色设置为透明色。然后再向该布局添加ImageView,向其添加图片。还添加了两个TextView作为辅助,做出那种效果。
这里给出xml文件(可能需要修改,因为这是来自己项目中粘过来后修改的,可能会修改有误):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/my_info_ll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ScrollView
android:id="@+id/my_info_sv"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="250dp" >
<ImageView
android:id="@+id/my_info_background_iv"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="@drawable/my_info_background" />
<!-- 添加一层蒙版 -->
<View
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="@drawable/background_shape" />
</RelativeLayout>
<TextView
android:id="@+id/my_info_test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="mine"/>
<TextView
android:layout_width="match_parent"
android:layout_height="800dp"
android:text="setting"/>
</LinearLayout>
</ScrollView>
<RelativeLayout
android:id="@+id/my_info_title_rl"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#00FFFFFF" >
<Button
android:id="@+id/my_info_back_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:text="返回"
android:textColor="@drawable/cancel_button_selector" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:text="个人资料"
android:textColor="#696969"
android:textSize="20sp" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
my_info_background :
background_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 分隔线的渐变效果,暂不使用 -->
<gradient
android:startColor="#20FFFFFF"
android:endColor="#99FFFFFF"
android:angle="45"/>
</shape>
cancel_button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 修改搜索栏处取消按钮的状态 (还有很多地方使用了这个)-->
<item android:state_selected="true" android:color="#DFDFDF"/>
<item android:color="#DFDFDF" android:state_pressed="true"/>
<!-- <item android:color="#05A7E0"/> -->
<item android:color="#11CD6E"/>
</selector>
java代码如下:
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.ScrollView;
import android.widget.TextView;
public class MyInfo extends Activity {
private ScrollView sv;
private ImageView my_info_background;
//private LinearLayout my_info; //整个布局
private RelativeLayout my_info_title; //标题栏布局
private Button back;
private TextView test;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.my_info);
initView();
}
public void initView() {
my_info_background = (ImageView)findViewById(R.id.my_info_background_iv);
my_info_title = (RelativeLayout)findViewById(R.id.my_info_title_rl);
test = (TextView)findViewById(R.id.my_info_test);
//my_info = (LinearLayout)findViewById(R.id.my_info_ll);
sv = (ScrollView)findViewById(R.id.my_info_sv);
sv.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
int[] location = new int[2];
my_info_background.getLocationInWindow(location);
/*Log.e("getLocationInWindow", "x" + location[0] + "y:" + location[1]);*/
if(location[1] >= 0)
my_info_title.setBackgroundResource(R.drawable.my_transparent);
else if(location[1] >= -20 && location[1] <= 0)
my_info_title.setBackgroundResource(R.drawable.my_transparent);
else if(location[1] >= -40 && location[1] <= -20)
my_info_title.setBackgroundResource(R.drawable.my_white1);
else if(location[1] >= -60 && location[1] <= -40)
my_info_title.setBackgroundResource(R.drawable.my_white2);
else if(location[1] >= -80 && location[1] <= -60)
my_info_title.setBackgroundResource(R.drawable.my_white3);
else if(location[1] >= -100 && location[1] <= -80)
my_info_title.setBackgroundResource(R.drawable.my_white4);
else if(location[1] >= -120 && location[1] <= -100)
my_info_title.setBackgroundResource(R.drawable.my_white5);
else if(location[1] >= -140 && location[1] <= -120)
my_info_title.setBackgroundResource(R.drawable.my_white6);
else if(location[1] >= -160 && location[1] <= -140)
my_info_title.setBackgroundResource(R.drawable.my_white7);
else if(location[1] >= -180 && location[1] <= -160)
my_info_title.setBackgroundResource(R.drawable.my_white8);
else if(location[1] >= -200 && location[1] <= -180)
my_info_title.setBackgroundResource(R.drawable.my_white9);
else if(location[1] >= -220 && location[1] <= -200)
my_info_title.setBackgroundResource(R.drawable.my_white10);
else if(location[1] <= -220)
my_info_title.setBackgroundResource(R.drawable.my_white);
return false;
}
});
//这里这样使用不行。做不出效果。
/*my_info.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
int[] location = new int[2];
test.getLocationInWindow(location);
Log.e("getLocationInWindow", "x" + location[0] + "y:" + location[1]);
int[] location2 = new int[2];
test.getLocationOnScreen(location2);
Log.e("getLocationOnScreen", "x" + location2[0] + "y:" + location2[1]);
if(location[1] <= 50)
my_info_title.setBackgroundResource(R.drawable.my_white);
else
my_info_title.setBackgroundResource(R.drawable.my_transparent);
if(location2[1] <= 50)
my_info_title.setBackgroundResource(R.drawable.my_white);
else
my_info_title.setBackgroundResource(R.drawable.my_transparent);
return true;
}
});*/
}
}
其中 R.drawable.my_white这些或者R.drawable.my_transparent是在values中的colors.xml定义,如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 透明色 -->
<drawable name="my_transparent">#00FFFFFF</drawable>
<!-- 渐变颜色(白色) -->
<drawable name="my_white1">#10FFFFFF</drawable>
<drawable name="my_white2">#20FFFFFF</drawable>
<drawable name="my_white3">#30FFFFFF</drawable>
<drawable name="my_white4">#40FFFFFF</drawable>
<drawable name="my_white5">#50FFFFFF</drawable>
<drawable name="my_white6">#60FFFFFF</drawable>
<drawable name="my_white7">#70FFFFFF</drawable>
<drawable name="my_white8">#80FFFFFF</drawable>
<drawable name="my_white9">#90FFFFFF</drawable>
<drawable name="my_white10">#AAFFFFFF</drawable>
<!-- 白色 -->
<drawable name="my_white">#FFFFFF</drawable>
</resources>