Android仿QQ中的“我的空间”做出ScrollView滑动修改标题栏颜色操作

       今天上午做了一个这样的效果:移动滚动条时,标题栏颜色发生变化。(仿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>


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值