Android自定义ToolBar布局

我的视频课程：《FFmpeg打造Android万能音频播放器》

        在项目中，我们经常使用toolbar作为标题栏，并为之添加菜单选项。但是会出现这用情况：在主界面要实现类似于tab的切换功能，和IOS那种一样，左右切换，对于用toolbar布局来说，这就有点麻烦了。此时我们就需要来自定义toolbar的布局了，其实还是挺简单的，这里我们需要用到getLayoutInflater().inflate(int,ViewGroup)这个方法，此方法可以将制定的布局文件添加到viewgroup视图中，所以我们就可以用这个方法，把自定义的布局添加到我们的toolbar中，来代替原来的toolbar布局。老规矩，先来张效果图看看：结尾有实例下载的。

这就是仿的QQ那种tab切换效果。

实现步骤如下：

1、首先我们需要写好我们需要自定义的布局文件（toobar_button.xml）

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="12dp"
            android:text="消息"
            android:textSize="18sp"
            android:visibility="gone"/>
        <LinearLayout
            android:id="@+id/ly_title"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_centerInParent="true"
            android:gravity="center">
            <TextView
                android:id="@+id/tv_msg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:gravity="right|center_vertical"
                android:paddingRight="12dp"
                android:text="消息"
                android:textSize="14sp"
                android:background="@drawable/bg_zhibo_selected"/>

            <TextView
                android:id="@+id/tv_phone"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="left|center_vertical"
                android:paddingLeft="12dp"
                android:text="电话"
                android:textSize="14sp"
                android:background="@drawable/bg_gonghui_selected"/>
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

这个布局文件就是左右切换的tab布局文件，都很简单的。其中选中和未选中效果是设置的selector，这里就不在赘述了，相信大家都会使用的。
2、然后就是在activity中调用之（MainActivity.java）

package com.ywl5320.toolbartab;

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;

public class MainActivity extends Activity {

	private Toolbar toolbar;

	private TextView tvMsg;
	private TextView tvPhone;
	private TextView tvContent;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		toolbar = (Toolbar) findViewById(R.id.tool_bar);
		getLayoutInflater().inflate(R.layout.toobar_button, toolbar);//把自定义布局文件添加到toolbar中

		tvMsg = (TextView) findViewById(R.id.tv_msg);
		tvPhone = (TextView) findViewById(R.id.tv_phone);
		tvContent = (TextView) findViewById(R.id.tv_content);

		selectedToolbarItem(0);
		tvContent.setText("消息");

		tvMsg.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				selectedToolbarItem(0);
				tvContent.setText("消息");
			}
		});

		tvPhone.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				selectedToolbarItem(1);
				tvContent.setText("电话");
			}
		});

	}

	/**
	 *设置选中的条目，选中状态和颜色
	 * @param item
	 *            0 :消息 1：电话
	 */
	public void selectedToolbarItem(int item) {
		if (item == 0) {
			tvMsg.setSelected(true);
			tvPhone.setSelected(false);

			tvMsg.setTextColor(getResources().getColor(R.color.default_font));
			tvPhone.setTextColor(getResources().getColor(R.color.font_white));
		} else if (item == 1) {
			tvMsg.setSelected(false);
			tvPhone.setSelected(true);

			tvMsg.setTextColor(getResources().getColor(R.color.font_white));
			tvPhone.setTextColor(getResources().getColor(R.color.default_font));
		}
	}

}

getLayoutInflater().inflate(R.layout.toobar_button, toolbar);这就是核心语句，这样就把我们写好的自定义布局添加到了toolbar中，其他的都是一些控制逻辑，也是很简单的。这就完成了toolbar的自定义布局了。 实例下载