Android自定義組合控件--底部多按鈕切換

效果圖:

現在市場上大多數軟件都是類似於上面的結構，底部有幾個按鈕用於切換到不同的界面。基於OOP思想，我想把下面的一整塊布局封裝成一個類，也就是我們的自定義組合控件—底部多按鈕切換布局，我把它叫做BottomLayout<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+v7TJz8PmtcSyvL7Wo6y8uLj2sLTFpbrhz/LFxcHQo6zO0sPHz8i/tNK7z8KyvL7WPGJyIC8+CjxpbWcgYWx0PQ=="這裡寫圖片描述" src="/uploadfile/Collfiles/20150211/2015021108545541.png" title="\" />
最外面LinearLayout 方向 horizontal,然後5個weight相同的RelativeLayout,每個RelativeLayout裡面有一個Button(用了顯示選中狀態)個ImageView(用來顯示紅點)

下面就是代碼了

package comzyh.bottomlayout;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout;

/**
 * 主界面底部的按鈕切換布局
 * 
 * @version 1.0
 * @author zyh
 */
public class BottomLayout extends LinearLayout implements OnClickListener {

    public BottomLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    public BottomLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BottomLayout(Context context) {
        this(context, null, 0);
    }

    private Context context;
    private View rl_home, rl_encounter, rl_community, rl_message, rl_user;
    private View iv_new_message, iv_new_home;
    private Button btn_home, btn_encounter, btn_community, btn_message, btn_user;
    private OnItemClickListener listener;
    private int currentPosition = 0;

    /**
     * 初始化
     * 
     * @version 1.0
     * @author zyh
     * @param context
     */
    private void init(Context context) {
        this.context = context;
        LayoutInflater.from(context).inflate(R.layout.layout_bottom, this);
        // 5塊等分的布局
        rl_home = findViewById(R.id.rl_home);
        rl_encounter = findViewById(R.id.rl_encounter);
        rl_community = findViewById(R.id.rl_community);
        rl_message = findViewById(R.id.rl_message);
        rl_user = findViewById(R.id.rl_user);

        // 5個按鈕
        btn_home = (Button) findViewById(R.id.btn_home);
        btn_encounter = (Button) findViewById(R.id.btn_encounter);
        btn_community = (Button) findViewById(R.id.btn_community);
        btn_message = (Button) findViewById(R.id.btn_message);
        btn_user = (Button) findViewById(R.id.btn_user);

        // 小圓點
        iv_new_home = findViewById(R.id.iv_new_home);
        iv_new_message = findViewById(R.id.iv_new_message);

        hideHomeCircle();
        hideMessageCircle();
        changeButtonStatus(0);// 默認是位置0
        setListener();
    }

    /**
     * 顯示首頁按鈕旁邊的小紅圈
     * 
     * @version 1.0
     * @author zyh
     */
    public void showHomeCircle() {
        iv_new_home.setVisibility(View.VISIBLE);
    }

    /**
     * 隱藏首頁按鈕旁邊的小紅圈
     * 
     * @version 1.0
     * @author zyh
     */
    public void hideHomeCircle() {
        iv_new_home.setVisibility(View.GONE);
    }

    /**
     * 顯示首頁按鈕旁邊的小紅圈
     * 
     * @version 1.0
     * @author zyh
     */
    public void showMessageCircle() {
        iv_new_message.setVisibility(View.VISIBLE);
    }

    /**
     * 隱藏首頁按鈕旁邊的小紅圈
     * 
     * @version 1.0
     * @author zyh
     */
    public void hideMessageCircle() {
        iv_new_message.setVisibility(View.GONE);
    }

    /**
     * 為按鈕設計按下監聽
     * 
     * @version 1.0
     * @author zyh
     */
    private void setListener() {
        rl_home.setOnClickListener(this);
        rl_encounter.setOnClickListener(this);
        rl_community.setOnClickListener(this);
        rl_message.setOnClickListener(this);
        rl_user.setOnClickListener(this);
    }

    /**
     * 提供給外部設置點擊Item的接口
     * 
     * @version 1.0
     * @author zyh
     * @param listener
     */
    public void setOnItemClickListener(OnItemClickListener listener) {
        this.listener = listener;
    }

    public interface OnItemClickListener {
        public void onItemClick(int position);
    }

    @Override
    public void onClick(View v) {
        currentPosition = 0;
        switch (v.getId()) {
            case R.id.rl_home:
                currentPosition = 0;
                break;
            case R.id.rl_encounter:
                currentPosition = 1;
                break;
            case R.id.rl_community:
                currentPosition = 2;
                break;
            case R.id.rl_message:
                currentPosition = 3;
                break;
            case R.id.rl_user:
                currentPosition = 4;
                break;
        }
        if (listener == null) {
            return;
        }
        listener.onItemClick(currentPosition);
        changeButtonStatus(currentPosition);
    }

    /**
     * 根據當前位置改變按鈕選中狀態
     * 
     * @version 1.0
     * @author zyh
     * @param position
     */
    private void changeButtonStatus(int position) {
        btn_home.setSelected(position == 0);
        btn_encounter.setSelected(position == 1);
        btn_community.setSelected(position == 2);
        btn_message.setSelected(position == 3);
        btn_user.setSelected(position == 4);
    }
}

設置5個RelativeLayout為點擊區域,防止有的地方點擊沒反應,設置到Button上(Button的background有可能變形) 封裝Item點擊的監聽器 提供顯示隱藏小圓點的方法

上面的布局可以進行一點優化

查看布局層次,發現中間多了一層LinearLayout,為什麼呢?
因為我們的BottomLayout本身繼承自LinearLayout,而且我們在代碼中這樣寫的

LayoutInflater.from(context).inflate(R.layout.layout_bottom, this);

又添加了一層布局,怎麼優化呢?

使用merge節點來消除冗余節點
所以布局文件我們可以寫成下面

關於merge可以看我的這篇Android 視圖優化merge標簽分析

下面在主界面中

使用自定義組合控件

public class MainActivity extends Activity {

    private BottomLayout layout_bottom;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        layout_bottom = (BottomLayout) findViewById(R.id.layout_bottom);
        layout_bottom.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(int position) {
                Toast.makeText(MainActivity.this, 點擊了 + position, 0).show();
            }
        });

        new Handler().postDelayed(new Runnable() {
            public void run() {
                layout_bottom.showHomeCircle();
            }
        }, 5000);

        new Handler().postDelayed(new Runnable() {
            public void run() {
                layout_bottom.showMessageCircle();
            }
        }, 8000);
    }

}