android 仿京东toolbar,仿京东商城系列2------自定义toolbar

最新推荐文章于 2022-12-08 00:04:32 发布

蓬岸 Dr.Quest

最新推荐文章于 2022-12-08 00:04:32 发布

阅读量94

点赞数

文章标签： android 仿京东toolbar

本文介绍了如何创建自定义的Android Toolbar，包括布局设计、自定义属性、控件显示与隐藏的实现。通过在value文件夹下新建attrs.xml添加自定义属性，然后在自定义Toolbar类中读取这些属性并初始化视图。最后展示了如何在XML中使用自定义Toolbar，并指出在不设置右按钮时，Toolbar长度会随内容变化的问题。

摘要由CSDN通过智能技术生成

前言

这篇文章，我们来介绍一个自定义toolbar(建造自己的轮子，才能跑得更快)，废话少说。上效果

51876c002e21

toolbar

内容

1.建立自己的toolbar，首先你需要一个布局。老规矩先上代码！

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">

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"

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"

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"

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"

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"

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"/>

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布局，利用控件的android:visibility属性控制控件的显示和隐藏。以达到适应各种要求的目的.

2.建立自定义属性代码代码：

在value文件夹下，新建attrs文件。添加如下代码。

上述代码定义了一些自定义属性，这些属性将会在后续得到使用。

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

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"

注意，自定义属性要使用app:引用。

求助：

我在使用时，会遇到toolbar在不设置右按钮，不显示操作框时，显示长度会跟随下方text框的内容长度。求大神解答。

蓬岸 Dr.Quest

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android 仿京东toolbar,仿京东商城系列2------自定义toolbar

前言这篇文章，我们来介绍一个自定义toolbar(建造自己的轮子，才能跑得更快)，废话少说。上效果toolbar内容1.建立自己的toolbar，首先你需要一个布局。老规矩先上代码！android:layout_width="match_parent"android:layout_height="wrap_content"xmlns:app="http://schemas.android.com/...
复制链接

扫一扫