首页 > 其他 > 详细

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

时间:2014-03-25 13:02:47      阅读:456      评论:0      收藏:0      [点我收藏+]

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

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


bubuko.com,布布扣
 
bubuko.com,布布扣
 
bubuko.com,布布扣

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

 

main.xml

bubuko.com,布布扣
<?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> 
bubuko.com,布布扣

 

接着是activity的代码

bubuko.com,布布扣
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);  
    }  
}  
bubuko.com,布布扣

 

 

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

附上用的素材(就是解压it快播除出来的!) 最后的两张图

最后附上源码!

仿it快播顶部button点击背景滑动切换的效果,布布扣,bubuko.com

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

原文:http://www.cnblogs.com/duanxz/p/3621155.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!