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

Posted 2020-07-31 lenkevin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了android 自定义组合控件顶部导航栏相关的知识，希望对你有一定的参考价值。

在软件开发过程中，经常见到，就是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 = "名称">

</declare-styleable>

（2）属性使用：

<ImageView

                     android:layout_width = "42dip"
                     android:layout_height = "42dip"
                     android:background = "@drawable/图片ID"

2. color：颜色值。

（1）属性定义：

<declare-styleable name = "名称">

</declare-styleable>

（2）属性使用：

<TextView

                     android:layout_width = "42dip"
                     android:layout_height = "42dip"
                     android:textColor = "#00FF00"

3. boolean：布尔值。

（1）属性定义：

<declare-styleable name = "名称">

</declare-styleable>

（2）属性使用：

<Button

android:layout_width = "42dip"
android:layout_height = "42dip"

android:focusable = "true"

4. dimension：尺寸值。

（1）属性定义：

<declare-styleable name = "名称">

</declare-styleable>

（2）属性使用：

<Button

android:layout_width = "42dip"
android:layout_height = "42dip"

5. float：浮点值。

（1）属性定义：

<declare-styleable name = "AlphaAnimation">

</declare-styleable>

（2）属性使用：

            <alpha
                   android:fromAlpha = "1.0"
                   android:toAlpha = "0.7"

6. integer：整型值。

（1）属性定义：

<declare-styleable name = "AnimatedRotateDrawable">

</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 = "名称">

</declare-styleable>

（2）属性使用：

<ImageView

                     android:layout_width = "42dip"
                     android:layout_height = "42dip"
                     android:background = "@drawable/图片ID|#00FF00"

以上是关于android 自定义组合控件顶部导航栏的主要内容，如果未能解决你的问题，请参考以下文章

Android自定义View的三种实现方式

《移动项目实践》实验报告——Android组合控件

Android 自定义View 三板斧之一——组合现有控件

上位机学习记录组合控件的应用（控件堆叠+重置）与UI导航栏的编写

Android 手机卫士--自定义组合控件构件布局结构

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

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