仿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 implementsOnClickListener {/** 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;@Overridepublic 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) {//选择第一个buttonl = 0;r =(int)(w / 3.0);}else if(selected_button_position == 2){//选择最后一个buttonr = w;}int t = bgImage.getTop();int b = bgImage.getBottom();bgImage.layout(l, t, r, b);bgImage.invalidate();}@Overridepublic void onClick(View v) {// TODO Auto-generated method stubint 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() {@Overridepublic void onAnimationStart(Animation animation) {// TODO Auto-generated method stub}@Overridepublic void onAnimationRepeat(Animation animation) {// TODO Auto-generated method stub}@Overridepublic void onAnimationEnd(Animation animation) {// TODO Auto-generated method stubsetSelectButtonBgByPosition();bgImage.clearAnimation();}});animation.setDuration(1 * 1000);bgImage.startAnimation(animation);}}?其实就通过TranslateAnimation 实现移动的效果 ?修改位置呢 则是通过View自带的layout（int l,int t,int r,int b）的这个函数 很简单的 :-)?
附上用的素材（就是解压it快播除出来的！） 最后的两张图
最后附上源码！