美文网首页
商城开发之自定义头部TabHost和底部ToolBar

商城开发之自定义头部TabHost和底部ToolBar

作者: 沿路旅程如歌蜕变 | 来源:发表于2017-05-04 14:20 被阅读174次

    先附上效果图

    ezgif-3-8ac43fbfea.gif
    • 底部导航栏

    以前用过LinearLayout+Fragment和TabHost+Activity,感觉用起来很麻烦,正好学习到FragmentTabHost+Fragment,就拿来活学活用,还真提莫好用

    官方v4包中的FragmentTabHost会导致Fragment不重用,每次选择tab后都会重建一个,所以在网上找了个优化了的 FragmentTabHost

    1.主布局文件

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 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="match_parent"
        android:orientation="vertical"
        tools:context="chong.myshop.MainActivity">
    
        <!--<chong.myshop.view.MyToolBar-->
        <!--android:id="@+id/toolbar"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:background="?attr/colorPrimary"-->
        <!--android:minHeight="?actionBarSize"-->
        <!--app:leftButtonIcon="@drawable/icon_back_32px"-->
        <!--app:showSearchView="true"-->
        <!--app:myTitle="首页"-->
        <!--/>-->
    
        <FrameLayout
            android:id="@+id/realtabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@color/bg_color" />
    
        <chong.myshop.view.FragmentTabHost
            android:id="@+id/tabhost"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white">
    
            <FrameLayout
                android:id="@+id/tabcontent"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="0" />
    
        </chong.myshop.view.FragmentTabHost>
    </LinearLayout>
    
    

    其中realtabcontent是要绑定显示Fragment的
    而写法怪怪的tabcontent是官方要求

    2.新建一个Tab的bean类,其中包含title,icon,fragment属性并调出setter和getter方法(as快捷键是Alt+Insert),new出五个tab然后放入Tabs数组(下面有几个tab就new几个)

    package chong.myshop.bean;
    
    /**
     * Created by chong on 2017/5/3.
     */
    
    public class Tab {
        private int title;
        private int icon;
        private Class fragment;
    
        public Tab (int title,int icon,Class fragment){
            this.fragment=fragment;
            this.title=title;
            this.icon=icon;
        }
    
        public int getTitle() {
            return title;
        }
    
        public void setTitle(int title) {
            this.title = title;
        }
    
        public int getIcon() {
            return icon;
        }
    
        public void setIcon(int icon) {
            this.icon = icon;
        }
    
        public Class getFragment() {
            return fragment;
        }
    
        public void setFragment(Class fragment) {
            this.fragment = fragment;
        }
    }
    
    //新建
    Tab home=new Tab(R.string.home,R.drawable.selector_icon_home, HomeFragment.class);
    Tab hot=new Tab(R.string.hot,R.drawable.selector_icon_hot, HotFragment.class);
    Tab category=new Tab(R.string.category,R.drawable.selector_icon_category, CategoryFragment.class);
    Tab cart=new Tab(R.string.cart,R.drawable.selector_icon_cart, CartFragment.class);
    Tab mine=new Tab(R.string.mine,R.drawable.selector_icon_mine, MineFragment.class);
    

    其中第二个参数为R.drawable.selector_icon_home,
    因为tab中的图标也有几种状态,所以我们得再drawable里面新建五个selector来实现不同状态下的不同图片.五个Fragment目前只是背景颜色不一样.

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!--没有焦点-->
        <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_cart" />
        <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_cartfill_press" />
        <!--有焦点-->
        <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_cartfill_press" />
        <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_cartfill_press" />
        <!--按下-->
        <item android:state_selected="true" android:state_pressed="true" android:drawable="@mipmap/icon_cartfill_press" />
        <item android:state_pressed="true" android:drawable="@mipmap/icon_cartfill_press" />
    </selector>
    
    //放入数组
    private List<Tab> tabs =new ArrayList<>(5);
    tabs.add(home);
    tabs.add(hot);
     tabs.add(category);
     tabs.add(cart);
     tabs.add(mine);
    

    3.新建5个TabSpec,并且设置好它的Indicator,再把五个TabSpec放到TabHost中

     myFragmentTabHost.setup(context,getSupportFragmentManager(),R.id.realtabcontent);
      for (Tab tab:tabs){
                TabHost.TabSpec tabSpec=myFragmentTabHost.newTabSpec(getString(tab.getTitle()));
                View view=mInflater.inflate(R.layout.tab_indicator,null);
                TextView title= (TextView) view.findViewById(R.id.tab_title);
                ImageView icon= (ImageView) view.findViewById(R.id.tab_icon);
                title.setText(tab.getTitle());
                icon.setBackgroundResource(tab.getIcon());
                tabSpec.setIndicator(view);
                myFragmentTabHost.addTab(tabSpec,tab.getFragment(),null);
            }
    
    

    别忘了

    //设置第一页
    myFragmentTabHost.setCurrentTab(0);
    

    其中tab_indicator.xml代码就是一个图片下面一个文字

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="3dp"
        android:paddingTop="3dp"
        android:gravity="center"
        android:layout_gravity="center">
    
        <ImageView
            android:id="@+id/tab_icon"
            android:layout_marginTop="5dp"
            android:layout_width="20dp"
            android:layout_height="20dp" />
    
        <TextView
            android:id="@+id/tab_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:textColor="@color/selector_tab_text"
            />
    
    </LinearLayout>
    

    注意的是TextView的颜色得根据各种点击状态来改变,所以在color设置了selector ,具体操作就是在res文件目录下新建color文件夹,再新建selector_tab_text.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_selected="true" android:color="#eb4f38" />
        <item android:state_active="true" android:color="#eb4f38"/>
        <item android:state_selected="false" android:color="#a9b7b7" />
        <item android:state_active="false" android:color="#a9b7b7"/>
    </selector>
    
    

    到这里底部导航栏基本已经完成,来看看效果

    ezgif-3-dbb36fb5b7.gif
    • 接下来写头部ToolBar

    我们的效果是头部的标题和搜索框能随时切换,而原生的ToolBar是没有搜索框的,所以我们只能自定义一个

    先在layout中写toolbar.xml样式,由于左边和右边都有一个ImageView,而中间是一个EditiView和TextView相互切换,所以我们只要使用相对布局,而EditView和TextView互相隐藏和显示的就行了

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:paddingRight="10dp"
        android:paddingLeft="10dp">
    
        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            style="@style/Base.Widget.AppCompat.Toolbar.Button.Navigation"
            android:id="@+id/toolbar_left_image"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            />
    
        <ImageView
            style="@style/Base.Widget.AppCompat.Toolbar.Button.Navigation"
            android:id="@+id/toolbar_right_image"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            />
    
        <EditText
            android:background="@color/brown"
            android:paddingBottom="5dp"
            android:paddingTop="5dp"
            android:id="@+id/toolbar_searchview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入搜索内容"
            android:textSize="15sp"
            android:gravity="center"
            android:drawableLeft="@mipmap/icon_search"
            android:layout_toRightOf="@+id/toolbar_left_image"
            android:layout_toLeftOf="@+id/toolbar_right_image"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="10dp"
            style="@style/search_view"
    
            />
    
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_toRightOf="@+id/toolbar_left_image"
            android:layout_toLeftOf="@+id/toolbar_right_image"
            android:gravity="center"
            android:textColor="@color/white"
            android:textSize="20sp"
    
            />
    </RelativeLayout>
    

    其中EditView的style如下

     <style name="search_view">
            <item name="android:textSize">18sp</item>
            <item name="android:textColor">@color/white</item>
            <item name="android:textColorHint">@color/white</item>
            <item name="android:background">@drawable/selector_search_view</item>
            <item name="android:paddingTop">6dp</item>
            <item name="android:paddingBottom">6dp</item>
            <item name="android:paddingLeft">4dp</item>
            <item name="android:singleLine">true</item>
        </style>
    

    而EditView也有不同状态下的监听,所以在background我们引入了@drawable/selector_search_view

    <?xml version="1.0" encoding="utf-8"?>
    
        <selector
            xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:state_enabled="false" >
                <shape android:shape="rectangle">
                    <corners android:radius="8dp" />
                    <solid android:color="#eb4f38" />
                </shape>
            </item>
            <item android:state_pressed="true">
                <shape android:shape="rectangle">
                    <corners android:radius="8dp" />
                    <solid android:color="#eb4f38" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <corners android:radius="8dp" />
                    <solid android:color="#D82917" />
                </shape>
            </item>
        </selector>
    
    

    接下来写MyToolBar类

    • 新建并继承ToolBar
    • 三个构造方法中我们要让它无论如何都是调用的第三个(也就是三个参数那个)方法,只需要
    public MyToolBar(Context context) {
            this(context, null, 0);
        }
    
        public MyToolBar(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public MyToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
    }
    
    • 基本思路就是把toolbar.xml利用原生的addView方法加到MyToolbar
      然后增加自定义属性,values中新建attrrs.xml
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <declare-styleable name="MyToolBar">
            <attr name="showSearchView" format="boolean"/>
            <attr name="leftButtonIcon" format="reference"/>
            <attr name="rightButtonIcon" format="reference"/>
            <attr name="myTitle" format="string"/>
        </declare-styleable>
    </resources>
    

    然后在构造方法中用TypedArray拿到attrs中的属性,
    在封装不同状态的各个控件的隐藏与否
    最后给各个控件增加监听,代码很简单,就直接贴上

    package chong.myshop.view;
    import android.content.Context;
    import android.content.res.TypedArray;
    import android.graphics.drawable.Drawable;
    import android.os.Build;
    import android.support.annotation.RequiresApi;
    import android.util.AttributeSet;
    import android.util.Log;
    import android.view.Gravity;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.EditText;
    import android.widget.ImageView;
    import android.widget.TextView;
    import android.widget.Toolbar;
    import chong.myshop.R;
    
    /**
     * Created by chong on 2017/5/3.
     */
    
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public class MyToolBar extends Toolbar {
    
        private TextView toolbar_title;
        private EditText toolbar_searchview;
        private ImageView toolbar_leftButton;
        private ImageView toolbar_rightButton;
        private View myView;
        private boolean showSearchView;
        private Drawable left_button_icon;
        private Drawable right_button_icon;
        private String title;
    
    
        public MyToolBar(Context context) {
            this(context, null, 0);
        }
    
        public MyToolBar(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public MyToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
    
    
            final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.MyToolBar,
                    defStyleAttr, 0);
    
            showSearchView = a.getBoolean(R.styleable.MyToolBar_showSearchView, false);
            left_button_icon = a.getDrawable(R.styleable.MyToolBar_leftButtonIcon);
            right_button_icon = a.getDrawable(R.styleable.MyToolBar_rightButtonIcon);
            title = a.getString(R.styleable.MyToolBar_myTitle);
    
            a.recycle();
    
            iniView();
    
    
        }
    
    
        private void iniView() {
            if (myView == null) {
                myView = View.inflate(getContext(), R.layout.toolbar, null);
    
                toolbar_rightButton = (ImageView) myView.findViewById(R.id.toolbar_right_image);
                toolbar_leftButton = (ImageView) myView.findViewById(R.id.toolbar_left_image);
                toolbar_searchview = (EditText) myView.findViewById(R.id.toolbar_searchview);
                toolbar_title = (TextView) myView.findViewById(R.id.toolbar_title);
    
                addView(myView);
    
                if (showSearchView) {
                    showSearchView();
                    hideTitle();
                } else {
                    showTitle();
                    hideSearchView();
                    if (title != null) {
                        toolbar_title.setText(title);
                    }
                }
                if (left_button_icon != null) {
                    toolbar_leftButton.setImageDrawable(left_button_icon);
                }
                if (right_button_icon != null) {
                    toolbar_rightButton.setImageDrawable(right_button_icon);
                }
    
    
                initLinstener();
            }
        }
    
    
        /**
         * 标题与搜索框的切换
         */
        public void setShowSearchView() {
            hideTitle();
            showSearchView();
        }
    
        public void setShowTitleView(String title) {
            hideSearchView();
            showTitle();
            toolbar_title.setText(title);
        }
    
        /**
         * 设置左右按钮的图标
         *
         * @param d
         */
        public void setLeftButtonIconDrawable(Drawable d) {
            toolbar_leftButton.setImageDrawable(d);
        }
    
        public void setRightButtonIconDrawable(Drawable d) {
            toolbar_rightButton.setImageDrawable(d);
        }
    
        public void hideSearchView() {
            toolbar_searchview.setVisibility(GONE);
        }
    
        public void showSearchView() {
            toolbar_searchview.setVisibility(VISIBLE);
        }
    
        public void hideTitle() {
            toolbar_title.setVisibility(GONE);
        }
    
        public void showTitle() {
            toolbar_title.setVisibility(VISIBLE);
        }
    
        @Override
        public void setTitle(int resId) {
            toolbar_title.setText(getContext().getText(resId));
    
        }
    
        @Override
        public void setTitle(CharSequence title) {
            toolbar_title.setText(title);
        }
    
        private OnLeftButtonOnClickListener onLeftButtonOnClickListener;
        private OnRightButtonOnClickListener onRightButtonOnClickListener;
    
    
        private void initLinstener() {
            toolbar_rightButton.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (onRightButtonOnClickListener != null) {
                        onRightButtonOnClickListener.onClick();
                    }
                }
            });
    
            toolbar_leftButton.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (onLeftButtonOnClickListener != null) {
                        onLeftButtonOnClickListener.onClick();
                    }
                }
            });
        }
    
        public void setLeftButtonClick(OnLeftButtonOnClickListener listener) {
            onLeftButtonOnClickListener = listener;
        }
    
        public void setRightButtonClick(OnRightButtonOnClickListener listener) {
            onRightButtonOnClickListener = listener;
        }
    
    
        public interface OnLeftButtonOnClickListener {
            void onClick();
        }
    
        public interface OnRightButtonOnClickListener {
            void onClick();
        }
    }
    

    最后把上面layout_main.xml中的MyToolBar取消注释,运行,大功告成

    由于昨天在layout中引用app命名空间的时候手懒复制错了

    xmlns:app="http://schemas.android.com/tools"
    xmlns:tools="http://schemas.android.com/tools"
    

    导致头部的图片和文字都不显示,
    结果找这个问题花了三四个小时,
    找出来后舒畅的喊了一声cao.

    做完感觉原生的图标很丑,然后在网上找了个

    my_icon.png

    又舒畅不不少

    公司电脑垃圾,没上传git

    好了,撸代码去了

    相关文章

      网友评论

          本文标题:商城开发之自定义头部TabHost和底部ToolBar

          本文链接:https://www.haomeiwen.com/subject/qzyrtxtx.html