實作功能:
1)自定義View标題欄布局;
2)靈活的可以自己傳入類型,選擇所需要的控件來顯示隐藏
3)相對于我之前寫過的一篇,免繼承,可直接在布局裡使用
4)直接可以在布局控件裡設定屬性
老規矩,效果圖:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5SZwYmYwIjZkVWZxUDO0ITY1gDM0EjZwczYmFTO2kDOi9CX5d2bs92Yl1iclB3bsVmdlR2LcNWaw9CXt92Yu4GZjlGbh5yYjV3Lc9CX6MHc0RHaiojIsJye.png)
由效果圖可見,這個是可以根據傳入封裝好的變量來控制,比較靈活的
下面就來實作以下步驟
1.建立一個布局檔案,命名,layout_titlebar,來部署我們的标題欄樣式,可以自定義更改,圖檔檔案可暫時用自己的替代
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="50dp">
<ImageView
android:id="@+id/iv_back"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="20dp"
android:src="@drawable/icon_back"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="标題"
android:textColor="#000"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="更多"
android:textColor="#000"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/iv_more"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/icon_more"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
2.自定義View,繼承自RelativeLayout,第3步貼上attr檔案
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
/**
* @Author : 張
* @Email : [email protected]
* @Date : 2018/9/19
*
* 一個簡單的自定義标題欄
*/
public class CustomTitleBar extends RelativeLayout {
private ImageView ivBack;
private TextView tvTitle;
private TextView tvMore;
private ImageView ivMore;
public CustomTitleBar(Context context, AttributeSet attrs) {
super(context, attrs);
initView(context,attrs);
}
//初始化視圖
private void initView(final Context context, AttributeSet attributeSet) {
View inflate = LayoutInflater.from(context).inflate(R.layout.layout_titlebar, this);
ivBack = inflate.findViewById(R.id.iv_back);
tvTitle = inflate.findViewById(R.id.tv_title);
tvMore = inflate.findViewById(R.id.tv_more);
ivMore = inflate.findViewById(R.id.iv_more);
init(context,attributeSet);
}
//初始化資源檔案
public void init(Context context, AttributeSet attributeSet){
TypedArray typedArray = context.obtainStyledAttributes(attributeSet, R.styleable.CustomTitleBar);
String title = typedArray.getString(R.styleable.CustomTitleBar_title);//标題
int leftIcon = typedArray.getResourceId(R.styleable.CustomTitleBar_left_icon, R.drawable.icon_back);//左邊圖檔
int rightIcon = typedArray.getResourceId(R.styleable.CustomTitleBar_right_icon, R.drawable.icon_more);//右邊圖檔
String rightText = typedArray.getString(R.styleable.CustomTitleBar_right_text);//右邊文字
int titleBarType = typedArray.getInt(R.styleable.CustomTitleBar_titlebar_type, 10);//标題欄類型,預設為10
//指派進去我們的标題欄
tvTitle.setText(title);
ivBack.setImageResource(leftIcon);
tvMore.setText(rightText);
ivMore.setImageResource(rightIcon);
//可以傳入type值,可自定義判斷值
if(titleBarType == 10){//不傳入,預設為10,顯示更多 文字,隐藏更多圖示按鈕
ivMore.setVisibility(View.GONE);
tvMore.setVisibility(View.VISIBLE);
}else if(titleBarType == 11){//傳入11,顯示更多圖示按鈕,隐藏更多 文字
tvMore.setVisibility(View.GONE);
ivMore.setVisibility(View.VISIBLE);
}
}
//左邊圖檔點選事件
public void setLeftIconOnClickListener(OnClickListener l){
ivBack.setOnClickListener(l);
}
//右邊圖檔點選事件
public void setRightIconOnClickListener(OnClickListener l){
ivMore.setOnClickListener(l);
}
//右邊文字點選事件
public void setRightTextOnClickListener(OnClickListener l){
tvMore.setOnClickListener(l);
}
}
3.在res下的values下建立attr檔案
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomTitleBar">
<attr name="title" format="string"/>
<attr name="left_icon" format="reference"/>
<attr name="right_icon" format="reference"/>
<attr name="right_text" format="string"/>
<attr name="titlebar_type" format="integer"/>
</declare-styleable>
</resources>
String是文字類型,references是圖檔類型,integer是數字類型
4.需要用到我們的這個頂部标題欄的話,就在目前布局引入
可以根據type傳入的值來改變右邊顯示文字還是圖檔,可在自定義View自定義該type值
<com.titlebar.CustomTitleBar
android:id="@+id/titlebar"
android:background="#DCDCDC"
app:right_icon="@drawable/icon_more"
app:right_text="更多"
app:titlebar_type="11"
app:left_icon="@drawable/icon_back"
app:title="我是标題"
android:layout_width="match_parent"
android:layout_height="wrap_content"></com.titlebar.CustomTitleBar>
5.可以擷取它的id,來調用它的點選事件
CustomTitleBar titleBar = findViewById(R.id.titlebar);
titleBar.setLeftIconOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "左邊", Toast.LENGTH_SHORT).show();
}
});
6.就這麼多了,在這裡貼上源碼,小夥伴可以試試