Android--通用标题栏之组合控件

前言：

在日常开发Andorid应用当中，一个App是离不开标题栏的，一般标题栏都是处于我们App的页面顶部上面，在App中加入标题栏的目的是为了用户更好的体验而设计的。然而这个标题栏大概是由三个控件组成的，分别有：返回上一页按钮、标题文本、以及标题栏右边的提交按钮或者查询按钮。那么，你可能会发现一个App当中却总是很多标题栏的，如果我们每次在Activity页面布局当中去写一个标题栏，那么这样确实是很麻烦的，你也会发现代码量其实是很多的，为了避免这种麻烦，我们可以打造一个通用的App标题栏，从而减去开发时间，在这里，为了要打造一个通用的标题栏，所以我采用了组合控件，那么下面我们一起来学习吧！

1、组合控件

组合控件的意思就是，我们并不需要自己去绘制视图上显示的内容，而只是用系统原生的控件就好了，但我们可以将几个系统原生的控件组合到一起，这样创建出的控件就被称为组合控件。而我们想要实现通用的标题栏控件就可以采用组合控件去实现。那么下面我们一起来看看是怎样实现的。

新建一个my_title.xml文件，代码如下所示:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#ffcb05" >

    <ImageView
        android:id="@+id/button_left"
        android:layout_width="30dp"
        android:layout_height="25dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:background="@drawable/return_left"
        android:textColor="#fff" />

    <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="首页"
        android:textColor="#fff"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/button_right"
        android:layout_width="22dp"
        android:layout_height="25dp"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_centerVertical="true"
        android:background="@drawable/search_top_right"
        android:textColor="#fff" />

</RelativeLayout>

在这个布局中，我们首先分别定义了一个返回按钮控件，TextView文本控件、以及右边查询按钮控件。然后让这个标题栏的高度根布局RelativeLayout固定为50dp。现在组合控件写好了，那么接下来要把这个组合控件封装起来，打造通用的标题栏，所以我们创建一个自定义MyTitleView去继承FramaLayout。然后把组合控件封装到MyTitleView中。

创建名为:MyTitleView文件，代码如下:

public class MyTitleView extends FrameLayout {  
    private ImageView return_iv;    //返回按钮  
    private TextView title_tv;      //标题名称  
    private ImageView query_iv;     //查询按钮  
  
    public MyTitleView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        //在构造方法中加载我们组合控件布局,以及去查找我们控件的id  
        LayoutInflater.from(context).inflate(R.layout.my_title, this);  
        return_iv = (ImageView) findViewById(R.id.return_iv);  
        title_tv = (TextView) findViewById(R.id.title_tv);  
        query_iv = (ImageView) findViewById(R.id.query_iv);  
        //当我们点击返回的时候，关闭当前页面  
        return_iv.setOnClickListener(new OnClickListener() {  
            @Override  
            public void onClick(View v) {  
                ((Activity) getContext()).finish();  
            }  
        });  
    }  
  
    //返回按钮点击事件构造方法  
    public void setReturnListener(OnClickListener l) {  
        return_iv.setOnClickListener(l);  
    }  
  
  
    //设置标题名称文本构造方法  
    public void setTitleText(String text) {  
        title_tv.setText(text);  
    }  
  
    //设置标题名称字体大小构造方法  
    public void setTitleTextSize(int textsize) {  
        title_tv.setTextSize(textsize);  
    }  
  
    //设置查询按钮隐藏构造方法 因为有时候页面没有查询按钮，那么我们可以把它隐藏起来  
    public boolean setQuertVisibility(boolean isVisibility) {  
        if (isVisibility == true) {  
            query_iv.setVisibility(GONE);  
        } else {  
            query_iv.setVisibility(VISIBLE);  
        }  
        return isVisibility;  
    }  
}
}

在这个MyTitleView当中，其实没什么的，主要就是把我们组合控件布局里面加载进去，并且把他们控件取出来，作为下面那些构造方法的对象，有了这些常用的构造方法，以后我们就能在其他Activity页面当前随意的调用了并且设置字体大小，返回事件，文本等等....我们只需要在其他Activity当中去创建我们的 MyTitleView 之后，通过 MyTitleView 对象之后就能调用了，这样一来也方便许多...有关如何调用，下面我们再具体介绍....

到了这里，一个自定义的MyTitleView通用标题栏也就完成了，那么在其他Activity页面当中，如何使用呢？其实是非常容易的，首先创建一个名为:home_activity.xml,具体代码如下:

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical">  
  
    <com.soft0754.view.MyTitleView  
        android:id="@+id/title_view"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content">  
    </com.soft0754.view.TitleView>  
  
</LinearLayout>

在这里 其实就是把我们封装好的自定义MyTitleView放进去当做这个Activity的标题栏。

布局好了，那么接来下再创建我们的HomeActivity，具体代码如下:

public class HomeActivity extends AppCompatActivity{  
  
    private MyTitleView title_view;  
  
    @Override  
    protected void onCreate(@Nullable Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.home_activity);  
        title_view= (MyTitleView) findViewById(R.id.title_view);  
    }  
}

在HomeActivity当中，只是通过一个Activity去加载我们布局的内容，下面我们先运行起来看看效果

效果确实还可以，但是大家可能已经发现上面多了一个ActionBar标题栏，确实如此，不过没关系，我们在清单文件中application下面的theme主题样式里面把ActionBar标题栏清掉就可以了，具体代码如下:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

</resources>

取消ActionBar代码：

 <item name="windowActionBar">false</item>
 <item name="windowNoTitle">true</item>

取消ActionBar之后下面我们再运行看看效果图:

好了， 效果已经达到我们的预期了，那么现在运行好了之后，我们点击一下标题栏中左边的返回按钮，就可以关闭当前的Activity了，

如果我们想修改标题栏中的字体大小，或者修改返回按钮为其他监听事件，那么我们只需要在Activity当中findViewById获得MyTitleView对象实例，

然后通过这个对象就可以去设置字体大小，返回事件等等了，具体可看看下面案例，下面我将分别修改字体、修改字体大小，返回监听事件。以及隐藏查询按钮等等

那么下面代码如下:

public class HomeActivity extends AppCompatActivity{

    private MyTitleView title_view;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.home_activity);
        title_view= (MyTitleView) findViewById(R.id.title_view);
        title_view.setTitleText("修改后的标题");//修改字体文本
        title_view.setTitleTextSize(20);	//修改字体大小
        title_view.setQuertVisibility(true);	//隐藏查询控件
        title_view.setReturnListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MyTitleActivity.this,"return",Toast.LENGTH_SHORT).show();
            }
        });
      
    }
}
代码写好了之后，那么让我们一起看看效果图！

没错，确实修改了字体大小，文本，隐藏了查询按钮，并且设置了返回监听事件等等..

好了，今天有关通用标题栏之组合控件讲解到这里，希望对大家日常开发中有所帮助！