本項目來自菜鳥窩，有興趣者點擊http://www.cniao5.com/course/
項目已經做完，源碼地址。https://github.com/15829238397/CN5E-shop
仿京東商城系列0------項目簡介
仿京東商城系列1------fragmentTabHost實現底部導航欄
仿京東商城系列2------自定義toolbar
仿京東商城系列3------封裝Okhttp
仿京東商城系列4------輪播廣告條
仿京東商城系列5------商品推薦欄
仿京東商城系列6------下拉刷新上拉加載的商品列表
仿京東商城系列7------商品分類頁面
仿京東商城系列8------自定義的數量控制器
仿京東商城系列9------購物車數據存儲器實現
仿京東商城系列10------添加購物車，管理購物車功能實現
仿京東商城系列11------商品排序功能以及布局切換實現（Tablayout）
仿京東商城系列12------商品詳細信息展示（nativie與html交互）
仿京東商城系列13------商品分享（shareSDK）
仿京東商城系列14------用戶登錄以及app登錄攔截
仿京東長城系列15------用戶注冊，SMSSDK集成
仿京東商城系列16------支付SDK集成
仿京東商城系列17------支付功能實現
仿京東商城系列18------xml文件讀取（地址選擇器）
仿京東商城系列19------九宮格訂單展示
仿京東商城系列20------終章
前言
這篇文章，我們來介紹一個自定義toolbar（建造自己的輪子，才能跑得更快），廢話少說。上效果
toolbar
內容
1.建立自己的toolbar，首先你需要一個布局。老規矩先上代碼！
<?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="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar_view"
android:background="@color/red">
<!--定義一個TextView居中作為標題-->
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:textColor="@color/white"
android:id="@+id/tb_title"
android:text="測試數據"
android:textSize="20sp"
android:visibility="gone"
android:layout_centerVertical="true"
/>
<!--搜索框-->
<EditText
android:id="@+id/tb_Search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:layout_marginRight="30dp"
android:hint="請輸入搜索的商品"
android:textColorHint="@color/white"
android:textColor="@color/white"
android:drawableLeft="@android:drawable/ic_menu_search"
android:visibility="gone"
android:layout_centerVertical="true"
/>
<!--編輯按鈕-->
<Button
android:id="@+id/tb_right_button"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="center"
android:paddingRight="20dp"
android:textSize="15sp"
android:gravity="center_vertical|right"
android:textColor="@color/white"
android:text="編輯"
android:background="?attr/colorPrimary"
android:visibility="gone"
/>
<!--右邊圖片按鈕-->
<ImageButton
android:id="@+id/tb_right_imagebutton"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="center"
android:gravity="center_vertical|right"
android:textColor="@color/white"
android:background="?attr/colorPrimary"
android:src="@drawable/icon_grid_32"
android:paddingRight="10dp"
android:visibility="gone"
/>
<!--左邊圖片按鈕-->
<ImageButton
android:id="@+id/tb_left_ImageButton"
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_gravity="center"
android:paddingLeft="10dp"
android:background="?attr/colorPrimary"
android:layout_centerVertical="true"
android:src="@drawable/icon_back_32px"
android:visibility="gone"
/>
<!--下面兩個控件為頭像框和用戶名-->
<ImageView
android:paddingTop="20dp"
android:paddingBottom="5dp"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:visibility="gone"
android:id="@+id/tb_user_photo"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tb_user_name"
android:layout_centerHorizontal="false"
android:layout_below="@+id/tb_user_photo"
android:textColor="@color/white"
android:gravity="center_horizontal|center_vertical"
android:text="點擊登錄"
android:visibility="gone"
android:paddingBottom="10dp"/>
</RelativeLayout>
這里我采用了RelativeLayout布局，利用控件的android:visibility屬性控制控件的顯示和隱藏。以達到適應各種要求的目的.
2.建立自定義屬性 代碼代碼：
在value文件夾下，新建attrs文件。添加如下代碼。
<declare-styleable name="CnToolbar">
<attr name="rightButtonText" format="reference|string"/>
<attr name="leftButtonIcon" format="reference"/>
<attr name="rightImageButtonIcon" format="reference" />
<attr name="userPhotoIcon" format="reference"/>
<attr name="userName" format="reference|string"/>
<attr name="isShowSearchView" format="boolean"/>
</declare-styleable>
上述代碼定義了一些自定義屬性，這些屬性將會在后續得到使用。
3.自定義控件的建立以及自定義屬性的讀取
public class CnToolbar extends Toolbar {
private LayoutInflater inflater ;
private View mView ;
private TextView mTextTitle ;
private Button mRightButton ;
private ImageButton mLeftImageButton ;
private EditText mSearchView ;
private ImageButton mRightImageButton ;
private ImageView userPhoto ;
private TextView userName ;
private TintTypedArray b ;
public CnToolbar(Context context) {
this(context , null);
}
public CnToolbar(Context context, @Nullable AttributeSet attrs) {
this(context, attrs , 0);
}
public CnToolbar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
b = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
R.styleable.CnToolbar, defStyleAttr, 0);
initView() ;
if(getIsShowSearchView()){
showSearchView();
return;
}
setRightButton(attrs, defStyleAttr) ;
setLeftButton(attrs , defStyleAttr) ;
setRightImageButton(attrs ,defStyleAttr );
setUserName(attrs , defStyleAttr);
setUserPhoto(attrs , defStyleAttr);
b.recycle();
}
//將mview布局加入toolBar中
private void initView() {
if (mView == null) {
inflater = LayoutInflater.from(this.getContext());
mView = inflater.inflate(R.layout.cntoolbar_view, null);
mSearchView = (EditText) mView.findViewById(R.id.tb_Search_view);
mTextTitle = (TextView) mView.findViewById(R.id.tb_title);
mRightButton = (Button) mView.findViewById(R.id.tb_right_button);
mLeftImageButton = (ImageButton) mView.findViewById(R.id.tb_left_ImageButton) ;
mRightImageButton = (ImageButton) mView.findViewById(R.id.tb_right_imagebutton) ;
userPhoto = (ImageView) mView.findViewById(R.id.tb_user_photo) ;
userName = (TextView) mView.findViewById(R.id.tb_user_name) ;
mSearchView.setSelected(false);
mSearchView.setClickable(false);
LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
this.addView(mView, lp);
}
}
@Override
public void setTitle(@StringRes int resId) {
setTitle(getContext().getText(resId));
}
@Override
public void setTitle(CharSequence title) {
initView();
if(title != null){
if(mTextTitle == null){
mTextTitle = (TextView) mView.findViewById(R.id.tab_title);
}
mTextTitle.setText(title);
mTextTitle.setVisibility(VISIBLE);
mTextTitle.setSelected(false);
mTextTitle.setFocusable(false);
}
}
private void setUserName(@Nullable AttributeSet attrs, int defStyleAttr){
if(attrs != null){
final String rightIcon = b.getString( R.styleable.CnToolbar_userName );
if (rightIcon != null && rightIcon.length()>0) {
setUserNameText(rightIcon);
}
}
}
public void setUserNameText(String s){
userName.setText(s);
userName.setVisibility(VISIBLE);
userName.setEnabled(true);
}
private void setUserPhoto(@Nullable AttributeSet attrs, int defStyleAttr){
if(attrs != null){
final Drawable leftIcon = b.getDrawable(R.styleable.CnToolbar_userPhotoIcon);
if (leftIcon != null) {
setUserPhotoIcon(leftIcon);
}
}
}
public void setUserClickable(boolean enable){
userPhoto.setClickable(enable);
}
private void setUserPhotoIcon(Drawable drawable) {
if( drawable != null ){
userPhoto.setImageDrawable(drawable);
userPhoto.setVisibility(VISIBLE);
userPhoto.setEnabled(true);
}
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public void setUserPhotoIcon(Context context , String resId , int defResId){
if( resId != null && resId.length() > 0){
Glide.with(context).load(resId).transform(new GlideCircleTransform(context)).into(this.userPhoto);
}else {
setUserPhotoIcon(context , defResId) ;
}
userPhoto.setVisibility(VISIBLE);
userPhoto.setEnabled(true);
}
public void setUserPhotoIcon(Context context , int resId){
Glide.with(context).load(resId).transform(new GlideCircleTransform(context)).into(this.userPhoto);
userPhoto.setVisibility(VISIBLE);
userPhoto.setEnabled(true);
}
public void setUserPhotoClickListener (OnClickListener listener) {
userPhoto.setOnClickListener(listener);
}
public void setRightButton(@Nullable AttributeSet attrs, int defStyleAttr){
if(attrs != null){
final String rightIcon = b.getString( R.styleable.CnToolbar_rightButtonText );
if (rightIcon != null && rightIcon.length()>0) {
setRightButtonText(rightIcon);
}
}
}
public void setRightButtonText (String s) {
Log.d("----" , "----------------s---------------" + s) ;
mRightButton.setText(s);
mRightButton.setVisibility(VISIBLE);
mRightButton.setEnabled(true);
}
public void setRightButtonIcOnClickListener (OnClickListener listener) {
mRightButton.setOnClickListener(listener);
}
public void setLeftButton(@Nullable AttributeSet attrs, int defStyleAttr){
if(attrs != null){
final Drawable leftIcon = b.getDrawable(R.styleable.CnToolbar_leftButtonIcon);
if (leftIcon != null) {
setLeftButtonIcon(leftIcon);
}
}
}
public void setLeftButtonIcon (Drawable drawable) {
if( drawable != null ){
mLeftImageButton.setImageDrawable(drawable);
mLeftImageButton.setVisibility(VISIBLE);
userPhoto.setVisibility(GONE);
userName.setVisibility(GONE);
mLeftImageButton.setEnabled(true);
}
}
public void setLeftButtonIcOnClickListener (OnClickListener listener) {
mLeftImageButton.setOnClickListener(listener);
}
public void setRightImageButton(@Nullable AttributeSet attrs, int defStyleAttr){
if(attrs != null){
final Drawable rightImage = b.getDrawable(R.styleable.CnToolbar_rightImageButtonIcon);
if (rightImage != null) {
setRightButtonIcon(rightImage);
}
}
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public void setRightButtonIcon(int resId){
this.setRightButtonIcon(getResources().getDrawable(resId , null));
}
public void setRightButtonIcon (Drawable drawable) {
if( drawable != null ){
mRightImageButton.setImageDrawable(drawable);
mRightImageButton.setVisibility(VISIBLE);
mRightImageButton.setEnabled(true);
}
}
public void setRightImgeButtonIcOnClickListener (OnClickListener listener) {
mRightImageButton.setOnClickListener(listener);
}
public boolean getIsShowSearchView(){
final boolean isShowSearchView = b.getBoolean(R.styleable.CnToolbar_isShowSearchView , false) ;
return isShowSearchView ;
}
public void showSearchView(){
mRightButton.setVisibility(GONE);
mLeftImageButton.setVisibility(GONE);
mTextTitle.setVisibility(GONE);
mSearchView.setVisibility(VISIBLE);
}
public void notShowSearchView(){
mRightButton.setVisibility(VISIBLE);
mLeftImageButton.setVisibility(VISIBLE);
mTextTitle.setVisibility(VISIBLE);
mSearchView.setVisibility(GONE);
}
public void setSearchViewOnClicklistener( OnClickListener listener ){
mSearchView.setOnClickListener(listener);
}
}
代碼有些長。大概操作分為以下幾步：
- 繼承ToolBar類，重寫構造方法。
- 得到一個TintTypedArray 對象，通過b = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
R.styleable.CnToolbar, defStyleAttr, 0)獲得。其中R.styleable.CnToolbar為你自定義的類型。使用完后通過b.recycle()進行回收。 - 隨后可以獲得自定義的屬性值，對之前自定義的view進行數據填充和設置，設置完畢后。使用 this.addView(mView, lp);
將View添加入toolbar中。
使用自定義ToolBar
<com.example.cne_shop.widget.CnToolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:minWidth="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="分類"
android:titleTextColor="@color/white"
app:isShowSearchView="false"
></com.example.cne_shop.widget.CnToolbar>
注意，自定義屬性要使用app:引用。
