Android开发之标题栏的抽取

如果你使用过iPhone应该会知道，几乎每个iPhone应用的界面顶部都会有一个标题栏，很多界面的标题栏都很相似。如果在每个活动的界面都编写相同的代码，明显会导致代码的大量重复。这时我们用引入布局。

先上效果图：

1，先准备标题栏的布局all_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="#ff5000">    <TextView        android:id="@+id/tv_title_back"        android:layout_marginLeft="8dp"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerVertical="true"        android:textSize="20sp"        android:textColor="#fff"        android:drawableLeft="@drawable/tb_icon_actionbar_back"        android:text="返回"/>    <TextView        android:id="@+id/tv_title_name"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="购物车"        android:layout_centerInParent="true"        android:textColor="#fff"        android:textSize="22sp"/>    <ImageView        android:id="@+id/iv_title_edit"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentRight="true"        android:layout_centerVertical="true"        android:layout_marginRight="8dp"        android:src="@drawable/tb_icon_more_msg_56"/></RelativeLayout>

2,然后使用include我们去其它界面去使用这个标题栏如在main_activity.xml中；

<?xml version="1.0" encoding="utf-8"?><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="match_parent"    tools:context="com.gyq.uicustonviews.MainActivity">    **<include layout="@layout/all_title"/>**</RelativeLayout>

3，这样就避免多次写重复的标题栏代码，然而我们这个标题栏有返回或者其它按钮，我们就需要使用点击事件，同样如果这些标题栏都去写同样的代码，也是不合适的，怎么办呢？我们来使用自定义控件

1，创建自定义控件：

package com.gyq.uicustonviews.view;import android.app.Activity;import android.content.Context;import android.util.AttributeSet;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import android.widget.RelativeLayout;import android.widget.TextView;import android.widget.Toast;import com.gyq.uicustonviews.R;/** * ${DESC} * author: gyq * create at 2016/12/12 16:23 */public class TitleLayout extends RelativeLayout implements View.OnClickListener {    private TextView mTvBack,mTvName;    private ImageView mIvEdit;    public TitleLayout(Context context, AttributeSet attrs) {        super(context, attrs);        LayoutInflater.from(context).inflate(R.layout.all_title,this);        mTvBack = (TextView)findViewById(R.id.tv_title_back);        mTvName = (TextView)findViewById(R.id.tv_title_name);        mIvEdit = (ImageView)findViewById(R.id.iv_title_edit);        mTvBack.setOnClickListener(this);        mIvEdit.setOnClickListener(this);    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.tv_title_back :                ((Activity)getContext()).finish();                break;            case R.id.iv_title_edit :                Toast.makeText(getContext(),"you clicked edit button",Toast.LENGTH_SHORT).show();                 break;        }    }}

2,在MainActivity.class中编写隐藏标题栏的代码：

package com.gyq.uicustonviews;import android.support.v7.app.ActionBar;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //隐藏标题栏代码        ActionBar actionBar = getSupportActionBar();        if (actionBar != null) {            actionBar.hide();        }    }}

3，在main_activity.xml中使用：

<?xml version="1.0" encoding="utf-8"?><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="match_parent"    tools:context="com.gyq.uicustonviews.MainActivity">    <com.gyq.uicustonviews.view.TitleLayout        android:layout_width="match_parent"        android:layout_height="wrap_content">    </com.gyq.uicustonviews.view.TitleLayout></RelativeLayout>

这样就完成了代码的抽取，是不是简化了许多代码啊？呵呵 ，我记得之前写的那个项目，没有这么使用，直接copy了好多重复代码，非常不爽！今后遇到类似标题栏就知道怎么去抽取啦。