android 自定义组合控件 顶部导航栏

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

例下图：

点击：

如不设置左边，右边图片：

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

步骤一：

导航栏包括:
* 返回按钮
* 标题
* 右侧按钮(功能不确定)

首先是布局文件,如下:

  1. </pre><p></p><pre name="code" class="java"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="wrap_content"
  5. android:background="@android:color/holo_blue_light"
  6. tools:context=".MainActivity" >
  7. <TextView
  8. android:id="@+id/text_title"
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:layout_centerHorizontal="true"
  12. android:layout_centerVertical="true"
  13. android:textSize="25sp"
  14. android:gravity="center"
  15. android:textColor="@android:color/white"
  16. android:padding="2dp"
  17. />
  18. <ImageView
  19. android:id="@+id/back_image"
  20. android:layout_width="40dp"
  21. android:layout_height="40dp"
  22. android:scaleType="centerInside"
  23. android:layout_alignParentLeft="true"
  24. android:layout_centerVertical="true"
  25. android:layout_marginLeft="12dp"
  26. />
  27. <ImageView
  28. android:id="@+id/right_image"
  29. android:layout_width="40dp"
  30. android:layout_height="40dp"
  31. android:scaleType="centerInside"
  32. android:layout_alignParentRight="true"
  33. android:layout_centerVertical="true"
  34. android:layout_marginRight="12dp"
  35. />
  36. </RelativeLayout>

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3. <declare-styleable name="Topbar">
  4. <attr name="titleText" format="string|reference" />
  5. <attr name="titleSize" format="dimension|reference" />
  6. <attr name="titleColor" format="color|reference" />
  7. <attr name="leftBtn" format="reference"/>
  8. <attr name="rightBtn" format=" reference"/>
  9. </declare-styleable>
  10. </resources>

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

  1. private ImageView backView;
  2. private ImageView rightView;
  3. private TextView titleView;
  4. private String titleTextStr;
  5. private int titleTextSize ;
  6. private int  titleTextColor ;
  7. private Drawable leftImage ;
  8. private Drawable rightImage ;
  9. public TopBarView(Context context){
  10. this(context, null);
  11. }
  12. public TopBarView(Context context, AttributeSet attrs) {
  13. this(context, attrs,R.style.AppTheme);
  14. }
  15. public TopBarView(Context context, AttributeSet attrs, int defStyle) {
  16. super(context, attrs, defStyle);
  17. getConfig(context, attrs);
  18. initView(context);
  19. }
  20. /**
  21. * 从xml中获取配置信息
  22. */
  23. private void getConfig(Context context, AttributeSet attrs) {
  24. //TypedArray是一个数组容器用于存放属性值
  25. TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.Topbar);
  26. int count = ta.getIndexCount();
  27. for(int i = 0;i<count;i++)
  28. {
  29. int attr = ta.getIndex(i);
  30. switch (attr)
  31. {
  32. case R.styleable.Topbar_titleText:
  33. titleTextStr = ta.getString(R.styleable.Topbar_titleText);
  34. break;
  35. case R.styleable.Topbar_titleColor:
  36. // 默认颜色设置为黑色
  37. titleTextColor = ta.getColor(attr, Color.BLACK);
  38. break;
  39. case R.styleable.Topbar_titleSize:
  40. // 默认设置为16sp，TypeValue也可以把sp转化为px
  41. titleTextSize = ta.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
  42. TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
  43. break;
  44. case R.styleable.Topbar_leftBtn:
  45. leftImage = ta.getDrawable(R.styleable.Topbar_leftBtn);
  46. break;
  47. case R.styleable.Topbar_rightBtn:
  48. rightImage = ta.getDrawable(R.styleable.Topbar_rightBtn);
  49. break;
  50. }
  51. }
  52. //用完务必回收容器
  53. ta.recycle();
  54. }
  55. private void initView(Context context)
  56. {
  57. View layout = LayoutInflater.from(context).inflate(R.layout.custom_groupwidget,
  58. this,true);
  59. backView = (ImageView) layout.findViewById(R.id.back_image);
  60. titleView = (TextView) layout.findViewById(R.id.text_title);
  61. rightView = (ImageView) layout.findViewById(R.id.right_image);
  62. backView.setOnClickListener(this);
  63. rightView.setOnClickListener(this);
  64. if(null != leftImage)
  65. backView.setImageDrawable(leftImage);
  66. if(null != rightImage)
  67. rightView.setImageDrawable(rightImage);
  68. if(null != titleTextStr)
  69. {
  70. titleView.setText(titleTextStr);
  71. titleView.setTextSize(titleTextSize);
  72. titleView.setTextColor(titleTextColor);
  73. }
  74. }

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

  1. private onTitleBarClickListener onMyClickListener;
  2. /**
  3. * 设置按钮点击监听接口
  4. * @param callback
  5. */
  6. public void setClickListener(onTitleBarClickListener listener) {
  7. this.onMyClickListener = listener;
  8. }
  9. /**
  10. * 导航栏点击监听接口
  11. */
  12. public static interface onTitleBarClickListener{
  13. /**
  14. * 点击返回按钮回调
  15. */
  16. void onBackClick();
  17. void onRightClick();
  18. }
  19. @Override
  20. public void onClick(View v) {
  21. int id = v.getId();
  22. switch(id)
  23. {
  24. case R.id.back_image:
  25. if(null != onMyClickListener)
  26. onMyClickListener.onBackClick();
  27. break;
  28. case R.id.right_image:
  29. if(null != onMyClickListener)
  30. onMyClickListener.onRightClick();
  31. break;
  32. }
  33. }

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

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. xmlns:custom="http://schemas.android.com/apk/res/com.example.customgroupwidget"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. tools:context=".MainActivity" >
  7. <com.example.customgroupwidget.TopBarView
  8. android:id="@+id/topbar"
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. custom:titleText="我的消息"
  12. custom:titleSize="15sp"
  13. custom:titleColor="@android:color/white"
  14. custom:leftBtn="@drawable/back_page"
  15. custom:rightBtn="@drawable/edit_normal" />
  16. </RelativeLayout>

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

  1. public class MainActivity extends Activity implements onTitleBarClickListener {
  2. private  TopBarView topbar;
  3. @Override
  4. protected void onCreate(Bundle savedInstanceState) {
  5. super.onCreate(savedInstanceState);
  6. setContentView(R.layout.activity_main);
  7. topbar = (TopBarView)findViewById(R.id.topbar);
  8. topbar.setClickListener(this);
  9. }
  10. @Override
  11. public void onBackClick() {
  12. Toast.makeText(MainActivity.this, "你点击了左侧按钮", Toast.LENGTH_LONG).show();
  13. }
  14. @Override
  15. public void onRightClick() {
  16. Toast.makeText(MainActivity.this, "你点击了右侧按钮", Toast.LENGTH_SHORT).show();
  17. }
  18. }

 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"

/>

时间： 2024-12-20 01:18:02

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

Android 自定义组合控件 简单导航栏

最近在做项目的过程中,发现项目中好多界面的导航栏都很类似或者一样,但是每次都要重复写同样的代码,觉得很不爽,所以就简单地自定义了一下导航栏控件. 先上图: 导航栏包括: 返回按钮 标题 右侧按钮(功能不确定) 首先是布局文件,如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res

Android 自定义组合控件小结

引言 接触Android UI开发的这段时间以来,对自定义组合控件有了一定的了解,为此小结一下,本文小结内容主要讨论的是如何使用Android SDK提供的布局和控件组成一个功能完整组合控件并将其封装为面向对象的类,而并非讨论如何继承自SDK提供的控件类(比如TextView),对其进行自定义扩展的问题. 进入正题前,我们先来看一组功能需求 假设在手机需求上,那么如上三个界面我们可以使用三个Activity,每个Activity一个布局文件,实现起来比较独立,但是假设在Android pad上要

Android自定义组合控件--底部多按钮切换

效果图: 现在市场上大多数软件都是类似于上面的结构,底部有几个按钮用于切换到不同的界面.基于OOP思想,我想把下面的一整块布局封装成一个类,也就是我们的自定义组合控件-底部多按钮切换布局,我把它叫做BottomLayout 看上面的布局,几个按钮横向排列,我们先看一下布局 最外面LinearLayout 方向 horizontal,然后5个weight相同的RelativeLayout,每个RelativeLayout里面有一个Button(用了显示选中状态)个ImageView(用来显示红点)

android 自定义组合控件

自定义控件是一些android程序员感觉很难攻破的难点,起码对我来说是这样的,但是我们可以在网上找一些好的博客关于自定义控件好好拿过来学习研究下,多练,多写点也能找到感觉,把一些原理弄懂,今天就讲下自定义组合控件,这个特别适合在标题栏或者设置界面,看下面图: 就非常适合使用组合控件了,现在写一个玩玩: activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

Android自定义组合控件--图片加文字，类似视频播放软件的列表

分四步来写: 1,组合控件的xml; 2,自定义组合控件的属性; 3,自定义继承组合布局的class类,实现带两参数的构造器; 4,在xml中展示组合控件. 具体实现过程: 一.组合控件的xml 我接触的有两种方式,一种是普通的Activity的xml:一种是父节点为merge的xml.我项目中用的是第一种,但个人感觉第二种好,因为第一种多了相对或者绝对布局层. 我写的 custom_pictext.xml <?xml version="1.0" encoding="u

Android自定义组合控件的实现

需求:在黑马做安全卫士的时候,功能9设置中心界面如下: 在点击item的时候,复选框会反转状态,同时"自动更新已经关闭"会变换内容和颜色. 可以发现这个界面类似ListView,但又不是ListView,因为它的item数量是固定的,且最后一 item和之前的都不一样.虽然这个看着像是标准的List结构,实则每个item不是完全一样,因为 每个item的提示文本(如"自动更新已经关闭")的内容并不完全一样. 假如用一般方式来布局的话,4个item就会有3*4 = 1

Android自定义组合控件---教你如何自定义下拉刷新和左滑删除

绪论 最近项目里面用到了下拉刷新和左滑删除,网上找了找并没有可以用的,有比较好的左滑删除,但是并没有和下拉刷新上拉加载结合到一起,要不就是一些比较水的结合,并不能在项目里面使用,小编一着急自己组合了一个,做完了和QQ的对比了一下,并没有太大区别,今天分享给大家,其实并不难,但是不知道为什么网上没有比较好的Demo,当你的项目真的很急的时候,又没有比较好的Demo,那么"那条友谊的小船儿真是说翻就翻啊",好了,下面先来具体看一下实现后的效果吧: 代码已经上传到Github上了,小伙伴们记

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

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

Android自定义组合控件

今天和大家分享下组合控件的使用.很多时候android自定义控件并不能满足需求,如何做呢?很多方法,可以自己绘制一个,可以通过继承基础控件来重写某些环节,当然也可以将控件组合成一个新控件,这也是最方便的一个方法.今天就来介绍下如何使用组合控件,将通过两个实例来介绍.第一个实现一个带图片和文字的按钮,如图所示: 整个过程可以分四步走.第一步,定义一个layout,实现按钮内部的布局.代码如下: <?xml version="1.0" encoding="utf-8&quo