在软件开发过程中,经常见到,就是APP 的标题栏样式几乎都是一样的,只是文字不同而已,两边图标不同。为了减少重复代码,提高效率, 方便大家使用,我们把标题栏通过组合的方式定义成一个控件。

例下图:

点击:

如不设置左边,右边图片:

下面说一下具体实现步骤:



步骤一:



导航栏包括:

* 返回按钮

* 标题

* 右侧按钮(功能不确定)



首先是布局文件,如下:

</pre><p></p><pre name="code" class="java"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_blue_light"
tools:context=".MainActivity" > <TextView
android:id="@+id/text_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textSize="25sp"
android:gravity="center"
android:textColor="@android:color/white"
android:padding="2dp"
/> <ImageView
android:id="@+id/back_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:scaleType="centerInside"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="12dp"
/> <ImageView
android:id="@+id/right_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:scaleType="centerInside"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="12dp"
/> </RelativeLayout>

步骤二:在values下新建 attrs文件 定义控件要用到的属性,如下面的代码所示。这里我们定义了标题栏文字(textText),字体大小(textSize),字体颜色(textColor),左边按钮 (leftBtn ),右边按钮 (rightBtn )  。(当然你还要以给它添加其它属性如背景)

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Topbar">
<attr name="titleText" format="string|reference" />
<attr name="titleSize" format="dimension|reference" />
<attr name="titleColor" format="color|reference" /> <attr name="leftBtn" format="reference"/>
<attr name="rightBtn" format=" reference"/> </declare-styleable>
</resources>

步骤三:定义类Topbar继承自RelativeLayout,重写构造函数并构造方法中获得我们自定义的属性,具体代码如下。代码中定义了一个TextView显示标题文字,一个Imageview 显示左侧按钮,一个Imageview 显示右侧按钮 ,其他字段对应attrs中声明的属性。

	private ImageView backView;
private ImageView rightView;
private TextView titleView; private String titleTextStr;
private int titleTextSize ;
private int titleTextColor ; private Drawable leftImage ;
private Drawable rightImage ; public TopBarView(Context context){
this(context, null);
} public TopBarView(Context context, AttributeSet attrs) {
this(context, attrs,R.style.AppTheme); } public TopBarView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
getConfig(context, attrs);
initView(context);
} /**
* 从xml中获取配置信息
*/
private void getConfig(Context context, AttributeSet attrs) {
//TypedArray是一个数组容器用于存放属性值
TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.Topbar); int count = ta.getIndexCount();
for(int i = 0;i<count;i++)
{
int attr = ta.getIndex(i);
switch (attr)
{
case R.styleable.Topbar_titleText:
titleTextStr = ta.getString(R.styleable.Topbar_titleText);
break;
case R.styleable.Topbar_titleColor:
// 默认颜色设置为黑色
titleTextColor = ta.getColor(attr, Color.BLACK);
break;
case R.styleable.Topbar_titleSize:
// 默认设置为16sp,TypeValue也可以把sp转化为px
titleTextSize = ta.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
break; case R.styleable.Topbar_leftBtn: leftImage = ta.getDrawable(R.styleable.Topbar_leftBtn);
break;
case R.styleable.Topbar_rightBtn:
rightImage = ta.getDrawable(R.styleable.Topbar_rightBtn);
break;
}
} //用完务必回收容器
ta.recycle(); } private void initView(Context context)
{
View layout = LayoutInflater.from(context).inflate(R.layout.custom_groupwidget,
this,true); backView = (ImageView) layout.findViewById(R.id.back_image);
titleView = (TextView) layout.findViewById(R.id.text_title);
rightView = (ImageView) layout.findViewById(R.id.right_image);
backView.setOnClickListener(this);
rightView.setOnClickListener(this); if(null != leftImage)
backView.setImageDrawable(leftImage);
if(null != rightImage)
rightView.setImageDrawable(rightImage);
if(null != titleTextStr)
{
titleView.setText(titleTextStr);
titleView.setTextSize(titleTextSize);
titleView.setTextColor(titleTextColor);
}
}

步骤四:定义了一个OnClickListenner来监听ImageView的点击

   private onTitleBarClickListener onMyClickListener;

    /**
* 设置按钮点击监听接口
* @param callback
*/
public void setClickListener(onTitleBarClickListener listener) {
this.onMyClickListener = listener;
} /**
* 导航栏点击监听接口
*/
public static interface onTitleBarClickListener{
/**
* 点击返回按钮回调
*/
void onBackClick(); void onRightClick();
} @Override
public void onClick(View v) {
int id = v.getId();
switch(id)
{
case R.id.back_image:
if(null != onMyClickListener)
onMyClickListener.onBackClick();
break;
case R.id.right_image:
if(null != onMyClickListener)
onMyClickListener.onRightClick();
break;
}
}

步骤五:
再看一下主布局怎样使用自定义控件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:custom="http://schemas.android.com/apk/res/com.example.customgroupwidget"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" > <com.example.customgroupwidget.TopBarView
android:id="@+id/topbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
custom:titleText="我的消息"
custom:titleSize="15sp"
custom:titleColor="@android:color/white"
custom:leftBtn="@drawable/back_page"
custom:rightBtn="@drawable/edit_normal" /> </RelativeLayout>

步骤六:最后看一下Activity中的调用:

public class MainActivity extends Activity implements onTitleBarClickListener {

    private  TopBarView topbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); topbar = (TopBarView)findViewById(R.id.topbar); topbar.setClickListener(this);
}
@Override
public void onBackClick() {
Toast.makeText(MainActivity.this, "你点击了左侧按钮", Toast.LENGTH_LONG).show(); }
@Override
public void onRightClick() {
Toast.makeText(MainActivity.this, "你点击了右侧按钮", Toast.LENGTH_SHORT).show(); }
}

 demo下载

最后普及一下,attrs.xml中的属性的format(类型)说明

1. reference:参考某一资源ID。

(1)属性定义:

<declare-styleable name = "名称">

<attr name = "background" format = "reference" />

</declare-styleable>

(2)属性使用:

<ImageView

android:layout_width = "42dip"

                     android:layout_height = "42dip"

                     android:background = "@drawable/图片ID"

/>

2. color:颜色值。

(1)属性定义:

<declare-styleable name = "名称">

<attr name = "textColor" format = "color" />

</declare-styleable>

(2)属性使用:

<TextView

android:layout_width = "42dip"

                     android:layout_height = "42dip"

                     android:textColor = "#00FF00"

/>

3. boolean:布尔值。

(1)属性定义:

<declare-styleable name = "名称">

<attr name = "focusable" format = "boolean" />

</declare-styleable>

(2)属性使用:

<Button

android:layout_width = "42dip"

                    android:layout_height = "42dip"

android:focusable = "true"

/>

4. dimension:尺寸值。

(1)属性定义:

<declare-styleable name = "名称">

<attr name = "layout_width" format = "dimension" />

</declare-styleable>

(2)属性使用:

<Button

android:layout_width = "42dip"

                    android:layout_height = "42dip"

/>

5. float:浮点值。

(1)属性定义:

<declare-styleable name = "AlphaAnimation">

<attr name = "fromAlpha" format = "float" />

                   <attr name = "toAlpha" format = "float" />

</declare-styleable>

(2)属性使用:

<alpha

                   android:fromAlpha = "1.0"

                   android:toAlpha = "0.7"

/>

6. integer:整型值。

(1)属性定义:

<declare-styleable name = "AnimatedRotateDrawable">

<attr name = "visible" />

                   <attr name = "frameDuration" format="integer" />

                   <attr name = "framesCount" format="integer" />

                   <attr name = "pivotX" />

                   <attr name = "pivotY" />

                   <attr name = "drawable" />

</declare-styleable>

(2)属性使用:

<animated-rotate

xmlns:android = "http://schemas.android.com/apk/res/android

                   android:drawable = "@drawable/图片ID" 

                   android:pivotX = "50%" 

                   android:pivotY = "50%" 

                   android:framesCount = "12" 

                   android:frameDuration = "100"

/>

7. string:字符串。

(1)属性定义:

<declare-styleable name = "MapView">

                   <attr name = "apiKey" format = "string" />

            </declare-styleable>

(2)属性使用:

<com.google.android.maps.MapView

                    android:layout_width = "fill_parent"

                    android:layout_height = "fill_parent"

                    android:apiKey = "0jOkQ80oD1JL9C6HAja99uGXCRiS2CGjKO_bc_g"

/>

8. fraction:百分数。

(1)属性定义:

<declare-styleable name="RotateDrawable">

                   <attr name = "visible" />

                   <attr name = "fromDegrees" format = "float" />

                   <attr name = "toDegrees" format = "float" />

                   <attr name = "pivotX" format = "fraction" />

                   <attr name = "pivotY" format = "fraction" />

                   <attr name = "drawable" />

            </declare-styleable>

(2)属性使用:

<rotate

xmlns:android = "http://schemas.android.com/apk/res/android"

               android:interpolator = "@anim/动画ID"

android:fromDegrees = "0"

               android:toDegrees = "360"

android:pivotX = "200%"

android:pivotY = "300%"

               android:duration = "5000"

android:repeatMode = "restart"

android:repeatCount = "infinite"

/>

9. enum:枚举值。

(1)属性定义:

<declare-styleable name="名称">

                   <attr name="orientation">

                          <enum name="horizontal" value="0" />

                          <enum name="vertical" value="1" />

                   </attr>

</declare-styleable>

(2)属性使用:

<LinearLayout

xmlns:android = "http://schemas.android.com/apk/res/android"

                    android:orientation = "vertical"

                    android:layout_width = "fill_parent"

                    android:layout_height = "fill_parent"

                    >

            </LinearLayout>

10. flag:位或运算。

(1)属性定义:

<declare-styleable name="名称">

                    <attr name="windowSoftInputMode">

                            <flag name = "stateUnspecified" value = "0" />

                            <flag name = "stateUnchanged" value = "1" />

                            <flag name = "stateHidden" value = "2" />

                            <flag name = "stateAlwaysHidden" value = "3" />

                            <flag name = "stateVisible" value = "4" />

                            <flag name = "stateAlwaysVisible" value = "5" />

                            <flag name = "adjustUnspecified" value = "0x00" />

                            <flag name = "adjustResize" value = "0x10" />

                            <flag name = "adjustPan" value = "0x20" />

                            <flag name = "adjustNothing" value = "0x30" />

                     </attr>

</declare-styleable>

(2)属性使用:

<activity

android:name = ".StyleAndThemeActivity"

                   android:label = "@string/app_name"

                   android:windowSoftInputMode = "stateUnspecified | stateUnchanged | stateHidden">

                   <intent-filter>

                          <action android:name = "android.intent.action.MAIN" />

                          <category android:name = "android.intent.category.LAUNCHER" />

                   </intent-filter>

             </activity>

特别要注意:

属性定义时可以指定多种类型值。

(1)属性定义:

<declare-styleable name = "名称">

<attr name = "background" format = "reference|color" />

</declare-styleable>

(2)属性使用:

<ImageView

android:layout_width = "42dip"

                     android:layout_height = "42dip"

                     android:background = "@drawable/图片ID|#00FF00"

/>

