转载:自定义ActionBar、Toolbar布局(解决自定义ActionBar布局左边始终有一点边距的问题)_张旭童的博客-CSDN博客
前两天UI设计师说要去掉actionbar左侧的边距。于是尝试了多种方式,都没有找个一个简易的、通用性强一点的方案。在踌躇之时看到了这个方案,相对来说更优一点。我也记录一下,积累点点滴滴。
左边的那点边距,其实是由于在 ActionBar继承的样式中,有一个属性,contentInsetStart(默认值是16dp),它导致的,所以如果不想要左边的这个边距,直接改为0即可。
这里为目标Activity继承AppConpat的样式,然后覆写其中actionbar的样式:MyActionBarStyle,在其中定义这个actionbar的背景颜色 以及左右边距。
<resources>
<style name="ActionBarTheme" parent="Theme.AppCompat.Light">
<item name="actionBarStyle">@style/ActionBarStyle</item>
</style>
<style name="ActionBarStyle" parent="Widget.AppCompat.Light.ActionBar.Solid">
<!--解决左侧、右侧边距的问题-->
<item name="contentInsetStart">0dp</item>
<item name="contentInsetEnd">0dp</item>
</style>
</resources>
自定义actionbar的布局文件:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@mipmap/ic_launcher" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="好友列表" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="添加好友" />
</RelativeLayout>
然后在目标Activity的onCreate方法里:
//获取ActionBar对象
ActionBar bar = getSupportActionBar();
//自定义一个布局,并居中
bar.setDisplayShowCustomEnabled(true);
View v = LayoutInflater.from(getApplicationContext()).inflate(R.layout.actionbar_main, null);
bar.setCustomView(v, new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, ActionBar.LayoutParams.MATCH_PARENT));
我把这部分封装在了BaseActivity中,继承该Activity的子Activity就不用每次都配置了。
自定义Toolbar:
首先新开一个Activity,继承Theme.AppCompat.Light.NoActionBar,这里是个重点哦,ActionBar和ToolBar是两姐妹,可惜我们只能娶她们一个,只能选择一个在我们(的Activity)的上面,所以如果要用ToolBar就得选择NoActionBar这个style。如下:
<!-- 利用toolbar实现如上效果-->
<style name="ToolBarTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- toolbar颜色 -->
<item name="colorPrimary">@color/material_blue_500</item>
<!-- 状态栏的颜色 -->
<item name="colorPrimaryDark">@color/material_blue_700</item>
<item name="colorAccent">@color/material_green_A200</item>
<!-- toolbar的主题-->
<item name="toolbarStyle">@style/ClubToolbar</item>
</style>
<style name="ClubToolbar" parent="Widget.AppCompat.Toolbar">
<!-- 设置该属性解决空白部分-->
<item name="contentInsetStart">16dp</item>
<item name="contentInsetEnd">16dp</item>
</style>
然后ToolBarActivity.java如下: 重点就是getSupportActionBar().setDisplayShowTitleEnabled(false); 将toolbar的标题设为空,方便我们愉快的完全自定义Toolbar。
public class ToolBarActivity extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar);
Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);
setSupportActionBar(toolbar);//继承自ActionBarActivity
//隐藏Toolbar的标题
getSupportActionBar().setDisplayShowTitleEnabled(false);
}
}
核心就三句话:
获取toolbar控件,设置toolbar为actionbar,然后设置toolbar(actionbar)标题不显示。
=========================================================================
activity_toolbar.xml 如下:
<?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="match_parent"
android:orientation="vertical">
<include
android:id="@+id/id_toolbar"
layout="@layout/toolbar" />
</LinearLayout>
include(方便复用)了一个布局文件,再看toolbar.xml的布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:segmentedgroup="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
>
<include layout="@layout/actionbar_main"/>
</android.support.v7.widget.Toolbar>
由于toolbar其实是一个ViewGroup,所以它可以包含任意的控件在里面。
在这个文件里我们就可以肆意的挥洒我们的toolbar布局,我这里直接include了本文前面的actionbar_main布局。
=========================================================================
至此 完全自定的Toolbar就搞定了,UI如下: