最近在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快播除出来的!) 最后的两张图
最后附上源码!
仿it快播顶部button点击背景滑动切换的效果,布布扣,bubuko.com
原文:http://www.cnblogs.com/duanxz/p/3621155.html