Android打造通用标题栏——让你的App统一标题栏风格
来源:互联网 发布:优化csgo的显卡驱动 编辑:程序博客网 时间:2024/06/03 20:51
前言
在Android应用实际开发中,标题栏是App必不可少的元素之一(当然,不包括游戏),大部分情况下,系统提供的标题栏并不能完全满足我们的需求,就需要手动去编写标题栏布局,那么问题来了,如果是在Activity或者Fragment布局文件里面编写标题栏,那岂不是每一个页面的布局文件都要增加不少的代码,如果想更改一下整个app的标题栏的风格...(十脸蒙蔽),甚至有时候还会可能一个不留神写错了一些属性,导致一些页面的标题栏看起来并不完全一样,用户体验度就悲催了...
需求
那么我们可以通过什么方式来提高我们的效率和质量呢?我想要的效果是这样的:
1.可以在每个Activity或Fragment的布局文件的最外层布局直接使用自定义的标题栏布局,然后其他的内容只需要想以往那样直接写在最外层布局里面,像这样:
2.可以直接在布局文件中声明显示的文字内容,icon素材,标题内容等,而像背景颜色、字体颜色、字体大小就可以统一成一个地方设置,只要更改一个地方,可以方便更改所有标题栏的风格,像这样:
实现
既然定了模样,那就开始来实现这样一个标题栏,首先思考我们需要的属性,一般的标题栏都是左边一个按钮,右边一个按钮,中间一个标题,当然有些情况下不是按钮而是文字,所以我们可以制定多种属性选择,在values下新建一个attrs.xml文件,往里面添加如下属性:
<?xml version="1.0" encoding="utf-8"?><resources> <!--标题栏样式--> <declare-styleable name="CustomToolBar"> <!--左按钮是否可见|背景--> <attr name="left_btn_visible" format="boolean"/> <attr name="left_btn_src" format="reference|color"/> <!--左文本是否可见|文本内容--> <attr name="left_tv_visible" format="boolean"/> <attr name="left_tv_text" format="string"/> <!--右边按钮是否可见|背景--> <attr name="right_btn_visible" format="boolean"/> <attr name="right_btn_src" format="reference|color"/> <!--右文本是否可见|文本内容--> <attr name="right_tv_visible" format="boolean"/> <attr name="right_tv_text" format="string"/> <!--标题是否可见|文本内容--> <attr name="title_visible" format="boolean"/> <attr name="title_text" format="string"/> <!--背景--> <attr name="barBackground" format="reference|color"/> </declare-styleable></resources>
定义好了样式之后,开始编写通用的标题栏布局文件
layout_common_toolbar.xml:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <RelativeLayout android:id="@+id/toolbar_content_rlyt" android:layout_width="match_parent" android:layout_height="50dp" android:paddingLeft="15dp" android:paddingRight="15dp" android:background="@color/bg_toolbar"> <Button android:id="@+id/toolbar_left_btn" android:layout_width="25dp" android:layout_height="25dp" android:layout_alignParentLeft="true" android:padding="50dp" android:gravity="center" android:layout_centerVertical="true" android:background="@drawable/icon_back" android:visibility="invisible"/> <TextView android:id="@+id/toolbar_left_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:gravity="center" android:layout_centerVertical="true" android:textColor="#fff" android:textSize="15sp" android:text="返回" android:visibility="gone" /> <TextView android:id="@+id/toolbar_title_tv" android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center" android:layout_centerInParent="true" android:singleLine="true" android:text="标题" android:textSize="20sp" android:textColor="#fff" android:maxEms="10" android:visibility="invisible"/> <Button android:id="@+id/toolbar_right_btn" android:layout_width="25dp" android:layout_height="25dp" android:layout_alignParentRight="true" android:gravity="center" android:layout_centerVertical="true" android:visibility="invisible" android:background="#00000000" android:textSize="15sp" android:textColor="#fff"/> <TextView android:id="@+id/toolbar_right_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:gravity="center" android:layout_centerVertical="true" android:textColor="#fff" android:textSize="15sp" android:text="更多" android:visibility="gone"/> </RelativeLayout> <!--标题栏底部微阴影--> <View android:layout_width="match_parent" android:layout_height="0.5dp" android:background="#AAAAAA" /></LinearLayout>
分析:其实就是左Button、左TextView、中间标题TextView、右边Button、右边TextView以及一个底部的细微的阴影效果
属性声明好了,布局文件也写好了,那接下来自然是在自定义类中设置属性值:
我们想要实现将其作为最外层父布局来写,那肯定里面要容纳子控件,可以通过继承LinearLayout来进行自定义,到时候只需直接往里层继续编写子控件布局。
/** * Created by IT_ZJYANG on 2016/9/9. * 标题栏 */public class CustomToolBar extends LinearLayout{ private Boolean isLeftBtnVisible; private int leftResId; private Boolean isLeftTvVisible; private String leftTvText; private Boolean isRightBtnVisible; private int rightResId; private Boolean isRightTvVisible; private String rightTvText; private Boolean isTitleVisible; private String titleText; private int backgroundResId; public CustomToolBar(Context context) { this(context, null); } public CustomToolBar(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CustomToolBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initView(attrs); } /** * 初始化属性 * @param attrs */ public void initView(AttributeSet attrs){ TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.CustomToolBar); /**-------------获取左边按钮属性------------*/ isLeftBtnVisible = typedArray.getBoolean(R.styleable.CustomToolBar_left_btn_visible, false); leftResId = typedArray.getResourceId(R.styleable.CustomToolBar_left_btn_src, -1); /**-------------获取左边文本属性------------*/ isLeftTvVisible = typedArray.getBoolean(R.styleable.CustomToolBar_left_tv_visible, false); if(typedArray.hasValue(R.styleable.CustomToolBar_left_tv_text)){ leftTvText = typedArray.getString(R.styleable.CustomToolBar_left_tv_text); } /**-------------获取右边按钮属性------------*/ isRightBtnVisible = typedArray.getBoolean(R.styleable.CustomToolBar_right_btn_visible, false); rightResId = typedArray.getResourceId(R.styleable.CustomToolBar_right_btn_src, -1); /**-------------获取右边文本属性------------*/ isRightTvVisible = typedArray.getBoolean(R.styleable.CustomToolBar_right_tv_visible, false); if(typedArray.hasValue(R.styleable.CustomToolBar_right_tv_text)){ rightTvText = typedArray.getString(R.styleable.CustomToolBar_right_tv_text); } /**-------------获取标题属性------------*/ isTitleVisible = typedArray.getBoolean(R.styleable.CustomToolBar_title_visible, false); if(typedArray.hasValue(R.styleable.CustomToolBar_title_text)){ titleText = typedArray.getString(R.styleable.CustomToolBar_title_text); } /**-------------背景颜色------------*/ backgroundResId = typedArray.getResourceId(R.styleable.CustomToolBar_barBackground, -1); typedArray.recycle(); /**-------------设置内容------------*/ View barLayoutView = View.inflate(getContext(), R.layout.layout_common_toolbar, null); Button leftBtn = (Button)barLayoutView.findViewById(R.id.toolbar_left_btn); TextView leftTv = (TextView)barLayoutView.findViewById(R.id.toolbar_left_tv); TextView titleTv = (TextView)barLayoutView.findViewById(R.id.toolbar_title_tv); Button rightBtn = (Button)barLayoutView.findViewById(R.id.toolbar_right_btn); TextView rightTv = (TextView)barLayoutView.findViewById(R.id.toolbar_right_tv); RelativeLayout barRlyt = (RelativeLayout)barLayoutView.findViewById(R.id.toolbar_content_rlyt); if(isLeftBtnVisible){ leftBtn.setVisibility(VISIBLE); } if(isLeftTvVisible){ leftTv.setVisibility(VISIBLE); } if(isRightBtnVisible){ rightBtn.setVisibility(VISIBLE); } if(isRightTvVisible){ rightTv.setVisibility(VISIBLE); } if(isTitleVisible){ titleTv.setVisibility(VISIBLE); } leftTv.setText(leftTvText); rightTv.setText(rightTvText); titleTv.setText(titleText); if(leftResId != -1){ leftBtn.setBackgroundResource(leftResId); } if(rightResId != -1){ rightBtn.setBackgroundResource(rightResId); } if(backgroundResId != -1){ barRlyt.setBackgroundColor(getResources().getColor(R.color.bg_toolbar)); } //将设置完成之后的View添加到此LinearLayout中 addView(barLayoutView, 0); }}
主要看initView方法,在这个方法中主要做两步:
1.获取我们在实际布局文件(比如Activity的布局文件)中设置的属性的值
2.根据这些值来做相应的操作,比如设置是否可见,设置是选用文字还是选用按钮、标题文本内容等等
思路:可以看到,首先通过inflate获取标题栏layout文件,然后再通过findViewById获取子控件(左Button、右Button、标题TextView等等),再根据我们第一步获取的那些属性值对它们进行相应的设置,最后将设置完成的View通过addView(barLayoutView, 0);将其添加到我们的CustomToolBar中的第一个位置,由于CustomToolBar是继承于LinearLayout,所以标题栏View将会处于最上面的位置,并且以后添加的其他子控件将会依次叠加在标题栏下面(如果CustomToolBar是继承于RelativeLayout,到时候添加内层控件时会被标题栏遮住,不是我们想要的效果)
背景颜色是通过调用资源R.color.bg_toolbar,只需在color.xml中定义:
<!--标题栏颜色--><color name="bg_toolbar">#32A082</color>
至于字体大小,也可以用同样的方式抽取到dimen.xml中,然后在layout_common_toolbar.xml中对应的控件下引用即可,如:
运用
完成以上步骤,基本定义好了,接下来就是轻松地调用了:
activity_main.xml
<com.example.zjyang.customtoorbar.CustomToolBar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" app:left_tv_visible="true" app:left_tv_text="返回" app:right_btn_visible="true" app:right_btn_src="@drawable/icon_search" app:title_visible="true" app:title_text="首页" tools:context="com.example.zjyang.customtoorbar.MainActivity"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:layout_gravity="center" android:text="@string/app_name" android:textSize="20sp"/></com.example.zjyang.customtoorbar.CustomToolBar>
其实在这里无非就是设置自定义属性(是否可见、文本内容),这些都是具体页面所决定的具体内容,而背景颜色等所有标题栏共有的属性则在xml中去配置。
运行效果
其它页面自然同理设置,只需copy过去,修改一下文案和是否可见,就完成了另外一个页面的标题栏,并且高度颜色什么的也保持了相同的规范,修改这个规范也仅仅只是在资源文件中改一下值,有效提高了开发效率和可维护性。
源码:点此下载
- Android打造通用标题栏——让你的App统一标题栏风格
- Android 利用Toolbar打造统一风格的标题栏
- Android 利用Toolbar打造统一风格的标题栏
- 轻松打造APP统一标题栏
- Android通用标题栏
- Android通用标题栏
- android项目中标题栏的风格问题--------------------------
- 一个通用的标题栏
- android app去除标题栏
- Android app去掉标题栏
- android studio 去除APP的应用标题栏
- Android 如何去掉App全局的标题栏
- Android通用标题栏组合控件
- Android—如何添加布局的标题栏
- Android实现状态栏和标题栏的风格一致
- Android Studio App隐藏标题栏
- android开发中通用标题栏的设置与使用
- Android Studio3.0中自定义标题栏的实现——去掉标题栏
- 前端小特效
- 分布式与集群的区别
- haproxy安装配置
- 函数指针
- leetcode——Kth Largest Element in an Array
- Android打造通用标题栏——让你的App统一标题栏风格
- mfc 对话框 listbox control
- 过客--茫然了,梳理一下20160911
- hdu5875(思维题)
- Volley框架你想知道的秘密
- 使用rxjava实现imager loader,自定义缓存规则,
- bootstrap 的全屏轮播
- 对比Vector与List操作时间,以及用日志打印操作时间
- Codeforces Round #370 (Div. 2) C. Memory and De-Evolution【逆向思维+贪心】