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了好多重复代码，非常不爽！今后遇到类似标题栏就知道怎么去抽取啦。