android 自定义组合控件 顶部导航栏的更多相关文章

  1. Android自定义组合控件详细示例 (附完整源码)

    在我们平时的Android开发中,有时候原生的控件无法满足我们的需求,或者经常用到几个控件组合在一起来使用.这个时候,我们就可以根据自己的需求创建自定义的控件了,一般通过继承View或其子类来实现. ...

  2. 014 Android 自定义组合控件

    1.需求介绍 将已经编写好的布局文件,抽取到一个类中去做管理,下次还需要使用类似布局时,直接使用该组合控件的对象. 优点:可复用. 例如要重复利用以下布局: <RelativeLayout an ...

  3. Android自定义组合控件

    今天和大家分享下组合控件的使用.很多时候android自定义控件并不能满足需求,如何做呢?很多方法,可以自己绘制一个,可以通过继承基础控件来重写某些环节,当然也可以将控件组合成一个新控件,这也是最方便 ...

  4. Android自定义组合控件内子控件无法显示问题

    今天自定义了一个组合控件,与到了个奇葩问题: 我自定义了一个RelativeLayout,这个layout内有多个子控件.但奇怪的是这些子控件一直显示不出来.调试了一下午,竟然是因为在获取(infla ...

  5. (转)android自定义组合控件

    原文地址:http://mypyg.iteye.com/blog/968646 目标:实现textview和ImageButton组合,可以通过Xml设置自定义控件的属性. 1.控件布局:以Linea ...

  6. Android自定义组合控件:UIScrollLayout(支持界面滑动及左右菜单滑动)

    一.前言: 我之前很早的时候,写过一篇<左右滑出菜单>的文章: http://blog.csdn.net/qingye_love/article/details/8776650 用的是对V ...

  7. Android 自定义组合控件

    1, you need to add this kind of code to the constructors of your custom view which must extend ViewG ...

  8. Android View体系(十)自定义组合控件

    相关文章 Android View体系(一)视图坐标系 Android View体系(二)实现View滑动的六种方法 Android View体系(三)属性动画 Android View体系(四)从源 ...

  9. Android自定义控件之自定义组合控件

    前言: 前两篇介绍了自定义控件的基础原理Android自定义控件之基本原理(一).自定义属性Android自定义控件之自定义属性(二).今天重点介绍一下如何通过自定义组合控件来提高布局的复用,降低开发 ...

随机推荐

  1. Phonegap通过JS访问本地接口的两种方法

    Phonegap为跨设备的应用开发提供了一个解决方案.如果某个应用只有js和html,则可以通过Phonegap的在线build工具,编译出多个平台的app安装包.当然通过Phonegap提供的js可 ...

  2. 【linux】wc命令

    Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1.命令格式: wc [选项][文件] 2.命令参数: -c char统计字节数. ...

  3. 51nod1258 序列求和V4

    T(n) = n^k,S(n) = T(1) + T(2) + ...... T(n).给出n和k,求S(n).   例如k = 2,n = 5,S(n) = 1^2 + 2^2 + 3^2 + 4^ ...

  4. liveusb-creator

    liveusb-creator The liveusb-creator is a cross-platform tool for easily installing live operating sy ...

  5. 55. Jump Game

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  6. 浅谈Redis数据库的键值设计(转)

    丰富的数据结构使得redis的设计非常的有趣.不像关系型数据库那样,DEV和DBA需要深度沟通,review每行sql语句,也不像memcached那样,不需要DBA的参与.redis的DBA需要熟悉 ...

  7. (XAML)"XXXX" does not exist in the namespace "clr-

    Error 139 Assembly 'System.Activities.Core.Presentation' was not found. Verify that you are not miss ...

  8. solr环境搭建

    介绍摘自百度百科:Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过 ...

  9. SPOJ 694. Distinct Substrings (后缀数组不相同的子串的个数)转

    694. Distinct Substrings Problem code: DISUBSTR   Given a string, we need to find the total number o ...

  10. C# 中的事件含义介绍

    AutoSizeChanged 当 AutoSize 属性的值更改时发生.(从 ButtonBase 继承.)   BackColorChanged 当 BackColor 属性的值更改时发生.(从 ...