Android自定义组合控件--底部多按钮切换

浏览数：47 / 时间：2015年06月11日

效果图:
技术分享
现在市场上大多数软件都是类似于上面的结构，底部有几个按钮用于切换到不同的界面。基于OOP思想，我想把下面的一整块布局封装成一个类，也就是我们的自定义组合控件—底部多按钮切换布局，我把它叫做BottomLayout

看上面的布局，几个按钮横向排列，我们先看一下布局
技术分享
最外面LinearLayout 方向 horizontal,然后5个weight相同的RelativeLayout,每个RelativeLayout里面有一个Button(用了显示选中状态)个ImageView(用来显示红点)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal" >

    <RelativeLayout
        android:id="@+id/rl_home"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true" >

        <ImageView
            android:id="@+id/iv_new_home"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentRight="true"
            android:layout_margin="3dp"
            android:src="@drawable/read_circle" />

        <Button
            android:id="@+id/btn_home"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerInParent="true"
            android:background="@drawable/tab_home_selector"
            android:clickable="false" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_encounter"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true" >

        <Button
            android:id="@+id/btn_encounter"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerInParent="true"
            android:background="@drawable/tab_enconter_selector"
            android:clickable="false" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_community"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true" >

        <ImageView
            android:id="@+id/iv_new_community"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentRight="true"
            android:layout_margin="3dp"
            android:src="@drawable/read_circle" />

        <Button
            android:id="@+id/btn_community"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerInParent="true"
            android:background="@drawable/tab_community_selector"
            android:clickable="false" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_message"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true" >

        <ImageView
            android:id="@+id/iv_new_message"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_alignParentRight="true"
            android:layout_margin="3dp"
            android:src="@drawable/read_circle" />

        <Button
            android:id="@+id/btn_message"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerInParent="true"
            android:background="@drawable/tab_message_selector"
            android:clickable="false" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_user"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true" >

        <Button
            android:id="@+id/btn_user"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerInParent="true"
            android:background="@drawable/tab_user_selector"
            android:clickable="false" />
    </RelativeLayout>

</LinearLayout>

下面就是代码了

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节点来消除冗余节点
所以布局文件我们可以写成下面

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center"
android:orientation="horizontal" >

<RelativeLayout
    android:id="@+id/rl_home"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:clickable="true" >

    <ImageView
        android:id="@+id/iv_new_home"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignParentRight="true"
        android:layout_margin="3dp"
        android:src="@drawable/read_circle" />


    <Button
        android:id="@+id/btn_home"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:background="@drawable/tab_home_selector"
        android:clickable="false" />
</RelativeLayout>

<RelativeLayout
    android:id="@+id/rl_encounter"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:clickable="true" >

    <Button
        android:id="@+id/btn_encounter"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:background="@drawable/tab_enconter_selector"
        android:clickable="false" />
</RelativeLayout>

<RelativeLayout
    android:id="@+id/rl_community"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:clickable="true" >

    <Button
        android:id="@+id/btn_community"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:background="@drawable/tab_community_selector"
        android:clickable="false" />
</RelativeLayout>

<RelativeLayout
    android:id="@+id/rl_message"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:clickable="true" >

    <ImageView
        android:id="@+id/iv_new_message"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignParentRight="true"
        android:layout_margin="3dp"
        android:src="@drawable/read_circle" />

    <Button
        android:id="@+id/btn_message"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:background="@drawable/tab_message_selector"
        android:clickable="false" />
</RelativeLayout>

<RelativeLayout
    android:id="@+id/rl_user"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:clickable="true" >

    <Button
        android:id="@+id/btn_user"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:background="@drawable/tab_user_selector"
        android:clickable="false" />
</RelativeLayout>
</merge>

技术分享
关于merge可以看我的这篇Android 视图优化merge标签分析

下面在主界面中

<RelativeLayout 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" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <comzyh.bottomlayout.BottomLayout
        android:id="@+id/layout_bottom"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/darker_gray" />

</RelativeLayout>

使用自定义组合控件

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);
    }

}