Android自定义ToolBar布局

最新推荐文章于 2025-06-11 13:27:41 发布

转载最新推荐文章于 2025-06-11 13:27:41 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/1177694/blog/909093

文章标签：

#移动开发 #python #java

本文介绍如何在Android应用中自定义Toolbar布局实现类似iOS的Tab切换功能。通过使用LayoutInflater.inflate方法，将自定义布局添加到Toolbar中，实现了左右切换的效果。文章提供了具体的布局文件和Activity代码示例。

2019独角兽企业重金招聘Python工程师标准>>>

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

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

实现步骤如下：

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

[html] view plain copy

<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）

[java] view plain copy

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