Android自定义ToolBar布局

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


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

Android自定义ToolBar布局_第1张图片

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

实现步骤如下:

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



    
        
        
            

            
        
    

这个布局文件就是左右切换的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的自定义布局了。 实例下载


你可能感兴趣的:(实用功能)