仿QQ tab滑動效果

      

       模仿androidQQ下 遊標滾動效果 ，網上有幾個版本，但都有一些缺陷，並且個人覺得用起來不夠靈活，所以就自己改良了一下。

直接貼代碼

xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/top_bg" >

        <Button
            android:id="@+id/btn1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="tab1" />

        <Button
            android:id="@+id/btn2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="tab2" />

        <Button
            android:id="@+id/btn3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="tab3" />

        <Button
            android:id="@+id/btn4"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="tab4" />
    </LinearLayout>

    <ImageView
        android:id="@+id/ivCursor"
        android:layout_width="wrap_content"
        android:layout_height="3dip"
        android:layout_marginTop="5dip"
        android:src="@drawable/menu_bg"
        android:scaleType="matrix" /><--一定要記得設置type-->

</LinearLayout>

Java

package com.example.mytabtest;

import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.PopupWindow;

public class MainActivity extends Activity {
    private Button btn1;
    private Button btn2;
    private Button btn3;
    private Button btn4;
    private int width;
    private int offset;
    private int bmpW;
    private ImageView ivCursor;
    private int currIndex;
    private int startX;
    ButtonClickListener listener;
    private int tabW;
    private Button btnTest;
    PopupWindow popupWindow;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initUI();
        initData();
        btnTest.setOnClickListener(new OnClickListener() {

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

    public void showPopupWindow() {
        View contentView = LayoutInflater.from(getApplicationContext())
                .inflate(R.layout.popup, null);
        contentView.setBackgroundColor(Color.RED);
        // 爲彈出框設定自定義的佈局
        popupWindow.setContentView(contentView);
        popupWindow.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        popupWindow.setOutsideTouchable(false); // 設置是否允許在外點擊使其消失，到底有用沒？
        // popupWindow.setAnimationStyle(R.style.PopupAnimation);
        if (popupWindow.isShowing()) {
            popupWindow.dismiss();
        } else {
            System.out.println(btnTest.getWidth());
            popupWindow.showAsDropDown(btnTest, -btnTest.getWidth() / 2, 0);

        }
    }

    public void initUI() {
        btnTest = (Button) findViewById(R.id.btnTest);
        btn1 = (Button) findViewById(R.id.btn1);
        btn2 = (Button) findViewById(R.id.btn2);
        btn3 = (Button) findViewById(R.id.btn3);
        btn4 = (Button) findViewById(R.id.btn4);
        ivCursor = (ImageView) findViewById(R.id.ivCursor);

        popupWindow = new PopupWindow(findViewById(R.id.main),
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    }

    public void initData() {
        DisplayMetrics displayMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        width = displayMetrics.widthPixels;
        bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.menu_bg)
                .getWidth();
        System.out.println("bmpW:" + bmpW);

        Matrix matrix = new Matrix();
        matrix.postTranslate(offset, 0);
        ivCursor.setImageMatrix(matrix);
        startX = offset;
        tabW = width / 4;// 每一個tab的寬度
        offset = (width / 4 - bmpW) / 2;// 滾動下標與tab的內邊距
        listener = new ButtonClickListener();
        btn1.setOnClickListener(listener);
        btn2.setOnClickListener(listener);
        btn3.setOnClickListener(listener);
        btn4.setOnClickListener(listener);
    }

    private class ButtonClickListener implements OnClickListener {

        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            switch (v.getId()) {
            case R.id.btn1:
                if (currIndex != 0) {
                    currIndex = 0;
                    translate(ivCursor, startX, tabW * currIndex + offset, 0, 0);
                }

                break;
            case R.id.btn2:
                if (currIndex != 1) {
                    currIndex = 1;
                    translate(ivCursor, startX, tabW * currIndex + offset, 0, 0);

                }

                break;
            case R.id.btn3:
                if (currIndex != 2) {
                    currIndex = 2;
                    translate(ivCursor, startX, tabW * currIndex + offset, 0, 0);

                }

                break;
            case R.id.btn4:
                if (currIndex != 3) {
                    currIndex = 3;
                    translate(ivCursor, startX, tabW * currIndex + offset, 0, 0);

                }

                break;
            }
            startX = tabW * currIndex + offset;
        }
    }

    private void translate(View v, int startX, int toX, int startY, int toY) {
        Animation anim = new TranslateAnimation(startX, toX, startY, toY);
        anim.setDuration(100);
        anim.setFillAfter(true);
        v.startAnimation(anim);
    }
}

說明，想實現像QQ那樣頁面的切換，只有在佈局下添加 ViewPager控件就可以了，剩下的就很簡單了，另外以上只是一種實現方式，其他還有很多實現方式，根據個人編碼習慣自行選擇！