我的视频课程:《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的自定义布局了。
实例下载