仿it快播顶部button点击背景滑动切换的效果

最近在it快播中看见它顶部的几个button可以点击后 背景会滑动到相应的button后面 就得很好看 就想办法实现了那效果

思路 大概就是通过view的叠加 把3个button通过RelativeLayout布局置于一个imageView的上面一层 然后控制imageView移动来实现效果 效果如下：

 

 

下面是我的代码 可能有点二 大家见谅！

 

main.xml

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:background="@drawable/top_channel_bg_normal" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

            <ImageView
                android:id="@+id/bg_img"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:scaleType="fitXY"
                android:src="@drawable/top_channel_bg_selected" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center" >

            <Button
                android:id="@+id/button_1"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="0.33"
                android:background="#00000000"
                android:text="button_1"
                android:textColor="#ffffff" />

            <Button
                android:id="@+id/button_2"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="0.33"
                android:background="#00000000"
                android:text="button_2"
                android:textColor="#ffffff" />

            <Button
                android:id="@+id/button_3"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="0.33"
                android:background="#00000000"
                android:text="button_3"
                android:textColor="#ffffff" />
        </LinearLayout>
    </RelativeLayout>

</LinearLayout>

 

 

接着是activity的代码

 

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;

public class TestBackGroundMoveAppActivity extends Activity implements
		OnClickListener {
	/** Called when the activity is first created. */
	private ImageView bgImage;
	public final static String MYTAG = "msg";
	private Button button_1;
	private Button button_2;
	private Button button_3;

	private int selected_button_position = 0;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		init();
	}

	private void init() {
		setContentView(R.layout.main);
		bgImage = (ImageView) findViewById(R.id.bg_img);
		button_1 = (Button) findViewById(R.id.button_1);
		button_2 = (Button) findViewById(R.id.button_2);
		button_3 = (Button) findViewById(R.id.button_3);

		LayoutParams p = bgImage.getLayoutParams();
		float screen_w = getWindowManager().getDefaultDisplay().getWidth();
		screen_w = screen_w / 3;
		p.width = (int) screen_w;
		bgImage.setLayoutParams(p);

		button_1.setOnClickListener(this);
		button_2.setOnClickListener(this);
		button_3.setOnClickListener(this);

	}

	private void setSelectButtonBgByPosition() {
		int w = getWindowManager().getDefaultDisplay().getWidth() ;//3是button的个数
		int l = (int)(w / 3.0) * selected_button_position;
		int r = l + bgImage.getWidth();
		if(selected_button_position == 0) {//选择第一个button
			l = 0;
			r =(int)(w / 3.0);
		}else if(selected_button_position == 2){//选择最后一个button
			r = w;
		}
		int t = bgImage.getTop();
		int b = bgImage.getBottom();
		bgImage.layout(l, t, r, b);
		bgImage.invalidate();
	}

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub

		int select = 0;
		if (v == button_1) {
			select = 0;
		} else if (v == button_2) {
			select = 1;
		} else if (v == button_3) {
			select = 2;
		}
		int w = bgImage.getWidth();
		TranslateAnimation animation = null;
		int startX = w * selected_button_position;
		Log.d(MYTAG, "" + startX);
		int endX = w * (select - selected_button_position);
		Log.d(MYTAG, "" + endX);
		animation = new TranslateAnimation(0, endX, bgImage.getTop(),
				bgImage.getTop());
		selected_button_position = select;
		animation.setAnimationListener(new AnimationListener() {

			@Override
			public void onAnimationStart(Animation animation) {
				// TODO Auto-generated method stub

			}

			@Override
			public void onAnimationRepeat(Animation animation) {
				// TODO Auto-generated method stub

			}

			@Override
			public void onAnimationEnd(Animation animation) {
				// TODO Auto-generated method stub
				setSelectButtonBgByPosition();
				bgImage.clearAnimation();
			}
		});
		animation.setDuration(1 * 1000);
		bgImage.startAnimation(animation);
	}
}

 其实就通过TranslateAnimation 实现移动的效果  修改位置呢 则是通过View自带的layout（int l,int t,int r,int b）的这个函数 很简单的 :-) 

附上用的素材（就是解压it快播除出来的！） 最后的两张图

最后附上源码！

评论

1 楼 牛气大志 2014-03-04  

好动写，lz 好人