1.导航返回图标不垂直居中问题,如下图:
出现这个问题,只需要设置minHeight属性值与layout_height属性值一样即可,在xml布局中或者代码上设置均可,在代码设置需要注意把dp转成px,否则会达不到效果的
//xml布局文件设置中:
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="46dp"
android:minHeight="46dp"
android:background="@color/colorPrimary"
app:navigationIcon="@drawable/ic_arrow_back_white_24dp">
</android.support.v7.widget.Toolbar>
//代码上设置
toolbar.setMinimumHeight(toPx(this, 46));
public static int toPx(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
int pxValue = (int) (dpValue * scale + 0.5f);
return pxValue;
}
2.Toolbar自定义标题栏不居中问题:
未优化前的xml布局如下:
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="46dp"
android:minHeight="46dp"
android:background="@color/colorPrimary">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textColor="#feffff"
android:textSize="16sp"
android:gravity="center_vertical|left"
android:text="左边"
tools:ignore="HardcodedText"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textColor="#feffff"
android:textSize="16sp"
android:gravity="center"
android:text="标题"
tools:ignore="HardcodedText"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textColor="#feffff"
android:textSize="16sp"
android:gravity="center_vertical|right"
android:text="右边"
tools:ignore="HardcodedText"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
从xml布局中左边、标题、右边这个三个控件都是等比布局,然而实际却没有达到我们想要的左右水平居中的效果,其实中间的标题也没有居中;其实是左边有一个默认的内容边距所导致的,我们可以代码可以查看具体值:
int contentInsetStart = toolbar.getContentInsetStart();
int contentInsetEnd = toolbar.getContentInsetEnd();
Log.i(TAG,"left:"+contentInsetStart+"\n"+"right:"+contentInsetEnd);
//log日志:
ToolbarActivity1: left:32
right:0
知道了问题所在,我们就可以通过消除默认的左边距来达到水平居中的效果,或者设置一个右边距与左边距相同的值
方法一:设置属性值 app:contentInsetStart=“0dp” 即可,不能用app:contentInsetLeft=“0dp”,否则会达不到效果的
//xml布局:
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="46dp"
android:minHeight="46dp"
app:contentInsetStart="0dp"
android:background="@color/colorPrimary">
//或者代码上:
toolbar.setContentInsetsRelative(0,0);
方法二:左右边设置同样的值
int contentInsetStart = toolbar.getContentInsetStart();
int contentInsetEnd = toolbar.getContentInsetEnd();
Log.i(TAG,"left:"+contentInsetStart+"\n"+"right:"+contentInsetEnd);
toolbar.setContentInsetsRelative(contentInsetStart,contentInsetStart);
当有导航返回图标和中间标题时,此时设置 app:contentInsetStart=“0dp”,想让标题居中是达不到效果的,如图:
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="46dp"
android:minHeight="46dp"
app:contentInsetStart="0dp"
app:navigationIcon="@drawable/ic_arrow_back_white_24dp"
android:background="@color/colorPrimary">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#feffff"
android:textSize="16sp"
android:gravity="center"
android:text="标题"
tools:ignore="HardcodedText"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
出现这种情况,其他导航返回图标也有一个默认宽度的,同样我们也可以通过代码可知:
int contentInsetStartWithNavigation = toolbar.getContentInsetStartWithNavigation();
Log.i(TAG,"nav:"+contentInsetStartWithNavigation);
//log日志:
05-10 00:16:21.606 4578-4578/com.pos.templatefaq I/ToolbarActivity1: nav:144
解决方案:其实和上面的方案二基本一样的思路
int contentInsetStartWithNavigation = toolbar.getContentInsetStartWithNavigation();
Log.i(TAG,"nav:"+contentInsetStartWithNavigation);
toolbar.setContentInsetsRelative(contentInsetStartWithNavigation,contentInsetStartWithNavigation);
// 或者在xml布局设置左右边相同的边距也可
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="46dp"
android:minHeight="46dp"
app:navigationIcon="@drawable/ic_arrow_back_white_24dp"
//注意点
app:contentInsetStartWithNavigation="50dp"
android:background="@color/colorPrimary">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
//注意点
android:layout_marginEnd="50dp"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#feffff"
android:textSize="16sp"
android:gravity="center"
android:text="标题"
tools:ignore="HardcodedText"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
效果如下:
同样的思路可以自定义很多想要的效果:
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="@dimen/toolbar_height"
android:minHeight="@dimen/toolbar_height"
android:background="@color/colorWhite"
android:elevation="1dp"
android:gravity="center_vertical"
app:navigationIcon="@drawable/ic_nav_back"
app:contentInsetStartWithNavigation="50dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/AppTheme.NoActionBar.PopupOverlay"
app:titleTextAppearance="@style/Toolbar_TextAppearance_White">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<EditText
android:id="@+id/et_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="50dp"
android:background="@drawable/search_product_list_bg"
android:drawableStart="@drawable/icon_search"
android:drawablePadding="4dp"
android:textSize="@dimen/text_size_14"
android:hint="@string/search_product_tips"
android:textColorHint="@color/colorTxtGray"
android:textColor="@color/colorBlack"
android:paddingBottom="4dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="4dp" />
<ImageButton
android:id="@+id/search"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right|center_vertical"
android:background="@null"
android:paddingRight="15dp"
android:paddingLeft="15dp"
android:src="@drawable/search_icon_selecter2"
tools:ignore="RtlHardcoded" />
</FrameLayout>
</android.support.v7.widget.Toolbar>